Barmer Fractal

Teaser: How To 

<div class="o-teaser teaser--how-to" role="listitem">

    <div class="teaser__image">

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

    </div>

    <div class="teaser__content">

        <div class="teaser__headline">
            1. BARMER App herunterladen

        </div>

        <div class="teaser__text">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

        </div>

        <div class="teaser__button-wrapper">
            <a class="a-btn btn--primary" href="" title="">
                BARMER App herunterladen
            </a>

        </div>

    </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": true,
    "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": true,
    "linkAsButtonView2": false,
    "hasMultipleButtons": false,
    "hasRatingStars": false,
    "hasActor": false,
    "hasTeaserGradient": false
  },
  "viewtypes": {
    "specifier": "teaser--how-to"
  },
  "content": {
    "targetUrl": "http://tagesschau.de",
    "overline": "Dies ist eine Overline, die im Studio als Subtitle geführt wird",
    "headline": "1. BARMER App herunterladen",
    "headlineTag": "div",
    "badge": "52%",
    "videoTemplateId": "123",
    "videoType": "video--external",
    "ariaAttrs": "role=\"listitem\""
  },
  "partials": {
    "teaserText": {
      "content": {
        "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. "
      }
    },
    "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"
      }
    },
    "iconType": "icon--download",
    "button": {
      "switches": {
        "asLink": true
      },
      "viewtypes": {
        "specifier": "btn--primary"
      },
      "content": {
        "label": "BARMER App herunterladen"
      }
    }
  }
}

No notes defined.