Barmer Fractal

Teaser: Notification Warning 

<div class="o-teaser teaser--notification is-warning">

    <div class="teaser__content">

        <div class="teaser__text">
            <p><strong>Lange Beschreibung:</strong> Dr. Med. Musterfrau sagt, mit flexibler Vorsorge und Therapie leistungsstark aufgehoben sein Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.</p>

        </div>

        <div class="teaser__button-wrapper">
            <a href="http://zdf.de" class="a-link ">
                Dies ist ein Linktext
            </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": false,
    "hasInternalVideo": false,
    "hasPictureWithSrcset": true,
    "hasPlayButton": false,
    "hasSecondTarget": false,
    "hasTeaserHeadline": false,
    "hasTeaserContentWrapper": true,
    "hasTeaserHeadlineAsLink": false,
    "hasTeaserHeadlineWrapper": false,
    "hasTeaserImage": false,
    "hasTeaserImageLazyLoadingDisabled": false,
    "hasTeaserOverline": false,
    "hasTeaserRichtext": false,
    "hasTeaserText": true,
    "hasTextChevron": false,
    "hasTestimonial": false,
    "linkAsButtonView": false,
    "linkAsButtonView2": false,
    "hasMultipleButtons": false,
    "hasRatingStars": false,
    "hasActor": false,
    "hasTeaserGradient": false
  },
  "viewtypes": {
    "specifier": "teaser--notification is-warning"
  },
  "content": {
    "targetUrl": "http://tagesschau.de",
    "overline": "Dies ist eine Overline, die im Studio als Subtitle geführt wird",
    "headline": "Teaser-Headline",
    "headlineTag": "h4",
    "badge": "52%",
    "videoTemplateId": "123",
    "videoType": "video--external"
  },
  "partials": {
    "teaserText": {
      "content": {
        "text": "<p><strong>Lange Beschreibung:</strong> Dr. Med. Musterfrau sagt, mit flexibler Vorsorge und Therapie leistungsstark aufgehoben sein Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.</p>"
      }
    },
    "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"
      }
    }
  }
}

No notes defined.