Barmer Fractal

Teaser: Stage With Docking And Seal 

<div class="o-teaser teaser--stage cs--bg-image-a">

    <div class="teaser__image">

        <picture class="a-picture ">
            <source media="(max-width: 640px)" srcset="../../images/1x1/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg">
            <source media="(min-width: 641px)" srcset="../../images/36x11/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg">
            <img src="../../images/36x11/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
        </picture>

    </div>

    <div class="teaser__content">

        <div class="teaser__headline-wrapper">
            <div class="teaser__headline">
                Dieser Bühnen-Teaser sollte auch eine Docking-Area haben

            </div>
        </div>

        <div class="teaser__button-wrapper">
            <a class="a-btn btn--conversion" href="" title="">
                Klicken Sie auf den Teaser-CTA
            </a>

        </div>

    </div>

</div>

<div class="teaser__docking-placement cs--b">
    <div class="o-teaser-collection teaser-collection--seals js-teaser-targeting-init" id="seals">

        <h3 class="teaser-collection__headline teaser-collection__headline--h4">Top-Krankenversicherung</h3>

        <div class="teaser-collection__text">
            <p>Du konzentrierst dich auf deine Ausbildung, wir kümmern uns um deine Gesundheit,. Die Barmer wurde als "Top Krankenkasse für junge Leute" (FOCUS MONEY 21/2020) ausgezeichnet. "Sehr gute digitale Leistungen" heißt es in der Auszeichnung - und das stimmt: Wir sind immer für dich da, wenn du uns brauchst.</p>

        </div>

        <div class="teaser-collection__teaser-wrapper">
            <a href="" class="o-teaser teaser--icon-image">

                <div class="teaser__image">

                    <img src="../../images/teaser--siegel-1.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">

                </div>

            </a>

            <div class="o-teaser teaser--icon-image">

                <div class="teaser__image">

                    <img src="../../images/teaser--siegel-2.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">

                </div>

            </div>

            <div class="o-teaser teaser--icon-image">

                <div class="teaser__image">

                    <img src="../../images/teaser--siegel-3.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">

                </div>

            </div>

        </div>

        <div class="teaser-collection__cta-row">
            <a class="a-btn btn--secondary" href="" title="">
                Mehr erfahren
            </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": true,
    "hasTestimonialPlacement": false,
    "hasHeadlineChevron": false,
    "hasIconAsImage": false,
    "hasInternalVideo": false,
    "hasPictureWithSrcset": true,
    "hasPlayButton": false,
    "hasSecondTarget": false,
    "hasTeaserHeadline": true,
    "hasTeaserContentWrapper": true,
    "hasTeaserHeadlineAsLink": false,
    "hasTeaserHeadlineWrapper": true,
    "hasTeaserImage": true,
    "hasTeaserImageLazyLoadingDisabled": false,
    "hasTeaserOverline": false,
    "hasTeaserRichtext": false,
    "hasTeaserText": false,
    "hasTextChevron": false,
    "hasTestimonial": false,
    "linkAsButtonView": true,
    "linkAsButtonView2": false,
    "hasMultipleButtons": false,
    "hasRatingStars": false,
    "hasActor": false,
    "hasTeaserGradient": false,
    "hasTeaserResponsiveImage": true
  },
  "viewtypes": {
    "specifier": "teaser--stage cs--bg-image-a",
    "dockingSpecifier": "cs--b"
  },
  "content": {
    "targetUrl": "http://tagesschau.de",
    "overline": "Dies ist eine Overline, die im Studio als Subtitle geführt wird",
    "headline": "Dieser Bühnen-Teaser sollte auch eine Docking-Area haben",
    "headlineTag": "div",
    "badge": "52%",
    "videoTemplateId": "123",
    "videoType": "video--external"
  },
  "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: 640px)",
            "srcset": "../../images/1x1/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg"
          },
          {
            "media": "(min-width: 641px)",
            "srcset": "../../images/36x11/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg"
          }
        ],
        "img": {
          "src": "../../images/36x11/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg",
          "alt": "Dies ist ein alternativ Text"
        }
      }
    },
    "textlink": {},
    "playButton": {
      "viewtypes": {
        "specifier": "btn--play js-modal-trigger"
      }
    },
    "includedItemType": "teaser-collections--seals",
    "button": {
      "switches": {
        "asLink": true
      },
      "viewtypes": {
        "specifier": "btn--conversion"
      },
      "content": {
        "label": "Klicken Sie auf den Teaser-CTA"
      }
    },
    "dockingPlacement": {
      "switches": {},
      "viewtypes": {
        "specifier": "teaser-collection--seals js-teaser-targeting-init"
      },
      "content": {},
      "partials": {}
    }
  }
}

No notes defined.