Barmer Fractal

Stage Teaser: With Docking Seals 

<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/8x3/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg">
              <img src="../../images/8x3/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">
                  Stark, wenn Du uns brauchst - Unser Vorsprung für Deine Gesundheit

              </div>
          </div>

          <div class="teaser__button-wrapper">
              <a class="a-btn btn--primary" href="http://heute.de" title="">
                  Mitglied werden
              </a>

          </div>

      </div>

  </div>

  <div class="teaser__docking-placement cs--a">
      <div class="o-teaser-collection teaser-collection--seals js-teaser-targeting-init cs--a" 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.hasTeaserImageLazyLoadingDisabled }}
  {{render '@teaser--stage' this merge=true }}
{{/ this.switches.hasTeaserImageLazyLoadingDisabled }}

{{# this.switches.hasTeaserImageLazyLoadingDisabled }}
  {{render '@teaser--stage-no-lazy' this merge=true }}
{{/ this.switches.hasTeaserImageLazyLoadingDisabled }}
 
{
  "switches": {
    "isLinkable": false,
    "hasButton": true,
    "hasTestimonialButton": false,
    "hasDockingPlacement": true,
    "hasTestimonialPlacement": false,
    "hasHeadlineChevron": false,
    "hasIconAsImage": false,
    "hasTeaserContentWrapper": true,
    "hasTeaserHeadlineWrapper": true,
    "hasTeaserHeadline": true,
    "hasTeaserImage": true,
    "hasTeaserResponsiveImage": true,
    "hasTeaserImageLazyLoadingDisabled": false,
    "hasTeaserRichtext": false,
    "hasTeaserText": false,
    "hasTextChevron": false,
    "hasTestimonialText": false,
    "hasTestimonialSource": false,
    "linkAsButtonView": true
  },
  "viewtypes": {
    "specifier": "teaser--stage cs--bg-image-a",
    "dockingSpecifier": "cs--a"
  },
  "content": {
    "headline": "Stark, wenn Du uns brauchst - Unser Vorsprung für Deine Gesundheit"
  },
  "partials": {
    "button": {
      "switches": {
        "asLink": true
      },
      "viewtypes": {
        "specifier": "btn--primary"
      },
      "content": {
        "label": "Mitglied werden",
        "url": "http://heute.de"
      }
    },
    "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/8x3/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg"
          }
        ],
        "img": {
          "src": "../../images/8x3/blick-auf-die-fensterfront-der-barmer-geschaeftsstelle-in-dresden.jpg",
          "alt": "Dies ist ein alternativ Text"
        }
      }
    },
    "includedItemType": "teaser-collections--seals"
  }
}

No notes defined.