No notes defined.
<!-- Default -->
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
<!-- Legacy Kicker -->
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<strong class="teaserInset-kicker">Thema</strong><span class="is-visually-hidden">:</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
<!-- Multiple Terms -->
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
<!-- Document -->
<div class="teaserInset is-clickable" data-type="document">
<div class="teaserInset-image">
<a href="#" title="Download Datei (PDF)">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-document.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Download Datei (PDF)">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-description">
Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.
</div>
<div class="teaserInset-cta">
<a href="#" class="button"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei (PDF)</span></a>
</div>
</div>
</div>
<!-- Logo -->
<div class="teaserInset is-clickable" data-type="logo">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/logo-001.png" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
<!-- Analyst Rating -->
<div class="teaserInset is-clickable" data-type="rating">
<div class="teaserInset-image">
<a href="#" title="Herunterladen">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/logo-001.png" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
<span class="kicker-item">Datum</span>
<span class="kicker-item">Kaufen</span>
</span>
<span class="teaserInset-title">
<a href="#" title="Herunterladen">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="teaserInset-cta">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons.svg#icon--download-simple" xlink:href="../../icons/icons.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Herunterladen</span></a>
</div>
</div>
</div>
<!-- With Linklist -->
<div class="teaserInset is-clickable has-linklist">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
<div class="teaserInset-linklist">
<div class="linkList">
<div class="linkList-title"><strong>Ich bin der Titel</strong></div>
<ul class="linkList-list">
<li class="linkList-item">
<a href="#" class="link"><span class="link-label">Ich bin ein Link</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</li>
<li class="linkList-item">
<a href="#" class="link"><span class="link-label">Noch ein zweiter Link</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</li>
<li class="linkList-item">
<a href="#" class="link"><span class="link-label">Ein Weiterer</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Doc Only -->
<section class="doc-section doc-narrow-content">
<h2 class="doc-title">Teaser Insets mit beschränkter Breite</h2>
<div class="doc-variant">
<header class="doc-variant-header" style="margin-bottom: calc(var(--sp-large) - var(--sp-section))">
<h3 class="doc-variant-title">Default</h3>
<div class="doc-variant-configuration">
</div>
</header>
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header" style="margin-bottom: calc(var(--sp-large) - var(--sp-section))">
<h3 class="doc-variant-title">Multiple Terms</h3>
<div class="doc-variant-configuration">
</div>
</header>
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header" style="margin-bottom: calc(var(--sp-large) - var(--sp-section))">
<h3 class="doc-variant-title">Document</h3>
<div class="doc-variant-configuration">
</div>
</header>
<div class="teaserInset is-clickable" data-type="document">
<div class="teaserInset-image">
<a href="#" title="Download Datei (PDF)">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-document.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Download Datei (PDF)">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-description">
Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.
</div>
<div class="teaserInset-cta">
<a href="#" class="button"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei (PDF)</span></a>
</div>
</div>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header" style="margin-bottom: calc(var(--sp-large) - var(--sp-section))">
<h3 class="doc-variant-title">Logo</h3>
<div class="doc-variant-configuration">
</div>
</header>
<div class="teaserInset is-clickable" data-type="logo">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/logo-001.png" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header" style="margin-bottom: calc(var(--sp-large) - var(--sp-section))">
<h3 class="doc-variant-title">Analyst Rating</h3>
<div class="doc-variant-configuration">
</div>
</header>
<div class="teaserInset is-clickable" data-type="rating">
<div class="teaserInset-image">
<a href="#" title="Herunterladen">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/logo-001.png" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
<span class="kicker-item">Datum</span>
<span class="kicker-item">Kaufen</span>
</span>
<span class="teaserInset-title">
<a href="#" title="Herunterladen">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="teaserInset-cta">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons.svg#icon--download-simple" xlink:href="../../icons/icons.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Herunterladen</span></a>
</div>
</div>
</div>
</div>
</section>
<section class="doc-section">
<h2 class="doc-title">Teaser Inset mit voller Breite</h2>
<div class="doc-variant">
<header class="doc-variant-header" style="margin-bottom: calc(var(--sp-large) - var(--sp-section))">
<div class="doc-variant-configuration">
</div>
</header>
<div class="teaserInset is-clickable has-linklist">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
<div class="teaserInset-linklist">
<div class="linkList">
<div class="linkList-title"><strong>Ich bin der Titel</strong></div>
<ul class="linkList-list">
<li class="linkList-item">
<a href="#" class="link"><span class="link-label">Ich bin ein Link</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</li>
<li class="linkList-item">
<a href="#" class="link"><span class="link-label">Noch ein zweiter Link</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</li>
<li class="linkList-item">
<a href="#" class="link"><span class="link-label">Ein Weiterer</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Default -->
<div class="teaserInset{{#if cta}} is-clickable{{/if}}{{#if linklist}} has-linklist{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
{{#if image}}
<div class="teaserInset-image">
{{#cta}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/cta}}
{{#image}}
{{render '@figure' (contextData '@teaserinset' this) merge=false}}
{{/image}}
{{#cta}}</a>{{/cta}}
</div>
{{/if}}
<div class="teaserInset-content">
{{#if title}}
<h3 class="teaserInset-heading">
{{#if kicker}}
{{#unless kicker.content}}{{#unless kicker.items}}{{!-- Legacy --}}<strong class="teaserInset-kicker">{{{kicker}}}</strong><span class="is-visually-hidden">:</span>{{/unless}}{{/unless}}
{{#if kicker.content}}{{#kicker}}{{render '@kicker' (contextData '@teasercard' this) merge=true}}{{/kicker}}{{/if}}
{{#if kicker.items}}{{#kicker}}{{render '@kicker' (contextData '@teasercard' this) merge=true}}{{/kicker}}{{/if}}
{{/if}}
<span class="teaserInset-title">
{{#cta}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/cta}}{{{title}}}{{#cta}}</a>{{/cta}}
</span>
</h3>
{{/if}}
{{#description}}
<div class="teaserInset-description">
{{{.}}}
</div>
{{/description}}
{{#link}}
<div class="teaserInset-cta">
{{render '@link' (contextData '@teaserinset' this) merge=true}}
</div>
{{/link}}
{{#cta}}
<div class="teaserInset-cta">
{{render '@button--link' (contextData '@teaserinset' this) merge=true}}
</div>
{{/cta}}
</div>
{{#if linklist}}
<div class="teaserInset-linklist">
{{#linklist}}
{{render '@linklist' (contextData '@teaserinset' this) merge=true}}
{{/linklist}}
</div>
{{/if}}
</div>
<!-- Legacy Kicker -->
<div class="teaserInset{{#if cta}} is-clickable{{/if}}{{#if linklist}} has-linklist{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
{{#if image}}
<div class="teaserInset-image">
{{#cta}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/cta}}
{{#image}}
{{render '@figure' (contextData '@teaserinset' this) merge=false}}
{{/image}}
{{#cta}}</a>{{/cta}}
</div>
{{/if}}
<div class="teaserInset-content">
{{#if title}}
<h3 class="teaserInset-heading">
{{#if kicker}}
{{#unless kicker.content}}{{#unless kicker.items}}{{!-- Legacy --}}<strong class="teaserInset-kicker">{{{kicker}}}</strong><span class="is-visually-hidden">:</span>{{/unless}}{{/unless}}
{{#if kicker.content}}{{#kicker}}{{render '@kicker' (contextData '@teasercard' this) merge=true}}{{/kicker}}{{/if}}
{{#if kicker.items}}{{#kicker}}{{render '@kicker' (contextData '@teasercard' this) merge=true}}{{/kicker}}{{/if}}
{{/if}}
<span class="teaserInset-title">
{{#cta}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/cta}}{{{title}}}{{#cta}}</a>{{/cta}}
</span>
</h3>
{{/if}}
{{#description}}
<div class="teaserInset-description">
{{{.}}}
</div>
{{/description}}
{{#link}}
<div class="teaserInset-cta">
{{render '@link' (contextData '@teaserinset' this) merge=true}}
</div>
{{/link}}
{{#cta}}
<div class="teaserInset-cta">
{{render '@button--link' (contextData '@teaserinset' this) merge=true}}
</div>
{{/cta}}
</div>
{{#if linklist}}
<div class="teaserInset-linklist">
{{#linklist}}
{{render '@linklist' (contextData '@teaserinset' this) merge=true}}
{{/linklist}}
</div>
{{/if}}
</div>
<!-- Multiple Terms -->
<div class="teaserInset{{#if cta}} is-clickable{{/if}}{{#if linklist}} has-linklist{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
{{#if image}}
<div class="teaserInset-image">
{{#cta}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/cta}}
{{#image}}
{{render '@figure' (contextData '@teaserinset' this) merge=false}}
{{/image}}
{{#cta}}</a>{{/cta}}
</div>
{{/if}}
<div class="teaserInset-content">
{{#if title}}
<h3 class="teaserInset-heading">
{{#if kicker}}
{{#unless kicker.content}}{{#unless kicker.items}}{{!-- Legacy --}}<strong class="teaserInset-kicker">{{{kicker}}}</strong><span class="is-visually-hidden">:</span>{{/unless}}{{/unless}}
{{#if kicker.content}}{{#kicker}}{{render '@kicker' (contextData '@teasercard' this) merge=true}}{{/kicker}}{{/if}}
{{#if kicker.items}}{{#kicker}}{{render '@kicker' (contextData '@teasercard' this) merge=true}}{{/kicker}}{{/if}}
{{/if}}
<span class="teaserInset-title">
{{#cta}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/cta}}{{{title}}}{{#cta}}</a>{{/cta}}
</span>
</h3>
{{/if}}
{{#description}}
<div class="teaserInset-description">
{{{.}}}
</div>
{{/description}}
{{#link}}
<div class="teaserInset-cta">
{{render '@link' (contextData '@teaserinset' this) merge=true}}
</div>
{{/link}}
{{#cta}}
<div class="teaserInset-cta">
{{render '@button--link' (contextData '@teaserinset' this) merge=true}}
</div>
{{/cta}}
</div>
{{#if linklist}}
<div class="teaserInset-linklist">
{{#linklist}}
{{render '@linklist' (contextData '@teaserinset' this) merge=true}}
{{/linklist}}
</div>
{{/if}}
</div>
<!-- Document -->
<div class="teaserInset{{#if cta}} is-clickable{{/if}}{{#if linklist}} has-linklist{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
{{#if image}}
<div class="teaserInset-image">
{{#cta}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/cta}}
{{#image}}
{{render '@figure' (contextData '@teaserinset' this) merge=false}}
{{/image}}
{{#cta}}</a>{{/cta}}
</div>
{{/if}}
<div class="teaserInset-content">
{{#if title}}
<h3 class="teaserInset-heading">
{{#if kicker}}
{{#unless kicker.content}}{{#unless kicker.items}}{{!-- Legacy --}}<strong class="teaserInset-kicker">{{{kicker}}}</strong><span class="is-visually-hidden">:</span>{{/unless}}{{/unless}}
{{#if kicker.content}}{{#kicker}}{{render '@kicker' (contextData '@teasercard' this) merge=true}}{{/kicker}}{{/if}}
{{#if kicker.items}}{{#kicker}}{{render '@kicker' (contextData '@teasercard' this) merge=true}}{{/kicker}}{{/if}}
{{/if}}
<span class="teaserInset-title">
{{#cta}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/cta}}{{{title}}}{{#cta}}</a>{{/cta}}
</span>
</h3>
{{/if}}
{{#description}}
<div class="teaserInset-description">
{{{.}}}
</div>
{{/description}}
{{#link}}
<div class="teaserInset-cta">
{{render '@link' (contextData '@teaserinset' this) merge=true}}
</div>
{{/link}}
{{#cta}}
<div class="teaserInset-cta">
{{render '@button--link' (contextData '@teaserinset' this) merge=true}}
</div>
{{/cta}}
</div>
{{#if linklist}}
<div class="teaserInset-linklist">
{{#linklist}}
{{render '@linklist' (contextData '@teaserinset' this) merge=true}}
{{/linklist}}
</div>
{{/if}}
</div>
<!-- Logo -->
<div class="teaserInset{{#if cta}} is-clickable{{/if}}{{#if linklist}} has-linklist{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
{{#if image}}
<div class="teaserInset-image">
{{#cta}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/cta}}
{{#image}}
{{render '@figure' (contextData '@teaserinset' this) merge=false}}
{{/image}}
{{#cta}}</a>{{/cta}}
</div>
{{/if}}
<div class="teaserInset-content">
{{#if title}}
<h3 class="teaserInset-heading">
{{#if kicker}}
{{#unless kicker.content}}{{#unless kicker.items}}{{!-- Legacy --}}<strong class="teaserInset-kicker">{{{kicker}}}</strong><span class="is-visually-hidden">:</span>{{/unless}}{{/unless}}
{{#if kicker.content}}{{#kicker}}{{render '@kicker' (contextData '@teasercard' this) merge=true}}{{/kicker}}{{/if}}
{{#if kicker.items}}{{#kicker}}{{render '@kicker' (contextData '@teasercard' this) merge=true}}{{/kicker}}{{/if}}
{{/if}}
<span class="teaserInset-title">
{{#cta}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/cta}}{{{title}}}{{#cta}}</a>{{/cta}}
</span>
</h3>
{{/if}}
{{#description}}
<div class="teaserInset-description">
{{{.}}}
</div>
{{/description}}
{{#link}}
<div class="teaserInset-cta">
{{render '@link' (contextData '@teaserinset' this) merge=true}}
</div>
{{/link}}
{{#cta}}
<div class="teaserInset-cta">
{{render '@button--link' (contextData '@teaserinset' this) merge=true}}
</div>
{{/cta}}
</div>
{{#if linklist}}
<div class="teaserInset-linklist">
{{#linklist}}
{{render '@linklist' (contextData '@teaserinset' this) merge=true}}
{{/linklist}}
</div>
{{/if}}
</div>
<!-- Analyst Rating -->
<div class="teaserInset{{#if cta}} is-clickable{{/if}}{{#if linklist}} has-linklist{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
{{#if image}}
<div class="teaserInset-image">
{{#cta}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/cta}}
{{#image}}
{{render '@figure' (contextData '@teaserinset' this) merge=false}}
{{/image}}
{{#cta}}</a>{{/cta}}
</div>
{{/if}}
<div class="teaserInset-content">
{{#if title}}
<h3 class="teaserInset-heading">
{{#if kicker}}
{{#unless kicker.content}}{{#unless kicker.items}}{{!-- Legacy --}}<strong class="teaserInset-kicker">{{{kicker}}}</strong><span class="is-visually-hidden">:</span>{{/unless}}{{/unless}}
{{#if kicker.content}}{{#kicker}}{{render '@kicker' (contextData '@teasercard' this) merge=true}}{{/kicker}}{{/if}}
{{#if kicker.items}}{{#kicker}}{{render '@kicker' (contextData '@teasercard' this) merge=true}}{{/kicker}}{{/if}}
{{/if}}
<span class="teaserInset-title">
{{#cta}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/cta}}{{{title}}}{{#cta}}</a>{{/cta}}
</span>
</h3>
{{/if}}
{{#description}}
<div class="teaserInset-description">
{{{.}}}
</div>
{{/description}}
{{#link}}
<div class="teaserInset-cta">
{{render '@link' (contextData '@teaserinset' this) merge=true}}
</div>
{{/link}}
{{#cta}}
<div class="teaserInset-cta">
{{render '@button--link' (contextData '@teaserinset' this) merge=true}}
</div>
{{/cta}}
</div>
{{#if linklist}}
<div class="teaserInset-linklist">
{{#linklist}}
{{render '@linklist' (contextData '@teaserinset' this) merge=true}}
{{/linklist}}
</div>
{{/if}}
</div>
<!-- With Linklist -->
<div class="teaserInset{{#if cta}} is-clickable{{/if}}{{#if linklist}} has-linklist{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
{{#if image}}
<div class="teaserInset-image">
{{#cta}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/cta}}
{{#image}}
{{render '@figure' (contextData '@teaserinset' this) merge=false}}
{{/image}}
{{#cta}}</a>{{/cta}}
</div>
{{/if}}
<div class="teaserInset-content">
{{#if title}}
<h3 class="teaserInset-heading">
{{#if kicker}}
{{#unless kicker.content}}{{#unless kicker.items}}{{!-- Legacy --}}<strong class="teaserInset-kicker">{{{kicker}}}</strong><span class="is-visually-hidden">:</span>{{/unless}}{{/unless}}
{{#if kicker.content}}{{#kicker}}{{render '@kicker' (contextData '@teasercard' this) merge=true}}{{/kicker}}{{/if}}
{{#if kicker.items}}{{#kicker}}{{render '@kicker' (contextData '@teasercard' this) merge=true}}{{/kicker}}{{/if}}
{{/if}}
<span class="teaserInset-title">
{{#cta}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/cta}}{{{title}}}{{#cta}}</a>{{/cta}}
</span>
</h3>
{{/if}}
{{#description}}
<div class="teaserInset-description">
{{{.}}}
</div>
{{/description}}
{{#link}}
<div class="teaserInset-cta">
{{render '@link' (contextData '@teaserinset' this) merge=true}}
</div>
{{/link}}
{{#cta}}
<div class="teaserInset-cta">
{{render '@button--link' (contextData '@teaserinset' this) merge=true}}
</div>
{{/cta}}
</div>
{{#if linklist}}
<div class="teaserInset-linklist">
{{#linklist}}
{{render '@linklist' (contextData '@teaserinset' this) merge=true}}
{{/linklist}}
</div>
{{/if}}
</div>
<!-- Doc Only -->
{{#sections}}
<section class="doc-section{{#if narrow-preview}} doc-narrow-content{{/if}}">
{{#title}}
<h2 class="doc-title">{{{.}}}</h2>
{{/title}}
{{#variants}}
<div class="doc-variant">
<header class="doc-variant-header" style="margin-bottom: calc(var(--sp-large) - var(--sp-section))">
{{#title}}
<h3 class="doc-variant-title">{{{.}}}</h3>
{{/title}}
<div class="doc-variant-configuration">
{{#if modifiers}}
<ul data-label="Modifier">
{{#modifiers}}
<li>{{{.}}}</li>
{{/modifiers}}
</ul>
{{/if}}
</div>
</header>
{{#samples}}
{{render '@teaserinset' (contextData '@teaserinset' this) merge=true}}
{{/samples}}
</div>
{{/variants}}
</section>
{{/sections}}
/* Default */
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"cta": {
"url": "#",
"label": "Weiter zum Artikel"
}
}
/* Legacy Kicker */
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": "Thema",
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"cta": {
"url": "#",
"label": "Weiter zum Artikel"
}
}
/* Multiple Terms */
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"cta": {
"url": "#",
"label": "Weiter zum Artikel"
}
}
/* Document */
{
"image": {
"src": "/images/placeholder/dummy-document.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.",
"cta": {
"url": "#",
"label": "Download Datei (PDF)",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
"type": "document"
}
/* Logo */
{
"image": {
"src": "/images/placeholder/logo-001.png",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"cta": {
"url": "#",
"label": "Weiter zum Artikel"
},
"type": "logo"
}
/* Analyst Rating */
{
"image": {
"src": "/images/placeholder/logo-001.png",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": null,
"items": [
"Datum",
"Kaufen"
]
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"cta": {
"url": "#",
"label": "Herunterladen",
"is-icon-only": true,
"icon": {
"id": "download-simple"
}
},
"type": "rating"
}
/* With Linklist */
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"cta": {
"url": "#",
"label": "Weiter zum Artikel"
},
"linklist": {
"label": "Zugehörige Links",
"items": [
{
"link": {
"label": "Ich bin ein Link",
"modifier": null,
"icon": {
"id": "arrow-right"
}
}
},
{
"link": {
"label": "Noch ein zweiter Link",
"modifier": null,
"icon": {
"id": "arrow-right"
}
}
},
{
"link": {
"label": "Ein Weiterer",
"modifier": null,
"icon": {
"id": "arrow-right"
}
}
}
]
}
}
/* Doc Only */
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"cta": {
"url": "#",
"label": "Weiter zum Artikel"
},
"sections": [
{
"title": "Teaser Insets mit beschränkter Breite",
"narrow-preview": true,
"variants": [
{
"title": "Default",
"samples": {
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"cta": {
"url": "#",
"label": "Weiter zum Artikel"
}
}
},
{
"title": "Multiple Terms",
"samples": {
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"cta": {
"url": "#",
"label": "Weiter zum Artikel"
}
}
},
{
"title": "Document",
"samples": {
"image": {
"src": "/images/placeholder/dummy-document.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.",
"cta": {
"url": "#",
"label": "Download Datei (PDF)",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
"type": "document"
}
},
{
"title": "Logo",
"samples": {
"image": {
"src": "/images/placeholder/logo-001.png",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"cta": {
"url": "#",
"label": "Weiter zum Artikel"
},
"type": "logo"
}
},
{
"title": "Analyst Rating",
"samples": {
"image": {
"src": "/images/placeholder/logo-001.png",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": null,
"items": [
"Datum",
"Kaufen"
]
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"cta": {
"url": "#",
"label": "Herunterladen",
"is-icon-only": true,
"icon": {
"id": "download-simple"
}
},
"type": "rating"
}
}
]
},
{
"title": "Teaser Inset mit voller Breite",
"variants": [
{
"samples": {
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"cta": {
"url": "#",
"label": "Weiter zum Artikel"
},
"linklist": {
"label": "Zugehörige Links",
"items": [
{
"link": {
"label": "Ich bin ein Link",
"modifier": null,
"icon": {
"id": "arrow-right"
}
}
},
{
"link": {
"label": "Noch ein zweiter Link",
"modifier": null,
"icon": {
"id": "arrow-right"
}
}
},
{
"link": {
"label": "Ein Weiterer",
"modifier": null,
"icon": {
"id": "arrow-right"
}
}
}
]
}
}
}
]
}
]
}
@import "_teaserInset.styles";
%teaserInset {
$padding: var(--bp-large);
@include stack-spacing(section);
padding-top: $padding;
padding-bottom: $padding;
border: var(--bw) $_accent-color;
border-style: solid none;
margin-bottom: calc(-1 * var(--bw));
&:has(+ &) + & {
margin-top: 0;
}
.kicker {
@include stack-spacing(0);
}
&-image {
width: 50%;
min-width: 216px;
max-width: 340px;
aspect-ratio: 1;
align-self: flex-start;
background-color: $_backdrop-color;
@include border-radius(small);
overflow: hidden;
.figure {
@include stack-spacing(0);
width: 100%;
aspect-ratio: 1;
position: relative;
}
a {
display: block;
border-radius: var(--br-small);
overflow: hidden;
}
img {
position: absolute;
background-color: white;
width: 100%;
height: 100%;
border-radius: var(--br-small);
transform: scale(1);
transition: transform $_transition-duration;
}
a:hover img {
transform: scale($figure_action_scale);
transition-duration: $_transition-duration--in;
}
}
&[data-type="document"] &-image,
&[data-type="logo"] &-image,
&[data-type="rating"] &-image {
.figure {
--ratio: auto;
}
img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
top: 50%;
left: 50%;
object-fit: contain;
transform: translate(-50%, -50%) scale(.85);
}
a:hover img {
transform: translate(-50%, -50%) scale(.93);
}
}
&[data-type="logo"],
&[data-type="rating"] {
.figure {
background-color: white;
border: $_backdrop-color var(--bw) solid;
}
}
&-content {
@include stack-spacing();
> *:first-child {
@include stack-spacing(0);
}
}
&[data-type="rating"] &-description {
@include text-size(small);
}
&-heading {
@include text-size(x-large);
text-wrap: balance;
}
&-kicker {
display: block;
@include text-size(small);
text-transform: uppercase;
letter-spacing: .1em;
}
&-title {
a {
color: inherit;
text-decoration: inherit;
}
}
&-description {
@include stack-spacing(small);
p {
@include stack-spacing(small);
}
}
&-heading + &-description {
}
&-cta {
}
&-linklist {
.linkList {
@include stack-spacing(0);
}
}
@include not-on-desktop(){
&-linklist {
@include box-padding(default, (margin-top, padding-top));
}
.linkList-title {
margin-top: -.5em;
}
}
@include only-on-desktop(){
$image-width: 3;
display: flex;
column-gap: $padding;
&-image {
flex: 1 0 auto;
width: get-columns-width($image-width, 8);
min-width: auto;
}
&-content {
flex: 0 1 auto;
width: get-columns-width(8 - $image-width, 8);
@include stack-spacing(0);
display: flex;
flex-direction: column;
}
&-cta {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
}
&.has-linklist & {
$image-width: 3;
&-image {
width: get-columns-width($image-width, 12);
}
&-content {
width: auto;
flex-grow: 1;
}
&-linklist {
@include stack-spacing(0);
flex: 1 0 auto;
min-width: fit-content;
padding-left: var(--gg);
border-left: $_border-color solid var(--bw);
}
}
}
}
.teaserInset {
@extend %teaserInset;
&-image {
@extend %teaserInset-image;
}
&-content {
@extend %teaserInset-content;
}
&-heading {
@extend %teaserInset-heading;
}
&-kicker {
@extend %teaserInset-kicker;
}
&-title {
@extend %teaserInset-title;
}
&-description {
@extend %teaserInset-description;
}
&-cta {
@extend %teaserInset-cta;
}
&-linklist {
@extend %teaserInset-linklist;
}
}