Barmer Fractal

Crawl 

<div class="m-crawl ">

    <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 class="m-crawl {{viewtypes.specifier}}">

  <div class="crawl__play-pause" aria-hidden="true">
    {{ render '@button--video-control' this.partials.playButton merge=true}}
  </div>

  <div class="crawl__running-area">
    {{render '@list-basic' partials.crawlSlides merge=true }}
    {{render '@list-basic' partials.crawlSlides merge=true }}
  </div>

  <div class="crawl__sr-only sr-only">
    {{render '@list-basic' partials.crawlSlidesForSr merge=true }}
  </div>

</div>
 
{
  "switches": {},
  "viewtypes": {},
  "content": {},
  "partials": {
    "playButton": {
      "switches": {
        "asLink": false,
        "hasIcon": false,
        "isDisabled": false
      },
      "viewtypes": {
        "specifier": "btn--crawl-control js-crawl-control"
      },
      "content": {
        "type": "button",
        "before": "<i class=\"a-icon icon--pause\" aria-hidden=\"true\"></i>",
        "label": "",
        "after": "",
        "url": "",
        "function": "",
        "ariaLabel": "Laufband stoppen",
        "dataAttributes": "data-play-label=\"Laufband starten\" data-pause-label=\"Laufband stoppen\""
      }
    },
    "crawlSlides": {
      "switches": {},
      "viewtypes": {
        "specifier": "crawl__slides"
      },
      "content": {
        "ariaAttrs": "aria-hidden=\"true\""
      },
      "partials": {
        "listitems": [
          {
            "switches": {
              "hasTextContent": true
            },
            "viewtypes": {
              "specifier": "crawl__slide"
            },
            "content": {
              "text": "<span class=\"crawl__item\">1. Gesundheit fördern</span>"
            },
            "partials": {}
          },
          {
            "switches": {
              "hasTextContent": true
            },
            "viewtypes": {
              "specifier": "crawl__slide"
            },
            "content": {
              "text": "<span class=\"crawl__item\">2. Dufte Tasse Tee genießen</span>"
            },
            "partials": {}
          },
          {
            "switches": {
              "hasTextContent": false
            },
            "type": "link",
            "viewtypes": {
              "specifier": "crawl__slide"
            },
            "content": {},
            "partials": {
              "item": {
                "viewtypes": {
                  "specifier": "crawl__item crawl__item--linked"
                },
                "content": {
                  "text": "3. Wort Barmer austesten"
                }
              }
            }
          },
          {
            "switches": {
              "hasTextContent": true
            },
            "viewtypes": {
              "specifier": "crawl__slide"
            },
            "content": {
              "text": "<span class=\"crawl__item\">4. Inklusive z.B. Abkürzungen</span>"
            },
            "partials": {}
          },
          {
            "switches": {
              "hasTextContent": false
            },
            "viewtypes": {
              "specifier": "crawl__slide"
            },
            "type": "link",
            "content": {},
            "partials": {
              "item": {
                "viewtypes": {
                  "specifier": "crawl__item crawl__item--linked"
                },
                "content": {
                  "text": "5. Dampf und Nudeln"
                }
              }
            }
          }
        ]
      }
    },
    "crawlSlidesForSr": {
      "switches": {},
      "viewtypes": {},
      "content": {},
      "partials": {
        "listitems": [
          {
            "switches": {
              "hasTextContent": true
            },
            "viewtypes": {},
            "content": {
              "text": "1. Gesundheit fördern"
            },
            "partials": {}
          },
          {
            "switches": {
              "hasTextContent": true
            },
            "viewtypes": {},
            "content": {
              "text": "2. Dufte Tasse Tee genießen"
            },
            "partials": {}
          },
          {
            "switches": {
              "hasTextContent": false
            },
            "type": "link",
            "viewtypes": {},
            "content": {},
            "partials": {
              "item": {
                "viewtypes": {},
                "content": {
                  "text": "3. Wort Barmer austesten"
                }
              }
            }
          },
          {
            "switches": {
              "hasTextContent": true
            },
            "viewtypes": {},
            "content": {
              "text": "4. Inklusive z.B. Abkürzungen"
            },
            "partials": {}
          },
          {
            "switches": {
              "hasTextContent": false
            },
            "viewtypes": {},
            "type": "link",
            "content": {},
            "partials": {
              "item": {
                "viewtypes": {},
                "content": {
                  "text": "5. Dampf und Nudeln"
                }
              }
            }
          }
        ]
      }
    }
  }
}

No notes defined.