Barmer Fractal

Teaser: Stage With Docking And Textmodule 

<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--primary" href="" title="">
                Klicken Sie auf den Teaser-CTA
            </a>

        </div>

    </div>

</div>

<div class="teaser__docking-placement cs--a">
    <div class="o-textmodule ">
        <h3 class="textmodule__headline textmodule__headline--h1">Headline of Teaser with textmodule as dockingPlacement</h3>
        <div class="a-richtext richtext--intro">

            <p>Baden auf den Malediven, eine Trekkingreise in Laos – all diese fernen Reiseziele werden vorerst wohl für kaum einen Urlauber zu erreichen sein. Dennoch ist es wichtig, sich alle Impfungen zu holen, damit Reisende bei der nächsten großen Reise keine in Form von Krankheiten mit nach Hause bringen.</p>
        </div>

        <div class="a-richtext richtext--article">
            <p>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. Stet clita kasd gubergren. <span lang='en'>This is some <abbr tabindex='0' title='english'>en</abbr> text.</span></p>
        </div>

        <div class="textmodule__cta-row">
            <a class="a-btn btn--conversion" href="http://www.google.de" title="">
                Zum Antragsformular
            </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--a"
  },
  "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": "textmodule",
    "button": {
      "switches": {
        "asLink": true
      },
      "viewtypes": {
        "specifier": "btn--primary"
      },
      "content": {
        "label": "Klicken Sie auf den Teaser-CTA"
      }
    },
    "dockingPlacement": {
      "switches": {
        "hasHeadline": true,
        "hasIntro": true,
        "hasCTA": true
      },
      "content": {
        "headline": "Headline of Teaser with textmodule as dockingPlacement"
      },
      "partials": {
        "detailText": {
          "switches": {
            "hasDefaultText": false,
            "hasWrapper": true
          },
          "content": {
            "text": "<p>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. Stet clita kasd gubergren. <span lang='en'>This is some <abbr tabindex='0' title='english'>en</abbr> text.</span></p>"
          }
        }
      }
    }
  }
}

No notes defined.