Barmer Fractal

Advertorial: With Iconbar 

<div class="o-advertorial cs--a js-teaser-targeting-init">
    <div class="advertorial__content">

        <div class="advertorial__objects-wrapper">

            <div class="advertorial__iconbar" role="list">

                <div class="o-teaser teaser--iconbar" role="listitem">

                    <div class="teaser__image">

                        <i class="a-icon icon--check" aria-hidden="true"></i>

                    </div>

                    <div class="teaser__content">

                        <div class="teaser__headline">
                            <a class="teaser__target" href="http://tagesschau.de">
                                Kein Porto, kein Gang zum Briefkasten:
                            </a>
                        </div>

                        <div class="teaser__text teaser__text--richtext">
                            AU-Bescheinigung einfach abfotografieren und direkt an die Barmer übermitteln&nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
                        </div>

                    </div>

                </div>

                <div class="o-teaser teaser--iconbar" role="listitem">

                    <div class="teaser__image">

                        <i class="a-icon icon--check" aria-hidden="true"></i>

                    </div>

                    <div class="teaser__content">

                        <div class="teaser__headline">
                            <a class="teaser__target" href="http://tagesschau.de">
                                Beitragsbescheinigungen und andere Nachweise ganz einfach anfordern:
                            </a>
                        </div>

                        <div class="teaser__text teaser__text--richtext">
                            Mitgliedsbescheinigung und Versicherungsnachweise unkompliziert downloaden&nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
                        </div>

                    </div>

                </div>

                <div class="o-teaser teaser--iconbar" role="listitem">

                    <div class="teaser__image">

                        <i class="a-icon icon--check" aria-hidden="true"></i>

                    </div>

                    <div class="teaser__content">

                        <div class="teaser__headline">
                            Studien- und Schulbescheinigungen hochladen und verschicken:

                        </div>

                        <div class="teaser__text teaser__text--richtext">
                            Die App ganz einfach runterladen und schon heute profitieren
                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>
    <div class="advertorial__imagerie">
        <picture class="a-picture ">
            <source media="(max-width: 640px)" srcset="../../images/4x3/mann-mit-tablet.jpg">
            <source media="(min-width: 641px)" srcset="../../images/5x7/mann-mit-tablet.jpg">
            <img src="../../images/5x7/mann-mit-tablet.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": "cs--a js-teaser-targeting-init"
  },
  "switches": {
    "hasOverline": false,
    "hasHeadline": false,
    "hasDetailtext": false,
    "hasModal": false,
    "hasObjects": true,
    "hasIconbar": true,
    "hasExternalLinks": false,
    "hasCTA": false,
    "hasLocalSettings": false,
    "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/mann-mit-tablet.jpg"
          },
          {
            "media": "(min-width: 641px)",
            "srcset": "../../images/5x7/mann-mit-tablet.jpg"
          }
        ],
        "img": {
          "src": "../../images/5x7/mann-mit-tablet.jpg",
          "alt": "Dies ist ein alternativ Text"
        }
      }
    },
    "localSettingLink": {
      "content": {
        "text": "Hier geht es direkt zum Login!"
      }
    },
    "externalLinks": [],
    "iconbar": {
      "switches": {
        "hasHeadline": false,
        "isPlaintext": false,
        "hasFooter": false,
        "hasDetailText": false,
        "teaserItemAmount": 3
      },
      "viewtypes": {
        "specifier": "teaser-collection--iconbar js-teaser-targeting-init cs--a"
      },
      "partials": {
        "includedItemType": "teaser--iconbar",
        "teaserItems": [
          {
            "switches": {
              "hasTeaserHeadline": true,
              "hasTeaserRichtext": true,
              "hasHeadlineChevron": false,
              "hasTextChevron": true
            },
            "content": {
              "headline": "Kein Porto, kein Gang zum Briefkasten:",
              "richtext": "<p>AU-Bescheinigung einfach abfotografieren und direkt an die Barmer übermitteln</p>"
            },
            "partials": {
              "iconType": "icon--check"
            }
          },
          {
            "content": {
              "headline": "<span class=\"link__inner\">Telefon-Service</span>"
            },
            "partials": {
              "iconType": "icon--contact"
            }
          },
          {
            "content": {
              "headline": "<span class=\"link__inner\">E-Mail-Kontakt</span>"
            },
            "partials": {
              "iconType": "icon--message"
            }
          },
          {
            "content": {
              "headline": "<span class=\"link__inner\">Service Chat</span>"
            },
            "partials": {
              "iconType": "icon--chat"
            }
          },
          {
            "content": {
              "headline": "<span class=\"link__inner\">Rückruf-Service</span>"
            },
            "partials": {
              "iconType": "icon--callservice"
            }
          }
        ]
      }
    },
    "iconbarTeasers": [
      {
        "switches": {
          "hasTeaserHeadline": true,
          "hasTeaserRichtext": true,
          "hasHeadlineChevron": false,
          "hasTextChevron": true
        },
        "content": {
          "headline": "Kein Porto, kein Gang zum Briefkasten:",
          "richtext": "AU-Bescheinigung einfach abfotografieren und direkt an die Barmer übermitteln",
          "ariaAttrs": "role=\"listitem\""
        },
        "partials": {
          "iconType": "icon--check"
        }
      },
      {
        "switches": {
          "hasTeaserHeadline": true,
          "hasTeaserRichtext": true,
          "hasHeadlineChevron": false,
          "hasTextChevron": true
        },
        "content": {
          "headline": "Beitragsbescheinigungen und andere Nachweise ganz einfach anfordern:",
          "richtext": "Mitgliedsbescheinigung und Versicherungsnachweise unkompliziert downloaden",
          "ariaAttrs": "role=\"listitem\""
        },
        "partials": {
          "iconType": "icon--check"
        }
      },
      {
        "switches": {
          "hasTeaserHeadline": true,
          "hasTeaserHeadlineAsLink": false,
          "hasTeaserRichtext": true,
          "hasHeadlineChevron": false,
          "hasTextChevron": false
        },
        "content": {
          "headline": "Studien- und Schulbescheinigungen hochladen und verschicken:",
          "richtext": "Die App ganz einfach runterladen und schon heute profitieren",
          "ariaAttrs": "role=\"listitem\""
        },
        "partials": {
          "iconType": "icon--check"
        }
      }
    ]
  }
}

No notes defined.