Barmer Fractal

Teaser: Big Headline 

<div class="o-teaser teaser--big-headline">

    <h2 class="teaser__headline">
        Bonuspunkten beim Yoga.

    </h2>

    <div class="teaser__text">
        Yoga macht nicht nur einen schlanken Daumen. Mit der Verwendung einer glutenfreien Yogamatte, fördern sie auch Ihre Darmbakterien!

    </div>

    <div class="teaser__button-wrapper">
        <a class="a-btn btn--conversion" href="#" title="">
            App laden
        </a>

        <a class="a-btn btn--primary btn--login" href="#" title="">
            Meine BARMER<i class="a-icon icon--profile" aria-hidden="true"></i>
        </a>

    </div>

</div>
 
{{#this.switches.isLinkable}}<a href="{{ content.targetUrl }}" class="o-teaser {{viewtypes.specifier}}">{{/this.switches.isLinkable}}
{{^this.switches.isLinkable}}<div class="o-teaser {{viewtypes.specifier}}" {{{content.attrs}}} {{{content.ariaAttrs}}}>{{/this.switches.isLinkable}}

{{# this.switches.hasTeaserImage }}
    <div class="teaser__image">
      {{# this.switches.hasBadgeImage }}
        {{render '@badge-image' this.partials.badgeImage merge=true }}
      {{/ this.switches.hasBadgeImage }}

      {{^ this.switches.hasIconAsImage }}

        {{^ this.switches.hasTeaserImageLazyLoadingDisabled }}
          {{# this.switches.hasPictureWithSrcset }}
            {{ render '@picture' this.partials.picture merge=true}}
          {{/ this.switches.hasPictureWithSrcset }}
          {{^ this.switches.hasPictureWithSrcset }}
            {{ render '@image' this.partials.image merge=true}}
          {{/ this.switches.hasPictureWithSrcset }}
        {{/ this.switches.hasTeaserImageLazyLoadingDisabled }}

        {{# this.switches.hasTeaserImageLazyLoadingDisabled }}
          {{# this.switches.hasPictureWithSrcset }}
            {{ render '@picture--no-lazy' this.partials.picture merge=true}}
          {{/ this.switches.hasPictureWithSrcset }}
          {{^ this.switches.hasPictureWithSrcset }}
            {{ render '@image--no-lazy' this.partials.image merge=true}}
          {{/ this.switches.hasPictureWithSrcset }}
        {{/ this.switches.hasTeaserImageLazyLoadingDisabled }}

      {{/ this.switches.hasIconAsImage }}

      {{# this.switches.hasIconAsImage }}
        {{ render (stringToPartial partials.iconType) partials.icon merge=true }}
      {{/ this.switches.hasIconAsImage }}

      {{# this.switches.hasPlayButton }}
        {{ render '@button--play' this.partials.playButton merge=true}}
        <template id="video-template-{{content.videoTemplateId}}">
          {{ render (stringToPartial content.videoType) this.partials.videoTemplate merge=true }}
        </template>
      {{/this.switches.hasPlayButton}}
    </div>
{{/ this.switches.hasTeaserImage }}

{{# this.switches.hasInternalVideo }}
    <div class="teaser__video js-video-control">
      {{ render '@button--video-control' this.partials.videoControl merge=true}}
      {{ render '@video' this.partials.video merge=true}}
    </div>
{{/this.switches.hasInternalVideo}}

{{# this.switches.hasTeaserContentWrapper }}
  <div class="teaser__content">
{{/this.switches.hasTeaserContentWrapper}}


    {{# this.switches.hasTeaserOverline }}
      <div class="teaser__overline">{{{content.overline}}}</div>
    {{/ this.switches.hasTeaserOverline }}

{{# this.switches.hasTeaserHeadline }}
  {{# this.switches.hasTeaserHeadlineWrapper }}<div class="teaser__headline-wrapper">{{/this.switches.hasTeaserHeadlineWrapper}}
    <{{content.headlineTag}} class="teaser__headline">
  {{# this.switches.hasTeaserHeadlineAsLink }}
    <a class="teaser__target" href="{{content.targetUrl}}" {{#content.teaserLinkTitle}}title="{{this}}"{{/content.teaserLinkTitle}} {{#content.teaserLinkTarget}}target="{{this}}"{{/content.teaserLinkTarget}}>
  {{/this.switches.hasTeaserHeadlineAsLink}}
  {{{ content.headline }}}
  {{# this.switches.hasHeadlineChevron }}
      &nbsp;{{ render '@icon--chevron-right' merge=true}}
  {{/this.switches.hasHeadlineChevron}}
  {{# this.switches.hasTeaserHeadlineAsLink }}</a>{{/this.switches.hasTeaserHeadlineAsLink}}
  </{{content.headlineTag}}>
  {{# this.switches.hasTeaserHeadlineWrapper }}</div>{{/this.switches.hasTeaserHeadlineWrapper}}
{{/this.switches.hasTeaserHeadline}}


{{# this.switches.hasTeaserText }}
    <div class="teaser__text">
      {{^ this.switches.hasTextChevron }}
        {{ render '@richtext' this.partials.teaserText merge=true }}
      {{/this.switches.hasTextChevron }}
      {{# this.switches.hasTextChevron }}
        {{ render '@richtext' this.partials.teaserText merge=true }}&nbsp;{{ render '@icon--chevron-right' merge=true }}
      {{/this.switches.hasTextChevron}}
    </div>
{{/this.switches.hasTeaserText}}


{{# this.switches.hasTeaserRichtext }}
    <div class="teaser__text teaser__text--richtext">
      {{^ this.switches.hasTextChevron }}
        {{{ content.richtext }}}
      {{/this.switches.hasTextChevron}}
      {{# this.switches.hasTextChevron }}
        {{{ content.richtext }}}&nbsp;{{ render '@icon--chevron-right' merge=true}}
      {{/this.switches.hasTextChevron}}
    </div>
{{/this.switches.hasTeaserRichtext}}


{{# this.switches.hasButton }}
    <div class="teaser__button-wrapper">
      {{^this.switches.isLinkable}}
        {{^ this.switches.linkAsButtonView}}
          {{render '@link' this.partials.textlink merge=true }} {{!-- A-Element with default textlink styling --}}
        {{/ this.switches.linkAsButtonView}}
        {{# this.switches.linkAsButtonView}}
          {{ render '@button' this.partials.button merge=true }} {{!-- A-Element with default button styling --}}
        {{/ this.switches.linkAsButtonView}}

        {{# this.switches.hasSecondTarget }}
          {{^ this.switches.linkAsButtonView2}}
            {{render '@link' this.partials.textlink2 merge=true }} {{!-- 2nd A-Element with default textlink styling --}}
          {{/ this.switches.linkAsButtonView2}}
          {{# this.switches.linkAsButtonView2}}
            {{ render '@button' this.partials.button2 merge=true }} {{!-- A-Element with default button styling --}}
          {{/ this.switches.linkAsButtonView2}}
        {{/ this.switches.hasSecondTarget }}
      {{/this.switches.isLinkable}}
      {{#this.switches.isLinkable}}
        {{ render '@button' this.partials.button merge=true }}
      {{/this.switches.isLinkable}}
    </div>
{{/ this.switches.hasButton }}


{{# this.switches.hasMultipleButtons }}
    <div class="teaser__button-wrapper">
      {{# each partials.multipleButtons as |button| }}
        {{render (stringToPartial button.type) button merge=true}}
      {{/each}}
    </div>
{{/ this.switches.hasMultipleButtons }}

{{# this.switches.hasTeaserContentWrapper }}
  </div>
{{/ this.switches.hasTeaserContentWrapper }}

{{# this.switches.hasTeaserGradient }}
    <div class="teaser__gradient"></div>
{{/this.switches.hasTeaserGradient}}

{{# this.switches.hasPills }}
    <div class="teaser__pills">
      {{render '@crawl' partials.crawl merge=true }}
    </div>
{{/this.switches.hasPills}}

{{^this.switches.isLinkable}}</div>{{/this.switches.isLinkable}}
{{#this.switches.isLinkable}}</a>{{/this.switches.isLinkable}}

{{#this.switches.hasDockingPlacement}}
  <div class="teaser__docking-placement {{viewtypes.dockingSpecifier}}">
    {{ render (stringToPartial partials.includedItemType) partials.dockingPlacement merge=true }}
  </div>
{{/this.switches.hasDockingPlacement}}


{{#this.switches.hasTestimonialPlacement}}
  <div class="teaser__testimonial-placement">

    {{# switches.hasTestimonial}}
      {{ render '@figure--blockquote' partials.blockquote merge=true }}
    {{/ switches.hasTestimonial}}

    {{!-- Same as the teaser__button-wrapper above, apart from having a different switch name --}}
    {{# this.switches.hasTestimonialButton }}
      <div class="teaser__button-wrapper">
        {{^this.switches.isLinkable}}
          {{^ this.switches.linkAsButtonView}}
            {{render '@link' this.partials.textlink merge=true }} {{!-- A-Element with default textlink styling --}}
          {{/ this.switches.linkAsButtonView}}
          {{# this.switches.linkAsButtonView}}
            {{ render '@button' this.partials.button merge=true }} {{!-- A-Element with default button styling --}}
          {{/ this.switches.linkAsButtonView}}

          {{# this.switches.hasSecondTarget }}
            {{render '@link' this.partials.textlink2 merge=true }}
          {{/ this.switches.hasSecondTarget }}
        {{/this.switches.isLinkable}}
        {{#this.switches.isLinkable}}
          {{ render '@button' this.partials.button merge=true }}
        {{/this.switches.isLinkable}}
      </div>
    {{/ this.switches.hasTestimonialButton }}


  </div>
{{/this.switches.hasTestimonialPlacement}}
 
{
  "switches": {
    "isLinkable": false,
    "hasButton": true,
    "hasTestimonialButton": false,
    "hasDockingPlacement": false,
    "hasTestimonialPlacement": false,
    "hasHeadlineChevron": false,
    "hasIconAsImage": false,
    "hasInternalVideo": false,
    "hasPictureWithSrcset": false,
    "hasPlayButton": false,
    "hasSecondTarget": true,
    "hasTeaserHeadline": true,
    "hasTeaserContentWrapper": false,
    "hasTeaserHeadlineAsLink": false,
    "hasTeaserHeadlineWrapper": false,
    "hasTeaserImage": false,
    "hasTeaserImageLazyLoadingDisabled": false,
    "hasTeaserOverline": false,
    "hasTeaserRichtext": false,
    "hasTeaserText": true,
    "hasTextChevron": false,
    "hasTestimonial": false,
    "linkAsButtonView": true,
    "linkAsButtonView2": true,
    "hasMultipleButtons": false,
    "hasRatingStars": false,
    "hasActor": false,
    "hasTeaserGradient": false
  },
  "viewtypes": {
    "specifier": "teaser--big-headline"
  },
  "content": {
    "targetUrl": "http://tagesschau.de",
    "overline": "Dies ist eine Overline, die im Studio als Subtitle geführt wird",
    "headline": "Bonuspunkten beim Yoga.",
    "headlineTag": "h2",
    "badge": "52%",
    "videoTemplateId": "123",
    "videoType": "video--external"
  },
  "partials": {
    "teaserText": {
      "content": {
        "text": "Yoga macht nicht nur einen schlanken Daumen. Mit der Verwendung einer glutenfreien Yogamatte, fördern sie auch Ihre Darmbakterien!"
      }
    },
    "image": {
      "content": {
        "sourceUrl": "../../images/eine-frau-sitzt-auf-der-fensterbank-und-schaut-auf-ein-tablet.jpg"
      }
    },
    "picture": {
      "content": {
        "sources": [
          {
            "media": "(max-width: 640px)",
            "srcset": "../../images/1x1/barmer-app-yeah.jpg"
          },
          {
            "media": "(min-width: 641px)",
            "srcset": "../../images/16x9/barmer-app-yeah.jpg"
          }
        ],
        "img": {
          "src": "../../images/16x9/barmer-app-yeah.jpg",
          "alt": ""
        }
      }
    },
    "textlink": {},
    "playButton": {
      "viewtypes": {
        "specifier": "btn--play js-modal-trigger"
      }
    },
    "button": {
      "switches": {
        "asLink": true
      },
      "viewtypes": {
        "specifier": "btn--conversion"
      },
      "content": {
        "url": "#",
        "label": "App laden"
      }
    },
    "button2": {
      "switches": {
        "asLink": true,
        "hasIcon": true
      },
      "viewtypes": {
        "specifier": "btn--primary btn--login"
      },
      "content": {
        "url": "#",
        "label": "Meine BARMER"
      },
      "partials": {
        "iconType": "icon--profile"
      }
    }
  }
}

No notes defined.