<div class="o-how-to-module js-how-to-module-init ">
<div class="how-to-module__inner">
<h2 class="how-to-module__headline how-to-module__headline--h1">
How-to Module Headline
</h2>
<div class="how-to-module__text">
</div>
<div class="how-to-module__content">
<div class="how-to-module__images">
<picture class="a-picture is-selected">
<source media="(min-width: 0px)" srcset="../../images/5x7/mann-mit-tablet.jpg">
<img src="../../images/5x7/mann-mit-tablet.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<picture class="a-picture " aria-hidden="true">
<source media="(min-width: 0px)" srcset="../../images/5x7/abstimmung-des-verwaltungsrats-714x1000.jpg">
<img src="../../images/5x7/abstimmung-des-verwaltungsrats-714x1000.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
<picture class="a-picture " aria-hidden="true">
<source media="(min-width: 0px)" srcset="../../images/5x7/eltern-baby-tablet-714x1000.jpg">
<img src="../../images/5x7/eltern-baby-tablet-714x1000.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="m-slider-arrows glide__arrows slider-arrows--chevron-pair" data-glide-el="controls">
<button class="slider-arrow glide__arrow slider-arrow--left" data-glide-dir="<"><span class="sr-only">Karusell: Zum vorigen Bild</span><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>
<button class="slider-arrow glide__arrow slider-arrow--right" data-glide-dir=">"><span class="sr-only">Karusell: Zum nächsten Bild</span><i class="a-icon icon--arrow-forward" aria-hidden="true"></i></button>
</div>
<div class="how-to-module__teaser-wrapper">
<div class="how-to-module__track" role="list">
<div class="o-teaser teaser--how-to" role="listitem" aria-selected="true">
<div class="teaser__image">
<i class="a-icon icon--download" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
1. BARMER App herunterladen
</div>
<div class="teaser__text">
Lorem ipsum dolor sit amet, inkl. einer Abkürzung die als ABBR ausgezeichnet und lesbar sein sollte, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<div class="teaser__button-wrapper">
<a class="a-btn btn--primary" href="" title="">
BARMER App inkl. herunterladen
</a>
</div>
</div>
</div>
<div class="o-teaser teaser--how-to" role="listitem">
<div class="teaser__image">
<i class="a-icon icon--message" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
2. Mit Briefdaten in der App anmelden
</div>
<div class="teaser__text">
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.
</div>
</div>
</div>
<div class="o-teaser teaser--how-to" role="listitem">
<div class="teaser__image">
<i class="a-icon icon--favorite" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<div class="teaser__headline">
3. Punkte sammeln
</div>
<div class="teaser__text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="o-how-to-module js-how-to-module-init {{content.colorScheme}} {{viewtypes.specifier}}">
<div class="how-to-module__inner">
{{# switches.hasHeadline}}
<h2 class="how-to-module__headline {{{viewtypes.headlineSpecifier}}}">
{{content.headline}}
</h2>
{{/ switches.hasHeadline}}
{{# content.text}}
<div class="how-to-module__text">
{{{this}}}
</div>
{{/ content.text}}
<div class="how-to-module__content">
<div class="how-to-module__images">
{{# each partials.pictures as |picture| }}
{{#ifcond @index '<' ../switches.itemCount}}
{{ render '@picture' picture merge=true}}
{{/ifcond }}
{{/each}}
</div>
{{render '@slider-arrows--chevron-pair' partials.arrows merge=true }}
<div class="how-to-module__teaser-wrapper">
<div class="how-to-module__track" role="list">
{{# each partials.teasers as |teaser| }}
{{#ifcond @index '<' ../switches.itemCount}}
{{ render '@teaser--how-to' teaser merge=true}}
{{/ifcond }}
{{/each}}
</div>
</div>
</div>
</div>
</div>
{
"switches": {
"itemCount": 3,
"hasHeadline": true
},
"viewtypes": {
"specifier": "",
"headlineSpecifier": "how-to-module__headline--h1"
},
"content": {
"headline": "How-to Module Headline",
"text": "",
"colorScheme": ""
},
"partials": {
"pictures": [
{
"switches": {},
"viewtypes": {
"specifier": "is-selected"
},
"content": {
"sources": [
{
"media": "(min-width: 0px)",
"srcset": "../../images/5x7/mann-mit-tablet.jpg"
}
],
"img": {
"src": "../../images/5x7/mann-mit-tablet.jpg",
"alt": "Dies ist ein alternativ Text"
}
}
},
{
"switches": {},
"content": {
"attributes": "aria-hidden=\"true\"",
"sources": [
{
"media": "(min-width: 0px)",
"srcset": "../../images/5x7/abstimmung-des-verwaltungsrats-714x1000.jpg"
}
],
"img": {
"src": "../../images/5x7/abstimmung-des-verwaltungsrats-714x1000.jpg",
"alt": "Dies ist ein alternativ Text"
}
}
},
{
"switches": {},
"content": {
"attributes": "aria-hidden=\"true\"",
"sources": [
{
"media": "(min-width: 0px)",
"srcset": "../../images/5x7/eltern-baby-tablet-714x1000.jpg"
}
],
"img": {
"src": "../../images/5x7/eltern-baby-tablet-714x1000.jpg",
"alt": "Dies ist ein alternativ Text"
}
}
},
{
"switches": {},
"content": {
"attributes": "aria-hidden=\"true\"",
"sources": [
{
"media": "(min-width: 0px)",
"srcset": "../../images/5x7/tippen-auf-tastatur-714x1000.jpg"
}
],
"img": {
"src": "../../images/5x7/tippen-auf-tastatur-714x1000.jpg",
"alt": "Dies ist ein alternativ Text"
}
}
}
],
"teasers": [
{
"switches": {
"hasTeaserImage": true,
"hasIconAsImage": true,
"hasTeaserHeadline": true,
"hasHeadlineChevron": false,
"hasTeaserText": true,
"hasTeaserHeadlineAsLink": false,
"hasButton": true,
"linkAsButtonView": true
},
"viewtypes": {
"specifier": "teaser--how-to"
},
"content": {
"headline": "1. BARMER App herunterladen",
"headlineTag": "div",
"ariaAttrs": "role=\"listitem\" aria-selected=\"true\""
},
"partials": {
"iconType": "icon--download",
"teaserText": {
"content": {
"text": "Lorem ipsum dolor sit amet, inkl. einer Abkürzung die als ABBR ausgezeichnet und lesbar sein sollte, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
}
},
"button": {
"switches": {
"asLink": true
},
"viewtypes": {
"specifier": "btn--primary"
},
"content": {
"label": "BARMER App inkl. herunterladen"
}
}
}
},
{
"switches": {
"hasTeaserImage": true,
"hasIconAsImage": true,
"hasTeaserHeadline": true,
"hasHeadlineChevron": false,
"hasTeaserText": true,
"hasTeaserHeadlineAsLink": false,
"hasButton": false,
"linkAsButtonView": true
},
"viewtypes": {
"specifier": "teaser--how-to"
},
"content": {
"headline": "2. Mit Briefdaten in der App anmelden",
"headlineTag": "div"
},
"partials": {
"iconType": "icon--message",
"teaserText": {
"content": {
"text": "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. "
}
}
}
},
{
"switches": {
"hasTeaserImage": true,
"hasIconAsImage": true,
"hasTeaserHeadline": true,
"hasHeadlineChevron": false,
"hasTeaserText": true,
"hasTeaserHeadlineAsLink": false,
"hasButton": false,
"linkAsButtonView": true
},
"viewtypes": {
"specifier": "teaser--how-to"
},
"content": {
"headline": "3. Punkte sammeln",
"headlineTag": "div"
},
"partials": {
"iconType": "icon--favorite",
"teaserText": {
"content": {
"text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore."
}
}
}
},
{
"switches": {
"hasTeaserImage": true,
"hasIconAsImage": true,
"hasTeaserHeadline": true,
"hasHeadlineChevron": false,
"hasTeaserText": true,
"hasTeaserHeadlineAsLink": false,
"hasButton": false,
"linkAsButtonView": true
},
"viewtypes": {
"specifier": "teaser--how-to"
},
"content": {
"headline": "4. Punkte einlösen",
"headlineTag": "div"
},
"partials": {
"iconType": "icon--favorite",
"teaserText": {
"content": {
"text": "Lorem ipsum dolor sit amet."
}
}
}
}
]
}
}
No notes defined.