<div class="o-teaser-collection teaser-collection--related-content">
<h3 class="teaser-collection__headline teaser-collection__headline--h3">Entspannung, Abwechslung und Inspiration - mit unseren digitalen Angeboten</h3>
<div class="teaser-collection__teaser-wrapper">
<a href="http://tagesschau.de" class="o-teaser ">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/mann-mit-kind.jpg">
<source media="(min-width: 641px)" srcset="../../images/16x9/mann-mit-kind.jpg">
<img src="../../images/16x9/mann-mit-kind.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="teaser__text">
Karies: Nicht das einzige Problem für Kinderzähne
<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</div>
</a>
<a href="http://tagesschau.de" class="o-teaser ">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/mann-mit-tablet.jpg">
<source media="(min-width: 641px)" srcset="../../images/16x9/mann-mit-tablet.jpg">
<img src="../../images/16x9/mann-mit-tablet.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
</picture>
</div>
<div class="teaser__text">
Mit attraktiven Leistungen bei Krankheit und Pflege rundum abgesichert sein
<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</div>
</a>
<a href="http://tagesschau.de" class="o-teaser ">
<div class="teaser__image">
<picture class="a-picture ">
<source media="(max-width: 640px)" srcset="../../images/1x1/barmer-app-yeah.jpg">
<source media="(min-width: 641px)" srcset="../../images/16x9/barmer-app-yeah.jpg">
<img src="../../images/16x9/barmer-app-yeah.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="teaser__text">
Mit digitalen Services und vielen Extras kostengünstig krankenversichert sein
<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
</div>
</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": true,
"teaserItemAmount": 3,
"hasCTA": false,
"hasButton": false,
"hasFooter": false
},
"viewtypes": {
"specifier": "teaser-collection--related-content",
"headlineSpecifier": "teaser-collection__headline--h3"
},
"content": {
"headline": "Entspannung, Abwechslung und Inspiration - mit unseren digitalen Angeboten",
"plaintext": "Dies ist ein bißchen Plaintext",
"badge": "",
"button": "",
"footertext": ""
},
"partials": {
"includedItemType": "teaser",
"teaserItems": [
{
"switches": {
"isLinkable": true,
"hasTextChevron": true,
"hasTeaserContentWrapper": false,
"hasTeaserHeadline": false,
"isColumnPosition": 1
},
"viewtypes": {
"specifier": ""
},
"content": {
"headline": "Karies: Nicht das einzige Problem für Kinderzähne"
},
"partials": {
"teaserText": {
"content": {
"text": "Karies: Nicht das einzige Problem für Kinderzähne"
}
},
"image": {
"content": {
"sourceUrl": "../../images/1x1/mann-mit-kind.jpg"
}
},
"picture": {
"content": {
"sources": [
{
"media": "(max-width: 640px)",
"srcset": "../../images/1x1/mann-mit-kind.jpg"
},
{
"media": "(min-width: 641px)",
"srcset": "../../images/16x9/mann-mit-kind.jpg"
}
],
"img": {
"src": "../../images/16x9/mann-mit-kind.jpg",
"alt": "Dies ist ein alternativ Text"
}
}
}
}
},
{
"switches": {
"isLinkable": true,
"hasTextChevron": true,
"hasTeaserContentWrapper": false,
"hasTeaserHeadline": false,
"isColumnPosition": 1
},
"viewtypes": {
"specifier": ""
},
"content": {
"headline": "Mit attraktiven Leistungen bei Krankheit und Pflege rundum abgesichert sein"
},
"partials": {
"teaserText": {
"content": {
"text": "Mit attraktiven Leistungen bei Krankheit und Pflege rundum abgesichert sein"
}
},
"image": {
"content": {
"sourceUrl": "../../images/1x1/mann-mit-tablet.jpg"
}
},
"picture": {
"content": {
"sources": [
{
"media": "(max-width: 640px)",
"srcset": "../../images/1x1/mann-mit-tablet.jpg"
},
{
"media": "(min-width: 641px)",
"srcset": "../../images/16x9/mann-mit-tablet.jpg"
}
],
"img": {
"src": "../../images/16x9/mann-mit-tablet.jpg",
"alt": "Dies ist ein alternativ Text"
}
}
}
}
},
{
"switches": {
"isLinkable": true,
"hasTextChevron": true,
"hasTeaserContentWrapper": false,
"hasTeaserHeadline": false,
"isColumnPosition": 1
},
"viewtypes": {
"specifier": ""
},
"content": {
"headline": "Mit digitalen Services und vielen Extras kostengünstig krankenversichert sein"
},
"partials": {
"teaserText": {
"content": {
"text": "Mit digitalen Services und vielen Extras kostengünstig krankenversichert sein"
}
},
"image": {
"content": {
"sourceUrl": "../../images/1x1/barmer-app-yeah.jpg"
},
"picture": {
"content": {
"sources": [
{
"media": "(max-width: 640px)",
"srcset": "../../images/1x1/barmer-app-yeah.jpg"
},
{
"media": "(min-width: 641px)",
"srcset": "../../images/16x9/barmer-app-yeah.jpg"
}
],
"img": {
"src": "../../images/16x9/barmer-app-yeah.jpg",
"alt": "Dies ist ein alternativ Text"
}
}
}
}
}
}
],
"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--primary"
},
"content": {
"label": "Hier zu den Neuigkeiten"
}
}
}
}
Headline Tag is default rendered as a H3, but styling is controlled by headlineSpecifier.