No notes defined.
<!-- Default -->
<div class="teaserCard is-clickable">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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="teaserCard-cta">
<a href="#" class="button"><span class="button-label">Link styled as Button</span></a>
</div>
</div>
</div>
<!-- Legacy Kicker -->
<div class="teaserCard is-clickable">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<strong class="teaserCard-kicker">Thema</strong><span class="is-visually-hidden">:</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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="teaserCard-cta">
<a href="#" class="button"><span class="button-label">Link styled as Button</span></a>
</div>
</div>
</div>
<!-- Multiple Terms -->
<div class="teaserCard is-clickable">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-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="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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="teaserCard-cta">
<a href="#" class="button"><span class="button-label">Link styled as Button</span></a>
</div>
</div>
</div>
<!-- With Link -->
<div class="teaserCard is-clickable">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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="teaserCard-link">
<a href="#" class="link"><span class="link-label">Jetzt klicken!</span></a>
</div>
<div class="teaserCard-cta">
<a href="#" class="button"><span class="button-label">Link styled as Button</span></a>
</div>
</div>
</div>
<!-- With Cta -->
<div class="teaserCard is-clickable">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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="teaserCard-cta">
<a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Mehr erfahren!</span></a>
</div>
</div>
</div>
<!-- With Desktop Mockup -->
<div class="teaserCard is-clickable has-product-mockup">
<div class="teaserCard-image">
<div class="productMockup">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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="teaserCard-cta">
<a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Mehr erfahren!</span></a>
</div>
</div>
</div>
<!-- With Tablet Mockup -->
<div class="teaserCard is-clickable has-product-mockup">
<div class="teaserCard-image">
<div class="productMockup" data-device="tablet">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-tablet.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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="teaserCard-cta">
<a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Mehr erfahren!</span></a>
</div>
</div>
</div>
<!-- Large -->
<div class="teaserCard is-clickable is-large">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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="teaserCard-cta">
<a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Mehr erfahren!</span></a>
</div>
</div>
</div>
<!-- Side By Side -->
<div class="teaserCard is-clickable is-side-by-side">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption" data-floating="true" data-hidden="true"><button tabindex="0"></button> <small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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="teaserCard-cta">
<a href="#" class="button"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Mehr erfahren!</span></a>
</div>
</div>
</div>
<!-- Side By Side Flipped -->
<div class="teaserCard is-clickable is-side-by-side is-flipped">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption" data-floating="true" data-hidden="true"><button tabindex="0"></button> <small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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="teaserCard-cta">
<a href="#" class="button"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Mehr erfahren!</span></a>
</div>
</div>
</div>
<!-- Text Only -->
<div class="teaserCard is-clickable">
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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="teaserCard-cta">
<a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Mehr erfahren!</span></a>
</div>
</div>
</div>
<!-- Text Only With List -->
<div class="teaserCard is-clickable">
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-description">
<ul>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
<li>Church-key vinyl pug cardigan</li>
<li>Biodiesel locavore PBR try-hard skateboard,<br>
plaid 8-bit</li>
</ul>
</div>
<div class="teaserCard-cta">
<a href="#" class="button"><span class="button-label">Link styled as Button</span></a>
</div>
</div>
</div>
<!-- Text Only Accent -->
<div class="teaserCard is-clickable" data-theme="accent">
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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="teaserCard-cta">
<a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Mehr erfahren!</span></a>
</div>
</div>
</div>
<!-- Text Only Dark -->
<div class="teaserCard is-clickable" data-theme="dark">
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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="teaserCard-cta">
<a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Mehr erfahren!</span></a>
</div>
</div>
</div>
<!-- Documenation only -->
<section class="doc-variant" style="margin-bottom: var(--sp)">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Default</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div class="teaserCard is-clickable">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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="teaserCard-cta">
<a href="#" class="button"><span class="button-label">Link styled as Button</span></a>
</div>
</div>
</div>
</section>
<section class="doc-variant" style="margin-bottom: var(--sp)">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Multiple Terms in Kicker</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div class="teaserCard is-clickable">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-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="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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="teaserCard-cta">
<a href="#" class="button"><span class="button-label">Link styled as Button</span></a>
</div>
</div>
</div>
</section>
<section class="doc-variant" style="margin-bottom: var(--sp)">
<header class="doc-variant-header">
<h2 class="doc-variant-title">With Link</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div class="teaserCard is-clickable">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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="teaserCard-link">
<a href="#" class="link"><span class="link-label">Jetzt klicken!</span></a>
</div>
<div class="teaserCard-cta">
<a href="#" class="button"><span class="button-label">Link styled as Button</span></a>
</div>
</div>
</div>
</section>
<section class="doc-variant" style="margin-bottom: var(--sp)">
<header class="doc-variant-header">
<h2 class="doc-variant-title">With CTA</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div class="teaserCard is-clickable">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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="teaserCard-cta">
<a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Mehr erfahren!</span></a>
</div>
</div>
</div>
</section>
<section class="doc-variant" style="margin-bottom: var(--sp)">
<header class="doc-variant-header">
<h2 class="doc-variant-title">With Product Mockup</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div class="teaserCard is-clickable has-product-mockup">
<div class="teaserCard-image">
<div class="productMockup">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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="teaserCard-cta">
<a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Mehr erfahren!</span></a>
</div>
</div>
</div>
<div class="teaserCard is-clickable has-product-mockup">
<div class="teaserCard-image">
<div class="productMockup" data-device="tablet">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-tablet.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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="teaserCard-cta">
<a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Mehr erfahren!</span></a>
</div>
</div>
</div>
</section>
<section class="doc-variant" style="margin-bottom: var(--sp)">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Large with CTA</h2>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-large</li>
</ul>
</div>
</header>
<div class="teaserCard is-clickable is-large">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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="teaserCard-cta">
<a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Mehr erfahren!</span></a>
</div>
</div>
</div>
</section>
<section class="doc-variant" style="margin-bottom: var(--sp)">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Side-by-side</h2>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-side-by-side</li>
<li>is-side-by-side is-flipped</li>
</ul>
</div>
</header>
<div class="teaserCard is-clickable is-side-by-side">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption" data-floating="true" data-hidden="true"><button tabindex="0"></button> <small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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="teaserCard-cta">
<a href="#" class="button"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Mehr erfahren!</span></a>
</div>
</div>
</div>
<div class="teaserCard is-clickable is-side-by-side is-flipped">
<div class="teaserCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption" data-floating="true" data-hidden="true"><button tabindex="0"></button> <small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</div>
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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="teaserCard-cta">
<a href="#" class="button"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Mehr erfahren!</span></a>
</div>
</div>
</div>
</section>
<section class="doc-variant" style="margin-bottom: var(--sp)">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Text-only</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div class="teaserCard is-clickable">
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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="teaserCard-cta">
<a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Mehr erfahren!</span></a>
</div>
</div>
</div>
</section>
<section class="doc-variant" style="margin-bottom: var(--sp)">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Text-only with List</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div class="teaserCard is-clickable">
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-description">
<ul>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
<li>Church-key vinyl pug cardigan</li>
<li>Biodiesel locavore PBR try-hard skateboard,<br>
plaid 8-bit</li>
</ul>
</div>
<div class="teaserCard-cta">
<a href="#" class="button"><span class="button-label">Link styled as Button</span></a>
</div>
</div>
</div>
</section>
<section class="doc-variant" style="margin-bottom: var(--sp)">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Text-only Accent</h2>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>[data-theme="accent"]</li>
</ul>
</div>
</header>
<div class="teaserCard is-clickable" data-theme="accent">
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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="teaserCard-cta">
<a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Mehr erfahren!</span></a>
</div>
</div>
</div>
</section>
<section class="doc-variant" style="margin-bottom: var(--sp)">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Text-only Dark</h2>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>[data-theme="dark"]</li>
</ul>
</div>
</header>
<div class="teaserCard is-clickable" data-theme="dark">
<div class="teaserCard-content">
<h3 class="teaserCard-heading">
<span class="kicker">
Thema
</span>
<span class="teaserCard-title">Ich bin der Titel</span>
</h3>
<div class="teaserCard-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="teaserCard-cta">
<a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Mehr erfahren!</span></a>
</div>
</div>
</div>
</section>
<!-- Default -->
<div class="teaserCard{{#if cta}} is-clickable{{/if}}{{#if productmockup}} has-product-mockup{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
{{#image}}
<div class="teaserCard-image">
{{render '@figure' (contextData '@teasercard' this) merge=false}}
</div>
{{/image}}
{{#productmockup}}
<div class="teaserCard-image">
{{render '@productmockup' (contextData '@teasercard' this) merge=false}}
</div>
{{/productmockup}}
<div class="teaserCard-content">
{{#category}}<strong class="teaserCard-category">{{{.}}}</strong>{{/category}}
{{#if title}}
<h3 class="teaserCard-heading">
{{#if kicker}}
{{#unless kicker.content}}{{#unless kicker.items}}{{!-- Legacy --}}<strong class="teaserCard-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}}
{{#title}}<span class="teaserCard-title">{{{.}}}</span>{{/title}}
</h3>
{{/if}}
{{#description}}
<div class="teaserCard-description">
{{{.}}}
</div>
{{/description}}
{{#link}}
<div class="teaserCard-link">
{{render '@link' (contextData '@teasercard' this) merge=true}}
</div>
{{/link}}
{{#cta}}
<div class="teaserCard-cta">
{{render '@button--link' (contextData '@teasercard' this) merge=true}}
</div>
{{/cta}}
</div>
</div>
<!-- Legacy Kicker -->
<div class="teaserCard{{#if cta}} is-clickable{{/if}}{{#if productmockup}} has-product-mockup{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
{{#image}}
<div class="teaserCard-image">
{{render '@figure' (contextData '@teasercard' this) merge=false}}
</div>
{{/image}}
{{#productmockup}}
<div class="teaserCard-image">
{{render '@productmockup' (contextData '@teasercard' this) merge=false}}
</div>
{{/productmockup}}
<div class="teaserCard-content">
{{#category}}<strong class="teaserCard-category">{{{.}}}</strong>{{/category}}
{{#if title}}
<h3 class="teaserCard-heading">
{{#if kicker}}
{{#unless kicker.content}}{{#unless kicker.items}}{{!-- Legacy --}}<strong class="teaserCard-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}}
{{#title}}<span class="teaserCard-title">{{{.}}}</span>{{/title}}
</h3>
{{/if}}
{{#description}}
<div class="teaserCard-description">
{{{.}}}
</div>
{{/description}}
{{#link}}
<div class="teaserCard-link">
{{render '@link' (contextData '@teasercard' this) merge=true}}
</div>
{{/link}}
{{#cta}}
<div class="teaserCard-cta">
{{render '@button--link' (contextData '@teasercard' this) merge=true}}
</div>
{{/cta}}
</div>
</div>
<!-- Multiple Terms -->
<div class="teaserCard{{#if cta}} is-clickable{{/if}}{{#if productmockup}} has-product-mockup{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
{{#image}}
<div class="teaserCard-image">
{{render '@figure' (contextData '@teasercard' this) merge=false}}
</div>
{{/image}}
{{#productmockup}}
<div class="teaserCard-image">
{{render '@productmockup' (contextData '@teasercard' this) merge=false}}
</div>
{{/productmockup}}
<div class="teaserCard-content">
{{#category}}<strong class="teaserCard-category">{{{.}}}</strong>{{/category}}
{{#if title}}
<h3 class="teaserCard-heading">
{{#if kicker}}
{{#unless kicker.content}}{{#unless kicker.items}}{{!-- Legacy --}}<strong class="teaserCard-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}}
{{#title}}<span class="teaserCard-title">{{{.}}}</span>{{/title}}
</h3>
{{/if}}
{{#description}}
<div class="teaserCard-description">
{{{.}}}
</div>
{{/description}}
{{#link}}
<div class="teaserCard-link">
{{render '@link' (contextData '@teasercard' this) merge=true}}
</div>
{{/link}}
{{#cta}}
<div class="teaserCard-cta">
{{render '@button--link' (contextData '@teasercard' this) merge=true}}
</div>
{{/cta}}
</div>
</div>
<!-- With Link -->
<div class="teaserCard{{#if cta}} is-clickable{{/if}}{{#if productmockup}} has-product-mockup{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
{{#image}}
<div class="teaserCard-image">
{{render '@figure' (contextData '@teasercard' this) merge=false}}
</div>
{{/image}}
{{#productmockup}}
<div class="teaserCard-image">
{{render '@productmockup' (contextData '@teasercard' this) merge=false}}
</div>
{{/productmockup}}
<div class="teaserCard-content">
{{#category}}<strong class="teaserCard-category">{{{.}}}</strong>{{/category}}
{{#if title}}
<h3 class="teaserCard-heading">
{{#if kicker}}
{{#unless kicker.content}}{{#unless kicker.items}}{{!-- Legacy --}}<strong class="teaserCard-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}}
{{#title}}<span class="teaserCard-title">{{{.}}}</span>{{/title}}
</h3>
{{/if}}
{{#description}}
<div class="teaserCard-description">
{{{.}}}
</div>
{{/description}}
{{#link}}
<div class="teaserCard-link">
{{render '@link' (contextData '@teasercard' this) merge=true}}
</div>
{{/link}}
{{#cta}}
<div class="teaserCard-cta">
{{render '@button--link' (contextData '@teasercard' this) merge=true}}
</div>
{{/cta}}
</div>
</div>
<!-- With Cta -->
<div class="teaserCard{{#if cta}} is-clickable{{/if}}{{#if productmockup}} has-product-mockup{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
{{#image}}
<div class="teaserCard-image">
{{render '@figure' (contextData '@teasercard' this) merge=false}}
</div>
{{/image}}
{{#productmockup}}
<div class="teaserCard-image">
{{render '@productmockup' (contextData '@teasercard' this) merge=false}}
</div>
{{/productmockup}}
<div class="teaserCard-content">
{{#category}}<strong class="teaserCard-category">{{{.}}}</strong>{{/category}}
{{#if title}}
<h3 class="teaserCard-heading">
{{#if kicker}}
{{#unless kicker.content}}{{#unless kicker.items}}{{!-- Legacy --}}<strong class="teaserCard-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}}
{{#title}}<span class="teaserCard-title">{{{.}}}</span>{{/title}}
</h3>
{{/if}}
{{#description}}
<div class="teaserCard-description">
{{{.}}}
</div>
{{/description}}
{{#link}}
<div class="teaserCard-link">
{{render '@link' (contextData '@teasercard' this) merge=true}}
</div>
{{/link}}
{{#cta}}
<div class="teaserCard-cta">
{{render '@button--link' (contextData '@teasercard' this) merge=true}}
</div>
{{/cta}}
</div>
</div>
<!-- With Desktop Mockup -->
<div class="teaserCard{{#if cta}} is-clickable{{/if}}{{#if productmockup}} has-product-mockup{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
{{#image}}
<div class="teaserCard-image">
{{render '@figure' (contextData '@teasercard' this) merge=false}}
</div>
{{/image}}
{{#productmockup}}
<div class="teaserCard-image">
{{render '@productmockup' (contextData '@teasercard' this) merge=false}}
</div>
{{/productmockup}}
<div class="teaserCard-content">
{{#category}}<strong class="teaserCard-category">{{{.}}}</strong>{{/category}}
{{#if title}}
<h3 class="teaserCard-heading">
{{#if kicker}}
{{#unless kicker.content}}{{#unless kicker.items}}{{!-- Legacy --}}<strong class="teaserCard-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}}
{{#title}}<span class="teaserCard-title">{{{.}}}</span>{{/title}}
</h3>
{{/if}}
{{#description}}
<div class="teaserCard-description">
{{{.}}}
</div>
{{/description}}
{{#link}}
<div class="teaserCard-link">
{{render '@link' (contextData '@teasercard' this) merge=true}}
</div>
{{/link}}
{{#cta}}
<div class="teaserCard-cta">
{{render '@button--link' (contextData '@teasercard' this) merge=true}}
</div>
{{/cta}}
</div>
</div>
<!-- With Tablet Mockup -->
<div class="teaserCard{{#if cta}} is-clickable{{/if}}{{#if productmockup}} has-product-mockup{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
{{#image}}
<div class="teaserCard-image">
{{render '@figure' (contextData '@teasercard' this) merge=false}}
</div>
{{/image}}
{{#productmockup}}
<div class="teaserCard-image">
{{render '@productmockup' (contextData '@teasercard' this) merge=false}}
</div>
{{/productmockup}}
<div class="teaserCard-content">
{{#category}}<strong class="teaserCard-category">{{{.}}}</strong>{{/category}}
{{#if title}}
<h3 class="teaserCard-heading">
{{#if kicker}}
{{#unless kicker.content}}{{#unless kicker.items}}{{!-- Legacy --}}<strong class="teaserCard-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}}
{{#title}}<span class="teaserCard-title">{{{.}}}</span>{{/title}}
</h3>
{{/if}}
{{#description}}
<div class="teaserCard-description">
{{{.}}}
</div>
{{/description}}
{{#link}}
<div class="teaserCard-link">
{{render '@link' (contextData '@teasercard' this) merge=true}}
</div>
{{/link}}
{{#cta}}
<div class="teaserCard-cta">
{{render '@button--link' (contextData '@teasercard' this) merge=true}}
</div>
{{/cta}}
</div>
</div>
<!-- Large -->
<div class="teaserCard{{#if cta}} is-clickable{{/if}}{{#if productmockup}} has-product-mockup{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
{{#image}}
<div class="teaserCard-image">
{{render '@figure' (contextData '@teasercard' this) merge=false}}
</div>
{{/image}}
{{#productmockup}}
<div class="teaserCard-image">
{{render '@productmockup' (contextData '@teasercard' this) merge=false}}
</div>
{{/productmockup}}
<div class="teaserCard-content">
{{#category}}<strong class="teaserCard-category">{{{.}}}</strong>{{/category}}
{{#if title}}
<h3 class="teaserCard-heading">
{{#if kicker}}
{{#unless kicker.content}}{{#unless kicker.items}}{{!-- Legacy --}}<strong class="teaserCard-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}}
{{#title}}<span class="teaserCard-title">{{{.}}}</span>{{/title}}
</h3>
{{/if}}
{{#description}}
<div class="teaserCard-description">
{{{.}}}
</div>
{{/description}}
{{#link}}
<div class="teaserCard-link">
{{render '@link' (contextData '@teasercard' this) merge=true}}
</div>
{{/link}}
{{#cta}}
<div class="teaserCard-cta">
{{render '@button--link' (contextData '@teasercard' this) merge=true}}
</div>
{{/cta}}
</div>
</div>
<!-- Side By Side -->
<div class="teaserCard{{#if cta}} is-clickable{{/if}}{{#if productmockup}} has-product-mockup{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
{{#image}}
<div class="teaserCard-image">
{{render '@figure' (contextData '@teasercard' this) merge=false}}
</div>
{{/image}}
{{#productmockup}}
<div class="teaserCard-image">
{{render '@productmockup' (contextData '@teasercard' this) merge=false}}
</div>
{{/productmockup}}
<div class="teaserCard-content">
{{#category}}<strong class="teaserCard-category">{{{.}}}</strong>{{/category}}
{{#if title}}
<h3 class="teaserCard-heading">
{{#if kicker}}
{{#unless kicker.content}}{{#unless kicker.items}}{{!-- Legacy --}}<strong class="teaserCard-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}}
{{#title}}<span class="teaserCard-title">{{{.}}}</span>{{/title}}
</h3>
{{/if}}
{{#description}}
<div class="teaserCard-description">
{{{.}}}
</div>
{{/description}}
{{#link}}
<div class="teaserCard-link">
{{render '@link' (contextData '@teasercard' this) merge=true}}
</div>
{{/link}}
{{#cta}}
<div class="teaserCard-cta">
{{render '@button--link' (contextData '@teasercard' this) merge=true}}
</div>
{{/cta}}
</div>
</div>
<!-- Side By Side Flipped -->
<div class="teaserCard{{#if cta}} is-clickable{{/if}}{{#if productmockup}} has-product-mockup{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
{{#image}}
<div class="teaserCard-image">
{{render '@figure' (contextData '@teasercard' this) merge=false}}
</div>
{{/image}}
{{#productmockup}}
<div class="teaserCard-image">
{{render '@productmockup' (contextData '@teasercard' this) merge=false}}
</div>
{{/productmockup}}
<div class="teaserCard-content">
{{#category}}<strong class="teaserCard-category">{{{.}}}</strong>{{/category}}
{{#if title}}
<h3 class="teaserCard-heading">
{{#if kicker}}
{{#unless kicker.content}}{{#unless kicker.items}}{{!-- Legacy --}}<strong class="teaserCard-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}}
{{#title}}<span class="teaserCard-title">{{{.}}}</span>{{/title}}
</h3>
{{/if}}
{{#description}}
<div class="teaserCard-description">
{{{.}}}
</div>
{{/description}}
{{#link}}
<div class="teaserCard-link">
{{render '@link' (contextData '@teasercard' this) merge=true}}
</div>
{{/link}}
{{#cta}}
<div class="teaserCard-cta">
{{render '@button--link' (contextData '@teasercard' this) merge=true}}
</div>
{{/cta}}
</div>
</div>
<!-- Text Only -->
<div class="teaserCard{{#if cta}} is-clickable{{/if}}{{#if productmockup}} has-product-mockup{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
{{#image}}
<div class="teaserCard-image">
{{render '@figure' (contextData '@teasercard' this) merge=false}}
</div>
{{/image}}
{{#productmockup}}
<div class="teaserCard-image">
{{render '@productmockup' (contextData '@teasercard' this) merge=false}}
</div>
{{/productmockup}}
<div class="teaserCard-content">
{{#category}}<strong class="teaserCard-category">{{{.}}}</strong>{{/category}}
{{#if title}}
<h3 class="teaserCard-heading">
{{#if kicker}}
{{#unless kicker.content}}{{#unless kicker.items}}{{!-- Legacy --}}<strong class="teaserCard-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}}
{{#title}}<span class="teaserCard-title">{{{.}}}</span>{{/title}}
</h3>
{{/if}}
{{#description}}
<div class="teaserCard-description">
{{{.}}}
</div>
{{/description}}
{{#link}}
<div class="teaserCard-link">
{{render '@link' (contextData '@teasercard' this) merge=true}}
</div>
{{/link}}
{{#cta}}
<div class="teaserCard-cta">
{{render '@button--link' (contextData '@teasercard' this) merge=true}}
</div>
{{/cta}}
</div>
</div>
<!-- Text Only With List -->
<div class="teaserCard{{#if cta}} is-clickable{{/if}}{{#if productmockup}} has-product-mockup{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
{{#image}}
<div class="teaserCard-image">
{{render '@figure' (contextData '@teasercard' this) merge=false}}
</div>
{{/image}}
{{#productmockup}}
<div class="teaserCard-image">
{{render '@productmockup' (contextData '@teasercard' this) merge=false}}
</div>
{{/productmockup}}
<div class="teaserCard-content">
{{#category}}<strong class="teaserCard-category">{{{.}}}</strong>{{/category}}
{{#if title}}
<h3 class="teaserCard-heading">
{{#if kicker}}
{{#unless kicker.content}}{{#unless kicker.items}}{{!-- Legacy --}}<strong class="teaserCard-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}}
{{#title}}<span class="teaserCard-title">{{{.}}}</span>{{/title}}
</h3>
{{/if}}
{{#description}}
<div class="teaserCard-description">
{{{.}}}
</div>
{{/description}}
{{#link}}
<div class="teaserCard-link">
{{render '@link' (contextData '@teasercard' this) merge=true}}
</div>
{{/link}}
{{#cta}}
<div class="teaserCard-cta">
{{render '@button--link' (contextData '@teasercard' this) merge=true}}
</div>
{{/cta}}
</div>
</div>
<!-- Text Only Accent -->
<div class="teaserCard{{#if cta}} is-clickable{{/if}}{{#if productmockup}} has-product-mockup{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
{{#image}}
<div class="teaserCard-image">
{{render '@figure' (contextData '@teasercard' this) merge=false}}
</div>
{{/image}}
{{#productmockup}}
<div class="teaserCard-image">
{{render '@productmockup' (contextData '@teasercard' this) merge=false}}
</div>
{{/productmockup}}
<div class="teaserCard-content">
{{#category}}<strong class="teaserCard-category">{{{.}}}</strong>{{/category}}
{{#if title}}
<h3 class="teaserCard-heading">
{{#if kicker}}
{{#unless kicker.content}}{{#unless kicker.items}}{{!-- Legacy --}}<strong class="teaserCard-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}}
{{#title}}<span class="teaserCard-title">{{{.}}}</span>{{/title}}
</h3>
{{/if}}
{{#description}}
<div class="teaserCard-description">
{{{.}}}
</div>
{{/description}}
{{#link}}
<div class="teaserCard-link">
{{render '@link' (contextData '@teasercard' this) merge=true}}
</div>
{{/link}}
{{#cta}}
<div class="teaserCard-cta">
{{render '@button--link' (contextData '@teasercard' this) merge=true}}
</div>
{{/cta}}
</div>
</div>
<!-- Text Only Dark -->
<div class="teaserCard{{#if cta}} is-clickable{{/if}}{{#if productmockup}} has-product-mockup{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
{{#image}}
<div class="teaserCard-image">
{{render '@figure' (contextData '@teasercard' this) merge=false}}
</div>
{{/image}}
{{#productmockup}}
<div class="teaserCard-image">
{{render '@productmockup' (contextData '@teasercard' this) merge=false}}
</div>
{{/productmockup}}
<div class="teaserCard-content">
{{#category}}<strong class="teaserCard-category">{{{.}}}</strong>{{/category}}
{{#if title}}
<h3 class="teaserCard-heading">
{{#if kicker}}
{{#unless kicker.content}}{{#unless kicker.items}}{{!-- Legacy --}}<strong class="teaserCard-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}}
{{#title}}<span class="teaserCard-title">{{{.}}}</span>{{/title}}
</h3>
{{/if}}
{{#description}}
<div class="teaserCard-description">
{{{.}}}
</div>
{{/description}}
{{#link}}
<div class="teaserCard-link">
{{render '@link' (contextData '@teasercard' this) merge=true}}
</div>
{{/link}}
{{#cta}}
<div class="teaserCard-cta">
{{render '@button--link' (contextData '@teasercard' this) merge=true}}
</div>
{{/cta}}
</div>
</div>
<!-- Documenation only -->
{{#variants}}
<section class="doc-variant" style="margin-bottom: var(--sp)">
<header class="doc-variant-header">
{{#title}}
<h2 class="doc-variant-title">{{{.}}}</h2>
{{/title}}
<div class="doc-variant-configuration">
{{#if modifiers}}
<ul data-label="Modifier">
{{#modifiers}}
<li>{{{.}}}</li>
{{/modifiers}}
</ul>
{{/if}}
</div>
</header>
{{#samples}}
{{render '@teasercard' (contextData '@teasercard' this) merge=true}}
{{/samples}}
</section>
{{/variants}}
/* Default */
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung"
},
"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": {
"modifier": null
}
}
/* Legacy Kicker */
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung"
},
"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": {
"modifier": null
}
}
/* Multiple Terms */
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung"
},
"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": {
"modifier": null
}
}
/* With Link */
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung"
},
"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": {
"modifier": null
},
"link": {
"label": "Jetzt klicken!",
"url": "#"
}
}
/* With Cta */
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung"
},
"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": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
}
}
/* With Desktop Mockup */
{
"image": null,
"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": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
},
"productmockup": {
"figure": {
"src": "/images/productMockup/sample-screenshot-desktop.png",
"alt": "Ich bin eine Produktabbildung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"link": {
"label": "Details anzeigen",
"url": "#"
}
}
}
}
/* With Tablet Mockup */
{
"image": null,
"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": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
},
"productmockup": {
"figure": {
"src": "/images/productMockup/sample-screenshot-tablet.png",
"alt": "Ich bin eine Produktabbildung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"device": "tablet"
}
}
/* Large */
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung"
},
"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": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
},
"modifier": "is-large"
}
/* Side By Side */
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung",
"caption": null,
"copyright": {
"content": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
"is-floating": true,
"is-hidden": true
}
},
"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": {
"modifier": null,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
},
"modifier": "is-side-by-side"
}
/* Side By Side Flipped */
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung",
"caption": null,
"copyright": {
"content": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
"is-floating": true,
"is-hidden": true
}
},
"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": {
"modifier": null,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
},
"modifier": "is-side-by-side is-flipped"
}
/* Text Only */
{
"image": null,
"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": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
}
}
/* Text Only With List */
{
"image": null,
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "<ul>\n<li>Hashtag Echo Park selfies</li>\n<li>PBR try-hard skateboard, plaid 8-bit</li>\n<li>Flexitarian retro single-origin coffee</li>\n<li>Church-key vinyl pug cardigan</li>\n<li>Biodiesel locavore PBR try-hard skateboard,<br>\nplaid 8-bit</li>\n</ul>\n",
"cta": {
"modifier": null
}
}
/* Text Only Accent */
{
"image": null,
"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": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
},
"theme": "accent"
}
/* Text Only Dark */
{
"image": null,
"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": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
},
"theme": "dark"
}
/* Documenation only */
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung"
},
"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": {
"modifier": null
},
"variants": [
{
"title": "Default",
"samples": {
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung"
},
"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": {
"modifier": null
}
}
},
{
"title": "Multiple Terms in Kicker",
"samples": {
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung"
},
"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": {
"modifier": null
}
}
},
{
"title": "With Link",
"samples": {
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung"
},
"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": {
"modifier": null
},
"link": {
"label": "Jetzt klicken!",
"url": "#"
}
}
},
{
"title": "With CTA",
"samples": {
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung"
},
"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": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
}
}
},
{
"title": "With Product Mockup",
"samples": [
{
"image": null,
"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": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
},
"productmockup": {
"figure": {
"src": "/images/productMockup/sample-screenshot-desktop.png",
"alt": "Ich bin eine Produktabbildung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"link": {
"label": "Details anzeigen",
"url": "#"
}
}
}
},
{
"image": null,
"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": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
},
"productmockup": {
"figure": {
"src": "/images/productMockup/sample-screenshot-tablet.png",
"alt": "Ich bin eine Produktabbildung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"device": "tablet"
}
}
]
},
{
"title": "Large with CTA",
"modifiers": "is-large",
"samples": {
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung"
},
"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": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
},
"modifier": "is-large"
}
},
{
"title": "Side-by-side",
"modifiers": [
"is-side-by-side",
"is-side-by-side is-flipped"
],
"samples": [
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung",
"caption": null,
"copyright": {
"content": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
"is-floating": true,
"is-hidden": true
}
},
"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": {
"modifier": null,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
},
"modifier": "is-side-by-side"
},
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung",
"caption": null,
"copyright": {
"content": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
"is-floating": true,
"is-hidden": true
}
},
"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": {
"modifier": null,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
},
"modifier": "is-side-by-side is-flipped"
}
]
},
{
"title": "Text-only",
"samples": {
"image": null,
"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": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
}
}
},
{
"title": "Text-only with List",
"samples": {
"image": null,
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "<ul>\n<li>Hashtag Echo Park selfies</li>\n<li>PBR try-hard skateboard, plaid 8-bit</li>\n<li>Flexitarian retro single-origin coffee</li>\n<li>Church-key vinyl pug cardigan</li>\n<li>Biodiesel locavore PBR try-hard skateboard,<br>\nplaid 8-bit</li>\n</ul>\n",
"cta": {
"modifier": null
}
}
},
{
"title": "Text-only Accent",
"modifiers": "[data-theme=\"accent\"]",
"samples": {
"image": null,
"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": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
},
"theme": "accent"
}
},
{
"title": "Text-only Dark",
"modifiers": "[data-theme=\"dark\"]",
"samples": {
"image": null,
"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": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
},
"theme": "dark"
}
}
]
}
$teaserCard_kicker_styles: $kicker_styles !default;
$teaserCard_title_styles: (
text-size: largest,
) !default;
$teaserCard_description_styles: (
) !default;
$teaserCard--clickable_styles: (
box-shadow: none,
transition: $_transition-duration,
transition-property: box-shadow,
) !default;
$teaserCard--clickable_states: (
default: $teaserCard--clickable_styles,
hover: (
box-shadow: var(--bs),
transition-duration: $_transition-duration--in,
),
) !default;
@import "_teaserCard.settings";
@import "_teaserCard.styles";
%teaserCard {
@include border-radius();
overflow: hidden;
position: relative;
.kicker {
@include stack-spacing(0);
}
.figure-image {
border-radius: 0;
}
&-title {
&:first-child {
margin-top: -.2em;
}
}
&-category {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
padding: $tag_padding;
border-radius: 100vmax;
background-color: $_accent-color;
font-weight: $_font-weight;
text-transform: none;
letter-spacing: 0;
@include text-size(small);
user-select: none;
}
&-description {
hyphens: auto;
ul:not([class]) {
@extend %ul;
font-family: $_font-family;
&:first-child {
@include stack-spacing(small);
}
&:only-child {
padding-left: 0;
}
}
}
&-image {
overflow: hidden;
pointer-events: none;
.figure-caption {
@extend %figure-caption––hidden;
pointer-events: all;
> *:not(button, .figure-copyright) {
display: none;
}
}
.productMockup {
@include stack-spacing(0);
background-color: $_backdrop-color;
&-figure {
transform: scale(.85) translateY(2%);
}
&[data-device="tablet"] .productMockup-figure {
transform: scale(.75);
}
.figure-caption {
@extend %visually-hidden;
}
}
}
&-heading + &-description {
@include stack-spacing(small, $factor: .6);
}
&.is-clickable {
@include styles($teaserCard--clickable_styles);
transition: $_transition-duration transform;
@include action-states($teaserCard--clickable_states);
.figure {
overflow: hidden;
&-image {
transform: scale(1);
}
}
.figure-image,
.productMockup {
transition: $_transition-duration transform;
}
&:hover .figure-image,
&:hover .productMockup {
transform: scale($figure_action_scale);
transition-duration: $_transition-duration--in;
}
}
&-cta > * {
@include stack-spacing(0);
}
&:not(.is-large):not(.is-side-by-side) &-cta a {
@extend %button--small;
@include stack-spacing(0);
}
&[data-theme="dark"] {
--backdrop-color: var(--background-color);
}
&.has-product-mockup,
&:has(.productMockup) {
@include apply-theme(dark);
}
}
.teaserCard {
&-category {
@extend %teaserCard-category
}
}
.teaserCard.is-large {
background-color: transparent;
box-shadow: none !important;
overflow: visible;
.teaserCard {
&-image {
border-radius: inherit;
overflow: hidden;
}
&-content {
@include box-padding(0);
}
&-image + .teaserCard-content {
@include stack-spacing();
}
}
&.is-clickable .teaserCard-image {
@include styles($teaserCard--clickable_styles);
}
&.is-clickable {
@include action-states($teaserCard--clickable_states, $descendant: ".teaserCard-image");
.figure-image {
transform: scale(1);
transition: $_transition-duration transform;
}
&:hover .figure-image {
transform: scale($figure_action_scale);
transition-duration: $_transition-duration--in;
}
}
}
%teaserCard--side-by-side {
@include only-on-desktop(){
display: flex;
> * {
flex: 1 0 auto;
width: 50%;
}
%teaserCard {
&-image {
align-self: stretch;
position: relative;
overflow: hidden;
}
&-content {
@include box-padding(large);
}
&-cta a {
@include stack-spacing();
}
}
.figure {
width: 100%;
aspect-ratio: 3 / 2;
overflow: visible;
position: static;
&-image {
aspect-ratio: auto;
position: absolute;
height: 100%;
object-fit: cover;
}
}
&:not([data-theme]),
&[data-theme=""] {
@include apply-theme(dark);
}
}
}
%teaserCard--side-by-side--flipped {
@extend %teaserCard--side-by-side;
@include only-on-desktop(){
%teaserCard-content {
order: -1;
}
}
}
.teaserCard.is-side-by-side {
@extend %teaserCard--side-by-side;
&.is-flipped {
@extend %teaserCard--side-by-side--flipped;
}
&:nth-of-type(2n+1):not(.is-flipped) + & {
@extend %teaserCard--side-by-side--flipped;
}
}
$teaserCard_styles: (
background-color: $_backdrop-color,
) !default;
$teaserCard_kicker_styles: (
text-size: smallest,
text-transform: uppercase,
letter-spacing: .1em,
) !default;
$teaserCard_title_styles: (
) !default;
$teaserCard_description_styles: (
) !default;
$teaserCard_image_ratio: $figure_aspect-ratio !default;
%teaserCard {
@include styles($teaserCard_styles);
@include stack-spacing(component);
&-image {
.figure {
@include stack-spacing(0);
img {
--ratio: #{$teaserCard_image_ratio} / 1;
}
}
}
&-content {
@include box-padding();
}
&-heading {
margin-top: -.2em;
}
&-kicker {
display: block;
@include styles($teaserCard_kicker_styles);
}
&-title {
display: block;
@include styles($teaserCard_title_styles);
}
&-description {
@include styles($teaserCard_description_styles);
> *:first-child {
@include stack-spacing(0);
}
}
&-heading + &-description {
@include stack-spacing(0);
}
&-link {
@include stack-spacing();
}
&-cta {
@include stack-spacing();
.button {
@include stack-spacing(0);
}
}
p + p {
@include stack-spacing(small);
}
&.is-clickable {
position: relative;
a::after {
content: "";
position: absolute;
inset: 0;
}
}
}
.teaserCard {
@extend %teaserCard;
&-image {
@extend %teaserCard-image;
}
&-content {
@extend %teaserCard-content;
}
&-heading {
@extend %teaserCard-heading;
}
&-kicker {
@extend %teaserCard-kicker;
}
&-title {
@extend %teaserCard-title;
}
&-description {
@extend %teaserCard-description;
}
&-link {
@extend %teaserCard-link;
}
&-cta {
@extend %teaserCard-cta;
}
}