PDJ Brandbox

mypage: Top Page Message 

<div class="mypage">
    <div class="mypage__content">

        <section class="mypage__section">
            <div class="mypage__block">

                <div class="messages">
                    <div class="message message--info">
                        <div class="message__wrapper">
                            <div class="message__icon message__icon--info">
                                <svg width="36" height="35" viewBox="0 0 36 35" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="18.2931" cy="17.5" r="16.7241" stroke="currentColor" stroke-width="1.55172" />
                                    <path d="M17.4252 25V13.7147H19.1592V25H17.4252ZM18.3069 11.8339C17.9689 11.8339 17.6775 11.7187 17.4326 11.4885C17.1926 11.2583 17.0726 10.9816 17.0726 10.6583C17.0726 10.335 17.1926 10.0583 17.4326 9.82808C17.6775 9.59786 17.9689 9.48276 18.3069 9.48276C18.6449 9.48276 18.9338 9.59786 19.1738 9.82808C19.4188 10.0583 19.5412 10.335 19.5412 10.6583C19.5412 10.9816 19.4188 11.2583 19.1738 11.4885C18.9338 11.7187 18.6449 11.8339 18.3069 11.8339Z" fill="currentColor" />
                                </svg>

                            </div>
                            <div class="message__content">
                                <p>This alert box indicates an informative change or action. This alert box indicates an informative change or action.</p>
                            </div>
                        </div>
                        <div class="message__close">
                            <svg class="icon-close" viewBox="0 0 12 14" version="1" xmlns="http://www.w3.org/2000/svg">
                                <path fill="currentColor" d="M6.066 5.492L2.372.931A1 1 0 1 0 .818 2.19l3.848 4.752L.418 11.34a1 1 0 0 0 1.439 1.39v-.001l4.077-4.222 3.694 4.561a1 1 0 1 0 1.554-1.259L7.334 7.059l4.248-4.399a1 1 0 0 0-1.439-1.39v.001L6.066 5.492z" />
                            </svg>

                        </div>
                    </div>

                    <div class="message message--success">
                        <div class="message__wrapper">
                            <div class="message__icon message__icon--success">
                                <svg class="icon-succes" width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="17.5" cy="17.5" r="16.7241" stroke="currentColor" stroke-width="1.55172" />
                                    <path d="M10.5 17.3276L16.0172 22.5L24.9828 12.5" stroke="currentColor" stroke-width="2.58621" />
                                </svg>

                            </div>
                            <div class="message__content">
                                <p>Great, it was success!</p>
                            </div>
                        </div>
                        <div class="message__close">
                            <svg class="icon-close" viewBox="0 0 12 14" version="1" xmlns="http://www.w3.org/2000/svg">
                                <path fill="currentColor" d="M6.066 5.492L2.372.931A1 1 0 1 0 .818 2.19l3.848 4.752L.418 11.34a1 1 0 0 0 1.439 1.39v-.001l4.077-4.222 3.694 4.561a1 1 0 1 0 1.554-1.259L7.334 7.059l4.248-4.399a1 1 0 0 0-1.439-1.39v.001L6.066 5.492z" />
                            </svg>

                        </div>
                    </div>

                    <div class="message message--error">
                        <div class="message__wrapper">
                            <div class="message__icon message__icon--error">
                                <svg class="icon-error" width="41" height="35" viewBox="0 0 41 35" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <g clip-path="url(#clip0_6_12)">
                                        <path d="M21.7224 1.625L39.0429 31.625C39.7165 32.7917 38.8746 34.25 37.5274 34.25H2.88639C1.53924 34.25 0.69727 32.7917 1.37085 31.625L18.6914 1.625C19.3649 0.458333 21.0489 0.458333 21.7224 1.625Z" stroke="currentColor" stroke-width="1.5" />
                                        <path d="M21.1737 12.4545L21.0316 22.9091H19.3839L19.2419 12.4545H21.1737ZM20.2078 27.1136C19.8574 27.1136 19.5567 26.9882 19.3058 26.7372C19.0548 26.4863 18.9294 26.1856 18.9294 25.8352C18.9294 25.4848 19.0548 25.1842 19.3058 24.9332C19.5567 24.6823 19.8574 24.5568 20.2078 24.5568C20.5582 24.5568 20.8588 24.6823 21.1098 24.9332C21.3607 25.1842 21.4862 25.4848 21.4862 25.8352C21.4862 26.0672 21.427 26.2803 21.3086 26.4744C21.195 26.6686 21.0411 26.8248 20.847 26.9432C20.6576 27.0568 20.4445 27.1136 20.2078 27.1136Z" fill="currentColor" />
                                    </g>
                                    <defs>
                                        <clipPath id="clip0_6_12">
                                            <rect width="40" height="35" fill="currentColor" transform="translate(0.206898)" />
                                        </clipPath>
                                    </defs>
                                </svg>

                            </div>
                            <div class="message__content">
                                <p>Woops, something went wrong!</p>
                            </div>
                        </div>
                        <div class="message__close">
                            <svg class="icon-close" viewBox="0 0 12 14" version="1" xmlns="http://www.w3.org/2000/svg">
                                <path fill="currentColor" d="M6.066 5.492L2.372.931A1 1 0 1 0 .818 2.19l3.848 4.752L.418 11.34a1 1 0 0 0 1.439 1.39v-.001l4.077-4.222 3.694 4.561a1 1 0 1 0 1.554-1.259L7.334 7.059l4.248-4.399a1 1 0 0 0-1.439-1.39v.001L6.066 5.492z" />
                            </svg>

                        </div>
                    </div>

                </div>

            </div>
        </section>

    </div>
</div>
 
<div class="mypage">
  <div class="mypage__content">

    <section class="mypage__section">
      <div class="mypage__block">

        <div class="messages">
          {{ render '@message' }}
          {{ render '@message--success' }}
          {{ render '@message--error' }}
        </div>

      </div>
    </section>

  </div>
</div>
 
productlink:
  label: More info here
  class: mypage__link
  modifier: false
hardwarelink:
  label: See more
  class: mypage__link
  modifier: false
rekordboxlink:
  label: Check/change contract information
  class: mypage__link
  modifier: false
alphathetacarelink:
  label: Check/change contract information
  class: mypage__link
  modifier: false
registrationinformationlink:
  label: See more
  class: mypage__link
  modifier: false
editlink:
  label: Edit
  class: mypage__link
  modifier: false
backlink:
  label: back
  class: mypage__link
  modifier: back
registerlink:
  label: Register products
  modifier: false
loadmore:
  label: Load more
  modifier: false
productregistration:
  label: + Product registration
  modifier: false
products:
  - visual:
      src: >-
        https://www.pioneerdj.com/-/media/pioneerdj/images/products/mixer/djm-v10/djm-v10-main.png?h=250&w=400&hash=B13A55D94B116CF931A83AE324726AAF90294DCF
      alt: ''
    label: DJM-V10
    serial: ABCD123456EF
    registered: false
    actions:
      - action: null
        url: ''
        label: get support
      - action: null
        url: ''
        label: Item 2
      - action: null
        url: ''
        label: Item 3
      - action: null
        url: ''
        label: Item 4
  - visual:
      src: >-
        https://www.pioneerdj.com/-/media/pioneerdj/images/products/mixer/djm-900nxs2/black/djm-900nxs2-main2.png?h=250&w=400&hash=4DA5CD8F5E2AC0FACDBDA8E3DE9FAE1EA82A1A1A
      alt: ''
    label: DJM-900NXS2
    serial: ABCD123456EF
    registered: true
    actions:
      - action: null
        url: ''
        label: get support
  - visual:
      src: >-
        https://www.pioneerdj.com/-/media/pioneerdj/images/products/dj-sampler/djs-1000/djs-1000-main.png?h=250&w=400&hash=F3C1E27C7D0070B31A79A30C0D705EF6198D03F5
      alt: ''
    label: DJS-1000
    serial: ABCD123456EF
    registered: false
    actions:
      - action: null
        url: ''
        label: get support
  - visual:
      src: >-
        https://www.pioneerdj.com/-/media/pioneerdj/images/products/mixer/djm-v10/djm-v10-main.png?h=250&w=400&hash=B13A55D94B116CF931A83AE324726AAF90294DCF
      alt: ''
    label: DJM-V10
    serial: ABCD123456EF
    registered: false
    actions:
      - action: null
        url: ''
        label: get support
  - visual:
      src: >-
        https://www.pioneerdj.com/-/media/pioneerdj/images/products/mixer/djm-900nxs2/black/djm-900nxs2-main2.png?h=250&w=400&hash=4DA5CD8F5E2AC0FACDBDA8E3DE9FAE1EA82A1A1A
      alt: ''
    label: DJM-900NXS2
    registered: false
    actions:
      - action: null
        url: ''
        label: get support

No notes defined.