Barmer Fractal

Modal: Qr Codes 

<div class="m-modal modal--qr-codes js-modal-by-ttag-modal" role="dialog" aria-modal="true" id="" aria-labelledby="" aria-describedby="">
    <div class="modal__body">
        <button class="a-btn btn--close modal__close-button js-close-modal" type="button" aria-label="Schließt das Pop-up"><i class="a-icon icon--close" aria-hidden="true"></i></button>

        <div class="modal__title">Jetzt BARMER-App herunterladen</div>

        <div class="modal__content">
            <div class="modal__text">
                <p>App Store wählen und QR Code scannen</p>
            </div>
            <div class="modal__qr-code-wrapper">
                <div class="modal__qr-code">
                    <div class="modal__qr-code-label">Apple App Store</div>
                    <div class="modal__qr-code-image">
                        <a href="https://apps.apple.com/de/app/barmer-app/id956752981" title="Link to Barmer App in Apple Store" tabindex="-1"><img src="../../images/qr-code--apple-app-store.svg" alt="Apple App Store QR-Code" title="Dies ist der title-Text" class="a-image " loading="lazy">
                        </a>
                    </div>
                    <div class="list--skip-links">
                        <a class="a-link" href="https://apps.apple.com/de/app/barmer-app/id956752981">https://apps.apple.com/de/app/barmer-app/id956752981</a>
                    </div>
                </div>
                <div class="modal__qr-code">
                    <div class="modal__qr-code-label">Google Play Store</div>
                    <div class="modal__qr-code-image">
                        <a href="https://play.google.com/store/apps/details?id&#x3D;de.barmergek.serviceapp" title="Link to Barmer App in Google Play Store" tabindex="-1"><img src="../../images/qr-code--google-play-store.svg" alt="Google Play Store QR-Code" title="Dies ist der title-Text" class="a-image " loading="lazy">
                        </a>
                    </div>
                    <div class="list--skip-links">
                        <a class="a-link" href="https://play.google.com/store/apps/details?id&#x3D;de.barmergek.serviceapp">https://play.google.com/store/apps/details?id&#x3D;de.barmergek.serviceapp</a>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="modal__background" aria-hidden="true"></div>
</div>
 
<div class="m-modal {{viewtypes.specifier}}" role="dialog" aria-modal="true" id="{{content.id}}" {{# content.ariaLabelledby}}aria-labelledby="{{this}}"{{/ content.ariaLabelledby }} {{#content.ariaDescribedby}}aria-describedby="{{this}}"{{/content.ariaDescribedby}} {{#switches.hidden}}hidden{{/switches.hidden}}>
  <div class="modal__body">
    {{#switches.closeButton}}{{ render '@button--close' partials.closeIconButton merge=true}}{{/switches.closeButton}}

    <div class="modal__title">Jetzt BARMER-App herunterladen</div>

    <div class="modal__content">
      <div class="modal__text">
        <p>App Store wählen und QR Code scannen</p>
      </div>
      <div class="modal__qr-code-wrapper">
        <div class="modal__qr-code">
          <div class="modal__qr-code-label">Apple App Store</div>
          <div class="modal__qr-code-image">
            <a href="{{partials.qrCodeApple.content.url}}" title="Link to Barmer App in Apple Store" tabindex="-1">{{ render '@image' partials.qrCodeApple merge=true}}</a>
          </div>
          <div class="list--skip-links">
            <a class="a-link" href="{{partials.qrCodeApple.content.url}}">{{partials.qrCodeApple.content.url}}</a>
          </div>
        </div>
        <div class="modal__qr-code">
          <div class="modal__qr-code-label">Google Play Store</div>
          <div class="modal__qr-code-image">
            <a href="{{partials.qrCodeGoogle.content.url}}" title="Link to Barmer App in Google Play Store" tabindex="-1">{{ render '@image' partials.qrCodeGoogle merge=true}}</a>
          </div>
          <div class="list--skip-links">
            <a class="a-link" href="{{partials.qrCodeGoogle.content.url}}">{{partials.qrCodeGoogle.content.url}}</a>
          </div>
        </div>
      </div>
    </div>

  </div>
  <div class="modal__background" aria-hidden="true"></div>
</div>
 
{
  "switches": {
    "hidden": false,
    "dialogIcon": false,
    "closeButton": true,
    "primaryButton": true,
    "secondaryButton": true
  },
  "content": {
    "id": "",
    "ariaLabelledby": "",
    "ariaDescribedby": "",
    "text": "Modal Text",
    "modalEndText": "Sie verlassen das Video"
  },
  "partials": {
    "dialogIcon": {},
    "closeIconButton": {
      "viewtypes": {
        "specifier": "btn--close modal__close-button js-close-modal"
      },
      "content": {
        "ariaLabel": "Schließt das Pop-up"
      }
    },
    "primaryButton": {
      "viewtypes": {
        "specifier": "btn--primary js-close-modal js-modal-primary"
      }
    },
    "secondaryButton": {
      "viewtypes": {
        "specifier": "btn--secondary js-close-modal js-modal-secondary"
      }
    },
    "qrCodeApple": {
      "switches": {
        "hasRetina": false,
        "hasResponsiveMedia": false
      },
      "content": {
        "sourceUrl": "../../images/qr-code--apple-app-store.svg",
        "altText": "Apple App Store QR-Code",
        "url": "https://apps.apple.com/de/app/barmer-app/id956752981"
      }
    },
    "qrCodeGoogle": {
      "switches": {
        "hasRetina": false,
        "hasResponsiveMedia": false
      },
      "content": {
        "sourceUrl": "../../images/qr-code--google-play-store.svg",
        "altText": "Google Play Store QR-Code",
        "url": "https://play.google.com/store/apps/details?id=de.barmergek.serviceapp"
      }
    }
  },
  "viewtypes": {
    "specifier": "modal--qr-codes js-modal-by-ttag-modal"
  }
}

No notes defined.