<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--h2">
How-to Module Headline
</h2>
<div class="how-to-module__text">
<p>Hier steht dann eine kurzer Richtext, der nicht soviele Styling-Optionen hat. Im Studio lässt sich dort wohl nur strong, kursiv und noch irgendetwas auszeichnen.</p>
</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>
</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>
</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": 2,
"hasHeadline": true
},
"viewtypes": {
"specifier": "",
"headlineSpecifier": "how-to-module__headline--h2"
},
"content": {
"headline": "How-to Module Headline",
"text": "<p>Hier steht dann eine kurzer Richtext, der nicht soviele Styling-Optionen hat. Im Studio lässt sich dort wohl nur strong, kursiv und noch irgendetwas auszeichnen.</p>",
"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.