<div class="o-teaser-collection teaser-collection--benefits cs--a js-teaser-targeting-init">
<h3 class="teaser-collection__headline teaser-collection__headline--h1">Ihre Vorteile</h3>
<div class="teaser-collection__teaser-wrapper">
<div class="o-teaser teaser--benefits">
<div class="teaser__image">
<i class="a-icon icon--bonus" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<h4 class="teaser__headline">
<a class="teaser__target" href="http://tagesschau.de">
Benefit 1 - Lorem ipsum
</a>
</h4>
<div class="teaser__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="o-teaser teaser--benefits">
<div class="teaser__image">
<i class="a-icon icon--camera" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<h4 class="teaser__headline">
<a class="teaser__target" href="http://tagesschau.de">
Benefit 2 - Lorem ipsum
</a>
</h4>
<div class="teaser__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="o-teaser teaser--benefits">
<div class="teaser__image">
<i class="a-icon icon--chat" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<h4 class="teaser__headline">
<a class="teaser__target" href="http://tagesschau.de">
Benefit 3 - Lorem ipsum
</a>
</h4>
<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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="o-teaser teaser--benefits">
<div class="teaser__image">
<i class="a-icon icon--chat" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<h4 class="teaser__headline">
<a class="teaser__target" href="http://tagesschau.de">
Benefit 4 - Lorem ipsum mit einer längeren Headline.
</a>
</h4>
<div class="teaser__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donaudampfschifffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft
<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="o-teaser teaser--benefits">
<div class="teaser__image">
<i class="a-icon icon--chat" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<h4 class="teaser__headline">
<a class="teaser__target" href="http://tagesschau.de">
Benefit 5 - Lorem ipsum mit langem Wort Donaudampfschifffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft
</a>
</h4>
<div class="teaser__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="o-teaser teaser--benefits">
<div class="teaser__image">
<i class="a-icon icon--chat" aria-hidden="true"></i>
</div>
<div class="teaser__content">
<h4 class="teaser__headline">
<a class="teaser__target" href="http://tagesschau.de">
Benefit 6 - Lorem ipsum
</a>
</h4>
<div class="teaser__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="teaser-collection__cta-row">
<a class="a-btn btn--conversion" href="" title="">
Redaktionelle Grundsätze
</a>
</div>
</div>
<div class="o-teaser-collection {{viewtypes.specifier}}" {{#content.id}}id="{{this}}"{{/content.id}}>
{{# switches.hasHeadline }}
<h3 class="teaser-collection__headline {{viewtypes.headlineSpecifier}}">{{ content.headline }}</h3>
{{/switches.hasHeadline}}
{{# switches.hasDetailText }}
<div class="teaser-collection__text">
{{# switches.isPlaintext }}
{{ content.plaintext }}
{{/ switches.isPlaintext }}
{{^ switches.isPlaintext }}
{{ render '@richtext' partials.richtext merge=true }}
{{/ switches.isPlaintext }}
</div>
{{/switches.hasDetailText}}
<div class="teaser-collection__teaser-wrapper" {{{ content.attributes }}}>
{{# each partials.teaserItems }}
{{#ifcond @index '<' ../switches.teaserItemAmount}}
{{#ifcond switches.isColumnPosition '==' 1}}
{{ render (stringToPartial ../partials.includedItemType) this merge=true }}
{{/ifcond}}
{{/ifcond}}
{{/each}}
</div>
{{# switches.hasTwoColumns }}
<div class="teaser-collection__teaser-wrapper" {{{ content.attributes }}}>
{{# each partials.teaserItems }}
{{#ifcond @index '<' ../switches.teaserItemAmount}}
{{#ifcond switches.isColumnPosition '==' 2}}
{{ render (stringToPartial ../partials.includedItemType) this merge=true }}
{{/ifcond}}
{{/ifcond}}
{{/each}}
</div>
{{/switches.hasTwoColumns}}
{{# switches.hasFooter }}
<div class="teaser-collection__footer">
{{content.footertext}}
</div>
{{/switches.hasFooter}}
{{# switches.hasCTA }}
<div class="teaser-collection__cta-row">
{{ render '@button' this.partials.button merge=true }}
</div>
{{/switches.hasCTA}}
</div>
{
"switches": {
"hasHeadline": true,
"hasDetailText": false,
"hasTwoColumns": false,
"isPlaintext": false,
"teaserItemAmount": 6,
"hasCTA": true,
"hasButton": false,
"hasFooter": false
},
"viewtypes": {
"specifier": "teaser-collection--benefits cs--a js-teaser-targeting-init",
"headlineSpecifier": "teaser-collection__headline--h1"
},
"content": {
"headline": "Ihre Vorteile",
"plaintext": "Dies ist ein bißchen Plaintext",
"badge": "",
"button": "",
"footertext": ""
},
"partials": {
"includedItemType": "teaser",
"teaserItems": [
{
"switches": {
"hasTeaserHeadlineAsLink": true,
"isColumnPosition": 1,
"hasTeaserImage": true,
"hasIconAsImage": true,
"hasTextChevron": true
},
"viewtypes": {
"specifier": "teaser--benefits"
},
"content": {
"headline": "Benefit 1 - Lorem ipsum"
},
"partials": {
"teaserText": {
"content": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
}
},
"iconType": "icon--bonus"
}
},
{
"switches": {
"hasTeaserHeadlineAsLink": true,
"isColumnPosition": 1,
"hasTeaserImage": true,
"hasIconAsImage": true,
"hasTextChevron": true
},
"viewtypes": {
"specifier": "teaser--benefits"
},
"content": {
"headline": "Benefit 2 - Lorem ipsum"
},
"partials": {
"teaserText": {
"content": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
}
},
"iconType": "icon--camera"
}
},
{
"switches": {
"hasTeaserHeadlineAsLink": true,
"isColumnPosition": 1,
"hasTeaserImage": true,
"hasIconAsImage": true,
"hasTextChevron": true
},
"viewtypes": {
"specifier": "teaser--benefits"
},
"content": {
"headline": "Benefit 3 - Lorem ipsum"
},
"partials": {
"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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet."
}
},
"iconType": "icon--chat"
}
},
{
"switches": {
"hasTeaserHeadlineAsLink": true,
"isColumnPosition": 1,
"hasTeaserImage": true,
"hasIconAsImage": true,
"hasTextChevron": true
},
"viewtypes": {
"specifier": "teaser--benefits"
},
"content": {
"headline": "Benefit 4 - Lorem ipsum mit einer längeren Headline."
},
"partials": {
"teaserText": {
"content": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donaudampfschifffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft"
}
},
"iconType": "icon--chat"
}
},
{
"switches": {
"hasTeaserHeadlineAsLink": true,
"isColumnPosition": 1,
"hasTeaserImage": true,
"hasIconAsImage": true,
"hasTextChevron": true
},
"viewtypes": {
"specifier": "teaser--benefits"
},
"content": {
"headline": "Benefit 5 - Lorem ipsum mit langem Wort Donaudampfschifffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft"
},
"partials": {
"teaserText": {
"content": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
}
},
"iconType": "icon--chat"
}
},
{
"switches": {
"hasTeaserHeadlineAsLink": true,
"isColumnPosition": 1,
"hasTeaserImage": true,
"hasIconAsImage": true,
"hasTextChevron": true
},
"viewtypes": {
"specifier": "teaser--benefits"
},
"content": {
"headline": "Benefit 6 - Lorem ipsum"
},
"partials": {
"teaserText": {
"content": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
}
},
"iconType": "icon--chat"
}
},
{
"switches": {
"hasTeaserHeadlineAsLink": true,
"isColumnPosition": 1,
"hasTeaserImage": true,
"hasIconAsImage": true,
"hasTextChevron": true
},
"viewtypes": {
"specifier": "teaser--benefits"
},
"content": {
"headline": "Benefit 3 - Lorem ipsum"
},
"partials": {
"teaserText": {
"content": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
}
},
"iconType": "icon--chat"
}
}
],
"richtext": {
"switches": {
"hasDefaultText": false
},
"content": {
"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>"
}
},
"button": {
"switches": {
"asLink": true
},
"viewtypes": {
"specifier": "btn--conversion"
},
"content": {
"label": "Redaktionelle Grundsätze"
}
}
}
}
Headline Tag is default rendered as a H3, but styling is controlled by headlineSpecifier.