Barmer Fractal

Advertorial: Image Landscape Small 

<div class="o-advertorial advertorial--imagerie-small">
    <div class="advertorial__content">

        <h3 class="advertorial__headline">Damit ihr Zeit für die wirklich wichtigen Dinge habt!</h3>

        <div class="advertorial__detailtext">
            <p>Alles Wichtige ganz einfach per App erledigen:<br> Mit der Barmer-App AU-Bescheinigung bequem online verschicken, keinen Vorsorgetermin verpassen und unkompliziert Mitgliedsbescheinigungen und andere Nachweise anfordern.</p>

        </div>

        <a class="a-btn btn--primary" href="" title="">
            Button
        </a>

        <div class="advertorial__local-settings">
            <p>Sie haben schon ein Benutzerkonto?</p>
            <a href="http://zdf.de" class="a-link ">
                <span class="link__inner">Hier geht es direkt zum Login!</span>&nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
            </a>

        </div>
    </div>
    <div class="advertorial__imagerie">
        <picture class="a-picture ">
            <source media="(max-width: 640px)" srcset="../../images/4x3/promenade.jpg">
            <source media="(min-width: 641px)" srcset="../../images/4x3/promenade.jpg">
            <img src="../../images/4x3/promenade.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
        </picture>

    </div>
</div>
 
<div class="o-advertorial {{viewtypes.specifier}}">
  <div class="advertorial__content">
    {{#switches.hasOverline}}
      <div class="advertorial__overline">{{content.overline}}</div>
    {{/switches.hasOverline}}

    {{#switches.hasHeadline}}
      <h3 class="advertorial__headline">{{content.headline}}</h3>
    {{/switches.hasHeadline}}

    {{#switches.hasDetailtext}}
      <div class="advertorial__detailtext">
        {{render '@richtext' partials.richtext merge=true}}
      </div>
    {{/switches.hasDetailtext}}

    {{#switches.hasObjects}}
      <div class="advertorial__objects-wrapper">

        {{#switches.hasIconbar}}
          <div class="advertorial__iconbar" role="list">
            {{# each partials.iconbarTeasers as |iconbarTeaser| }}
              {{render '@teaser--iconbar' iconbarTeaser merge=true}}
            {{/each}}
          </div>
        {{/switches.hasIconbar}}

        {{#switches.hasExternalLinks}}
          {{# each partials.externalLinks as |button| }}
            {{render '@button--with-image' button merge=true}}
          {{/each}}
        {{/switches.hasExternalLinks}}
      </div>
    {{/switches.hasObjects}}

    {{#switches.hasModal}}
    {{render '@button--primary' partials.modalTriggerButton merge=true}}
    {{/switches.hasModal}}

    {{#switches.hasCTA}}
      {{render '@button' partials.cta merge=true}}
    {{/switches.hasCTA}}

    {{#switches.hasModal}}
      <template class="teaser__modal js-modal-by-ttag-target">
        {{ render '@modal--qr-codes' partials.modal merge=true }}
      </template>
    {{/switches.hasModal}}

    {{#switches.hasLocalSettings}}
      <div class="advertorial__local-settings">
        <p>{{content.localSettingText}}</p>
        {{render '@link--with-chevron-right' partials.localSettingLink merge=true}}
      </div>
    {{/switches.hasLocalSettings}}
  </div>
  <div class="advertorial__imagerie">
    {{#switches.hasSlider}}
      {{render '@slider--advertorial' partials.slider merge=true}}
    {{/switches.hasSlider}}
    {{^switches.hasSlider}}
      {{ render '@picture' partials.pictures merge=true}}
    {{/switches.hasSlider}}
  </div>
</div>
 
{
  "viewtypes": {
    "specifier": "advertorial--imagerie-small"
  },
  "switches": {
    "hasOverline": false,
    "hasHeadline": true,
    "hasDetailtext": true,
    "hasModal": false,
    "hasObjects": false,
    "hasIconbar": false,
    "hasExternalLinks": false,
    "hasCTA": true,
    "hasLocalSettings": true,
    "hasSlider": false
  },
  "content": {
    "overline": "Hier wird eine Overline ausgespielt.",
    "headline": "Damit ihr Zeit für die wirklich wichtigen Dinge habt!",
    "localSettingText": "Sie haben schon ein Benutzerkonto?"
  },
  "partials": {
    "richtext": {
      "switches": {
        "isMusterContent": false,
        "hasDefaultText": false
      },
      "content": {
        "text": "<p>Alles Wichtige ganz einfach per App erledigen:<br> Mit der Barmer-App AU-Bescheinigung bequem online verschicken, keinen Vorsorgetermin verpassen und unkompliziert Mitgliedsbescheinigungen und andere Nachweise anfordern.</p>"
      }
    },
    "cta": {
      "viewtypes": {
        "specifier": "btn--primary"
      },
      "switches": {
        "asLink": true
      }
    },
    "pictures": {
      "content": {
        "sources": [
          {
            "media": "(max-width: 640px)",
            "srcset": "../../images/4x3/promenade.jpg"
          },
          {
            "media": "(min-width: 641px)",
            "srcset": "../../images/4x3/promenade.jpg"
          }
        ],
        "img": {
          "src": "../../images/4x3/promenade.jpg",
          "alt": "Dies ist ein alternativ Text"
        }
      }
    },
    "localSettingLink": {
      "content": {
        "text": "Hier geht es direkt zum Login!"
      }
    }
  }
}

No notes defined.