Barmer Fractal

Teaser: Comparison 

<div class="o-teaser teaser--comparison js-modal-by-ttag-init">

    <div class="teaser__header">
        <div class="teaser__label" aria-label="Label"><span aria-hidden="true">Label</span></div>
        <h4 class="teaser__headline">Einfach lukrativ</h4>
    </div>

    <div class="teaser__image">
        <picture class="a-picture ">
            <source media="(max-width: 1024px)" srcset="../../images/4x3/eltern-baby-tablet-712x534.jpg" width="400" height="300">
            <source media="(min-width: 1025px)" srcset="../../images/5x7/eltern-baby-tablet-714x1000.jpg" width="500" height="700">
            <img src="../../images/5x7/eltern-baby-tablet-714x1000.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
        </picture>

    </div>

    <div class="teaser__subline">
        Bis zu <strong>750 Euro</strong> Prämie in 3 Jahren
    </div>

    <div class="teaser__text">
        <div class="a-richtext">
            <h4>Das Topfit-Guthaben</h4>
            <p>Unsere jährliche Extrazahlung für Ihren gesunden Lebensstil.</p>
            <p><strong>Maximale Nachzahlung 50 €*</strong></p>
            <p class="bm-small"><small>*wenn Sie wider Erwarten viele Leistungen beanspruchen</small></p>
        </div>
    </div>

    <div class="teaser__footer">
        <img src="../../img/barmer-gek-logo--white.svg" alt="BARMER-Logo" title="BARMER-Logo" class="a-image a-image--logo-barmer-white">

        Vollständiger<br />Versicherungsschutz
    </div>

</div>
 
<div class="o-teaser {{viewtypes.specifier}}">

  {{^ switches.isPlaceholder }}
    <div class="teaser__header">
      {{#if content.label }}
        <div class="teaser__label" aria-label="{{content.labelA11y}}"><span aria-hidden="true">{{content.label}}</span></div>
      {{/if}}
      <h4 class="teaser__headline">{{content.headline}}</h4>
    </div>

    <div class="teaser__image">
      {{ render '@picture--default' partials.picture merge=true}}
    </div>

    {{#if content.subline }}
      <div class="teaser__subline">
        {{{ content.subline }}}
      </div>
    {{/if}}
  {{/ switches.isPlaceholder}}

  {{#if content.richtext }}
    <div class="teaser__text">
      <div class="a-richtext">
        {{{ content.richtext }}}
      </div>
    </div>
  {{/if}}

  {{#if content.footerText  }}
    <div class="teaser__footer">
      {{#if switches.hasFooterImage }}
        {{render (stringToPartial partials.includedImage) merge=true}}
      {{/if}}
      {{{ content.footerText }}}
    </div>
  {{/if}}

  {{^ switches.isPlaceholder }}
    {{#if partials.btnMore}}
      {{ render '@button--secondary' partials.btnMore merge=true }}

      <template class="teaser__modal js-modal-by-ttag-target">
        {{ render '@modal--comparison' partials.modal merge=true }}
      </template>
    {{/if}}
  {{/ switches.isPlaceholder}}

</div>
 
{
  "switches": {
    "isLinkable": false,
    "hasButton": false,
    "hasTestimonialButton": false,
    "hasDockingPlacement": false,
    "hasTestimonialPlacement": false,
    "hasHeadlineChevron": false,
    "hasIconAsImage": false,
    "hasInternalVideo": false,
    "hasPictureWithSrcset": true,
    "hasPlayButton": false,
    "hasSecondTarget": false,
    "hasTeaserHeadline": true,
    "hasTeaserContentWrapper": true,
    "hasTeaserHeadlineAsLink": false,
    "hasTeaserHeadlineWrapper": false,
    "hasTeaserImage": true,
    "hasTeaserImageLazyLoadingDisabled": false,
    "hasTeaserOverline": false,
    "hasTeaserRichtext": false,
    "hasTeaserText": true,
    "hasTextChevron": false,
    "hasTestimonial": false,
    "linkAsButtonView": false,
    "linkAsButtonView2": false,
    "hasMultipleButtons": false,
    "hasRatingStars": false,
    "hasActor": false,
    "hasTeaserGradient": false,
    "isPlaceholder": false,
    "hasFooterImage": true
  },
  "viewtypes": {
    "specifier": "teaser--comparison js-modal-by-ttag-init"
  },
  "content": {
    "targetUrl": "http://tagesschau.de",
    "overline": "Dies ist eine Overline, die im Studio als Subtitle geführt wird",
    "headline": "Einfach lukrativ",
    "headlineTag": "h4",
    "badge": "52%",
    "videoTemplateId": "123",
    "videoType": "video--external",
    "label": "Label",
    "labelA11y": "Label",
    "subline": "Bis zu <strong>750 Euro</strong> Prämie in 3 Jahren",
    "richtext": "<h4>Das Topfit-Guthaben</h4>\n    <p>Unsere jährliche Extrazahlung für Ihren gesunden Lebensstil.</p>\n    <p><strong>Maximale Nachzahlung 50 €*</strong></p>\n    <p class=\"bm-small\"><small>*wenn Sie wider Erwarten viele Leistungen beanspruchen</small></p>",
    "footerText": "Vollständiger<br />Versicherungsschutz"
  },
  "partials": {
    "teaserText": {
      "content": {
        "text": "Dies ist ein kurzer Teaser-Text"
      }
    },
    "image": {
      "content": {
        "sourceUrl": "../../images/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg"
      }
    },
    "picture": {
      "content": {
        "sources": [
          {
            "media": "(max-width: 1024px)",
            "srcset": "../../images/4x3/eltern-baby-tablet-712x534.jpg",
            "width": "400",
            "height": "300"
          },
          {
            "media": "(min-width: 1025px)",
            "srcset": "../../images/5x7/eltern-baby-tablet-714x1000.jpg",
            "width": "500",
            "height": "700"
          }
        ],
        "img": {
          "src": "../../images/5x7/eltern-baby-tablet-714x1000.jpg",
          "alt": "Dies ist ein alternativ Text",
          "width": false,
          "height": false
        }
      }
    },
    "textlink": {},
    "playButton": {
      "viewtypes": {
        "specifier": "btn--play js-modal-trigger"
      }
    },
    "includedImage": "image--logo-barmer-white",
    "modal": {
      "switches": {
        "hidden": false
      }
    }
  }
}

No notes defined.