Barmer Fractal

Stage Media Container: Pills Light 

<div class="o-teaser teaser--media-container teaser--media-container-pills cs--light">

    <div class="teaser__image">

        <picture class="a-picture ">
            <source media="(max-width: 800px)" srcset="../../images/5x7/mann-mit-tablet.jpg">
            <source media="(min-width: 801px)" srcset="../../images/16x9/mann-mit-tablet.jpg">
            <img src="../../images/16x9/mann-mit-tablet.jpg" alt="">
        </picture>

    </div>

    <div class="teaser__content">

        <div class="teaser__overline">In jeder Lebensphase</div>

        <div class="teaser__headline-wrapper">
            <h2 class="teaser__headline">
                Beste Pillen für Ihre Gesundheit

            </h2>
        </div>

        <div class="teaser__button-wrapper">
            <a class="a-btn btn--conversion" href="" title="">
                Mitglied werden
            </a>

        </div>

    </div>

    <div class="teaser__gradient"></div>

    <div class="teaser__pills">
        <div class="m-crawl js-crawl-init">

            <div class="crawl__play-pause" aria-hidden="true">
                <button class="a-btn btn--crawl-control js-crawl-control" type="button" data-play-label="Laufband starten" data-pause-label="Laufband stoppen" aria-label="Laufband stoppen"><i class="a-icon icon--pause" aria-hidden="true"></i></button>

            </div>

            <div class="crawl__running-area">
                <ul class="a-list-basic crawl__slides" aria-hidden="true">
                    <li class="list__item crawl__slide">
                        <span class="crawl__item">1. Gesundheit fördern</span>
                    </li>
                    <li class="list__item crawl__slide">
                        <span class="crawl__item">2. Dufte Tasse Tee genießen</span>
                    </li>
                    <li class="list__item crawl__slide">
                        <a href="http://zdf.de" class="a-link crawl__item crawl__item--linked">
                            3. Wort Barmer austesten
                        </a>

                    </li>
                    <li class="list__item crawl__slide">
                        <span class="crawl__item">4. Inklusive z.B. Abkürzungen</span>
                    </li>
                    <li class="list__item crawl__slide">
                        <a href="http://zdf.de" class="a-link crawl__item crawl__item--linked">
                            5. Dampf und Nudeln
                        </a>

                    </li>
                </ul>

                <ul class="a-list-basic crawl__slides" aria-hidden="true">
                    <li class="list__item crawl__slide">
                        <span class="crawl__item">1. Gesundheit fördern</span>
                    </li>
                    <li class="list__item crawl__slide">
                        <span class="crawl__item">2. Dufte Tasse Tee genießen</span>
                    </li>
                    <li class="list__item crawl__slide">
                        <a href="http://zdf.de" class="a-link crawl__item crawl__item--linked">
                            3. Wort Barmer austesten
                        </a>

                    </li>
                    <li class="list__item crawl__slide">
                        <span class="crawl__item">4. Inklusive z.B. Abkürzungen</span>
                    </li>
                    <li class="list__item crawl__slide">
                        <a href="http://zdf.de" class="a-link crawl__item crawl__item--linked">
                            5. Dampf und Nudeln
                        </a>

                    </li>
                </ul>

            </div>

            <div class="crawl__sr-only sr-only">
                <ul class="a-list-basic ">
                    <li class="list__item ">
                        1. Gesundheit fördern
                    </li>
                    <li class="list__item ">
                        2. Dufte Tasse Tee genießen
                    </li>
                    <li class="list__item ">
                        <a href="http://zdf.de" class="a-link ">
                            3. Wort Barmer austesten
                        </a>

                    </li>
                    <li class="list__item ">
                        4. Inklusive z.B. Abkürzungen
                    </li>
                    <li class="list__item ">
                        <a href="http://zdf.de" class="a-link ">
                            5. Dampf und Nudeln
                        </a>

                    </li>
                </ul>

            </div>

        </div>

    </div>

</div>
 
{{render '@teaser--stage' this merge=true }}
 
{
  "switches": {
    "hasInternalVideo": false,
    "hasTeaserOverline": true,
    "hasTeaserGradient": true,
    "hasPills": true
  },
  "viewtypes": {
    "specifier": "teaser--media-container teaser--media-container-pills cs--light"
  },
  "content": {
    "overline": "In jeder Lebensphase",
    "headline": "Beste Pillen für Ihre Gesundheit",
    "headlineTag": "h2"
  },
  "partials": {
    "picture": {
      "content": {
        "sources": [
          {
            "media": "(max-width: 800px)",
            "srcset": "../../images/5x7/mann-mit-tablet.jpg"
          },
          {
            "media": "(min-width: 801px)",
            "srcset": "../../images/16x9/mann-mit-tablet.jpg"
          }
        ],
        "img": {
          "src": "../../images/16x9/mann-mit-tablet.jpg",
          "alt": ""
        }
      }
    },
    "video": {
      "switches": {
        "muted": true,
        "loop": true,
        "autoplay": true,
        "controls": false,
        "playsinline": true
      },
      "content": {
        "sources": [
          {
            "type": "video/mp4",
            "dataAttributes": "data-src-mobile=\"../../videos/mc-dark-5x7.mp4\" data-src-desktop=\"../../videos/mc-dark-16x9.mp4\""
          }
        ]
      }
    },
    "crawl": {
      "viewtypes": {
        "specifier": "js-crawl-init"
      }
    }
  }
}

No notes defined.