No notes defined.
<section class="doc-section">
<h2 class="doc-section-title">Default Teaser Cards</h2>
<section class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Layout with 3 Cards</h3>
<div class="doc-variant-configuration">
</div>
</header>
<div class="teaserSection">
<h2 class="teaserSection-title">Ich bin der Titel</h2>
<div class="teaserSection-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<div class="teaserSection-items">
<div class="teaserSection-item">
<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" data-icon-position="right"><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>
<div class="teaserSection-item">
<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">
Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.
</div>
<div class="teaserCard-cta">
<a href="#" class="button is-icon-only" data-icon-position="right"><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>
<div class="teaserSection-item">
<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 ein etwas längerer Titel</span>
</h3>
<div class="teaserCard-description">
Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.
</div>
<div class="teaserCard-cta">
<a href="#" class="button is-icon-only" data-icon-position="right"><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>
</div>
<div class="teaserSection-cta">
<a href="#" class="button is-secondary" data-icon-position="right"><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">Alle anzeigen</span></a>
</div>
</div>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Layout with 2 Cards</h3>
<div class="doc-variant-configuration">
</div>
</header>
<div class="teaserSection">
<h2 class="teaserSection-title">Ich bin der Titel</h2>
<div class="teaserSection-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<div class="teaserSection-items">
<div class="teaserSection-item">
<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" data-icon-position="right"><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>
<div class="teaserSection-item">
<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 ein etwas längerer Titel</span>
</h3>
<div class="teaserCard-description">
Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.
</div>
<div class="teaserCard-cta">
<a href="#" class="button is-icon-only" data-icon-position="right"><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>
</div>
<div class="teaserSection-cta">
<a href="#" class="button is-secondary" data-icon-position="right"><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">Alle anzeigen</span></a>
</div>
</div>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Layout with single Card</h3>
<div class="doc-variant-configuration">
</div>
</header>
<div class="teaserSection">
<h2 class="teaserSection-title">Ich bin der Titel</h2>
<div class="teaserSection-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<div class="teaserSection-items">
<div class="teaserSection-item">
<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" data-icon-position="right"><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>
</div>
<div class="teaserSection-cta">
<a href="#" class="button is-secondary" data-icon-position="right"><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">Alle anzeigen</span></a>
</div>
</div>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Layout with more than 3 Cards</h3>
<div class="doc-variant-configuration">
</div>
</header>
<div class="teaserSection">
<h2 class="teaserSection-title">Ich bin der Titel</h2>
<div class="teaserSection-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<div class="teaserSection-items">
<div class="teaserSection-item">
<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" data-icon-position="right"><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>
<div class="teaserSection-item">
<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">
Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.
</div>
<div class="teaserCard-cta">
<a href="#" class="button is-icon-only" data-icon-position="right"><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>
<div class="teaserSection-item">
<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 ein etwas längerer Titel</span>
</h3>
<div class="teaserCard-description">
Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.
</div>
<div class="teaserCard-cta">
<a href="#" class="button is-icon-only" data-icon-position="right"><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>
<div class="teaserSection-item">
<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">
Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.
</div>
<div class="teaserCard-cta">
<a href="#" class="button is-icon-only" data-icon-position="right"><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>
<div class="teaserSection-item">
<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" data-icon-position="right"><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>
</div>
<div class="teaserSection-cta">
<a href="#" class="button is-secondary" data-icon-position="right"><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">Alle anzeigen</span></a>
</div>
</div>
</section>
</section>
<section class="doc-section">
<h2 class="doc-section-title">Text-only Teaser Cards</h2>
<section class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Layout with single Card</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>.is-full-width</li>
</ul>
</div>
</header>
<div class="teaserSection is-full-width">
<h2 class="teaserSection-title">Ich bin der Titel</h2>
<div class="teaserSection-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<div class="teaserSection-items">
<div class="teaserSection-item">
<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" data-icon-position="right"><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>
</div>
<div class="teaserSection-cta">
<a href="#" class="button is-secondary" data-icon-position="right"><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">Alle anzeigen</span></a>
</div>
</div>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Layout with 2 Cards</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>.is-full-width</li>
</ul>
</div>
</header>
<div class="teaserSection is-full-width">
<h2 class="teaserSection-title">Ich bin der Titel</h2>
<div class="teaserSection-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<div class="teaserSection-items">
<div class="teaserSection-item">
<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" data-icon-position="right"><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>
<div class="teaserSection-item">
<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">
Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.
</div>
<div class="teaserCard-cta">
<a href="#" class="button is-icon-only" data-icon-position="right"><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>
</div>
<div class="teaserSection-cta">
<a href="#" class="button is-secondary" data-icon-position="right"><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">Alle anzeigen</span></a>
</div>
</div>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Layout with 3 Cards</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>.is-full-width</li>
</ul>
</div>
</header>
<div class="teaserSection is-full-width">
<h2 class="teaserSection-title">Ich bin der Titel</h2>
<div class="teaserSection-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<div class="teaserSection-items">
<div class="teaserSection-item">
<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" data-icon-position="right"><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>
<div class="teaserSection-item">
<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">
Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.
</div>
<div class="teaserCard-cta">
<a href="#" class="button is-icon-only" data-icon-position="right"><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>
<div class="teaserSection-item">
<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">
Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.
</div>
<div class="teaserCard-cta">
<a href="#" class="button is-icon-only" data-icon-position="right"><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>
</div>
<div class="teaserSection-cta">
<a href="#" class="button is-secondary" data-icon-position="right"><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">Alle anzeigen</span></a>
</div>
</div>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Layout with more than 3 Cards</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>.is-full-width</li>
</ul>
</div>
</header>
<div class="teaserSection is-full-width">
<h2 class="teaserSection-title">Ich bin der Titel</h2>
<div class="teaserSection-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<div class="teaserSection-items">
<div class="teaserSection-item">
<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" data-icon-position="right"><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>
<div class="teaserSection-item">
<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">
Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.
</div>
<div class="teaserCard-cta">
<a href="#" class="button is-icon-only" data-icon-position="right"><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>
<div class="teaserSection-item">
<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">
Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.
</div>
<div class="teaserCard-cta">
<a href="#" class="button is-icon-only" data-icon-position="right"><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>
<div class="teaserSection-item">
<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">
Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.
</div>
<div class="teaserCard-cta">
<a href="#" class="button is-icon-only" data-icon-position="right"><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>
<div class="teaserSection-item">
<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">
Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.
</div>
<div class="teaserCard-cta">
<a href="#" class="button is-icon-only" data-icon-position="right"><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>
</div>
<div class="teaserSection-cta">
<a href="#" class="button is-secondary" data-icon-position="right"><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">Alle anzeigen</span></a>
</div>
</div>
</section>
</section>
{{#sections}}
<section class="doc-section">
{{#title}}
<h2 class="doc-section-title">{{{.}}}</h2>
{{/title}}
{{#if modifiers}}
<div class="doc-variant-configuration">
<ul data-label="Modifier">
{{#modifiers}}
<li>{{{.}}}</li>
{{/modifiers}}
</ul>
</div>
{{/if}}
{{#variants}}
<section class="doc-variant">
{{#if title}}
<header class="doc-variant-header">
{{#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>
{{/if}}
{{#samples}}
{{render '@teasersection' (contextData '@teasersection' this) merge=true}}
{{/samples}}
{{#samples-with-subsections}}
{{render '@teasersection--with-subsections' (contextData '@teasersection' this) merge=true}}
{{/samples-with-subsections}}
</section>
{{/variants}}
</section>
{{/sections}}
{
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"items": [
{
"teasercard": {
"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"
}
}
}
},
{
"teasercard": {
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung"
},
"title": "Ich bin der Titel",
"description": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.",
"cta": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
}
}
},
{
"teasercard": {
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung"
},
"title": "Ich bin ein etwas längerer Titel",
"description": "Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.",
"cta": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
}
}
}
],
"cta": {
"modifier": "is-secondary",
"label": "Alle anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
}
},
"sections": [
{
"title": "Default Teaser Cards",
"variants": [
{
"title": "Layout with 3 Cards",
"samples": {
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"items": [
{
"teasercard": {
"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"
}
}
}
},
{
"teasercard": {
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung"
},
"title": "Ich bin der Titel",
"description": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.",
"cta": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
}
}
},
{
"teasercard": {
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung"
},
"title": "Ich bin ein etwas längerer Titel",
"description": "Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.",
"cta": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
}
}
}
],
"cta": {
"modifier": "is-secondary",
"label": "Alle anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
}
}
}
},
{
"title": "Layout with 2 Cards",
"samples": {
"items": [
{
"teasercard": {
"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"
}
}
}
},
{
"teasercard": {
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung"
},
"title": "Ich bin ein etwas längerer Titel",
"description": "Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.",
"cta": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
}
}
}
]
}
},
{
"title": "Layout with single Card",
"samples": {
"items": [
{
"teasercard": {
"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": "Layout with more than 3 Cards",
"samples": {
"items": [
{
"teasercard": {
"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"
}
}
}
},
{
"teasercard": {
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung"
},
"title": "Ich bin der Titel",
"description": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.",
"cta": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
}
}
},
{
"teasercard": {
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung"
},
"title": "Ich bin ein etwas längerer Titel",
"description": "Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.",
"cta": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
}
}
},
{
"teasercard": {
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung"
},
"title": "Ich bin der Titel",
"description": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.",
"cta": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
}
}
},
{
"teasercard": {
"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": "Text-only Teaser Cards",
"variants": [
{
"title": "Layout with single Card",
"modifiers": ".is-full-width",
"samples": [
{
"modifier": "is-full-width",
"items": [
{
"teasercard": {
"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": "Layout with 2 Cards",
"modifiers": ".is-full-width",
"samples": [
{
"modifier": "is-full-width",
"items": [
{
"teasercard": {
"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"
}
}
}
},
{
"teasercard": {
"image": null,
"title": "Ich bin der Titel",
"description": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.",
"cta": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
}
}
}
]
}
]
},
{
"title": "Layout with 3 Cards",
"modifiers": ".is-full-width",
"samples": [
{
"modifier": "is-full-width",
"items": [
{
"teasercard": {
"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"
}
}
}
},
{
"teasercard": {
"image": null,
"title": "Ich bin der Titel",
"description": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.",
"cta": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
}
}
},
{
"teasercard": {
"image": null,
"title": "Ich bin der Titel",
"description": "Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.",
"cta": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
}
}
}
]
}
]
},
{
"title": "Layout with more than 3 Cards",
"modifiers": ".is-full-width",
"samples": [
{
"modifier": "is-full-width",
"items": [
{
"teasercard": {
"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"
}
}
}
},
{
"teasercard": {
"image": null,
"title": "Ich bin der Titel",
"description": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.",
"cta": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
}
}
},
{
"teasercard": {
"image": null,
"title": "Ich bin der Titel",
"description": "Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.",
"cta": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
}
}
},
{
"teasercard": {
"image": null,
"title": "Ich bin der Titel",
"description": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.",
"cta": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
}
}
},
{
"teasercard": {
"image": null,
"title": "Ich bin der Titel",
"description": "Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.",
"cta": {
"modifier": null,
"is-icon-only": true,
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
}
}
}
]
}
]
}
]
}
]
}
@import "_teaserSection.settings";
@import "_teaserSection.styles";
.teaserSection {
&-cta {
@include stack-spacing(component);
text-align: center;
.button {
@include stack-spacing(0);
}
}
&-list {
@include stack-spacing(component);
}
.teaserList {
@include stack-spacing(0);
}
> .ctaInset {
@include stack-spacing(component);
}
&-subsection {
@include stack-spacing(section);
&-title {
@extend %sectionTitle--subsection;
}
}
&-subsection &-items {
margin-top: var(--gg);
}
&.is-large &-items {
@include grid-flowbox($max-columns: 2);
}
&.is-side-by-side &-items {
display: block;
%teaserSection-item + %teaserSection-item {
@include stack-spacing(component);
}
}
&.has-backdrop:last-child {
margin-bottom: 0;
}
&[data-theme="dark"] {
.teaserCard[data-theme="dark"] {
--backdrop-color: #{$_GRAY-800};
}
.teaserCard:not([data-theme="dark"]) {
@include apply-theme(default);
}
}
// Full-width: Single item
&.is-full-width &-item:only-child {
grid-column: 1 / -1;
@include only-on-desktop(){
width: get-columns-width(8);
justify-self: center;
}
}
// Full-width: Two items
&.is-full-width &-item:first-child:nth-last-child(2) {
grid-column: 1 / -1;
@include only-on-desktop(){
grid-row: 1 / span 1;
width: get-columns-width(5);
margin-left: get-columns-indent(1);
justify-self: start;
}
}
&.is-full-width &-item:last-child:nth-child(2) {
grid-column: 1 / -1;
@include only-on-desktop(){
grid-row: 1 / span 1;
width: get-columns-width(5);
margin-right: get-columns-indent(1);
justify-self: end;
}
}
@include only-on-desktop(){
// Center less than 3 items
&:not(.is-full-width):not(.is-large):not(.is-side-by-side):has(&-item:only-child) &-items {
transform: translateX(50%);
}
&:not(.is-full-width):not(.is-large):not(.is-side-by-side):has(&-item:only-child) &-item {
transform: translateX(-50%);
}
&:not(.is-full-width):not(.is-large):not(.is-side-by-side):has(&-item:first-child + &-item:last-child) &-items {
transform: translateX(calc(50% - .5 * var(--gg)));
}
&:not(.is-full-width):not(.is-large):not(.is-side-by-side):has(&-item:first-child + &-item:last-child) &-item {
transform: translateX(-100%);
}
&-subsection &-items,
&-subsection &-item {
transform: none !important;
}
}
// Automatically flip side-by-side teaser cards
&-item:nth-child(2n+1):has(.teaserCard.is-side-by-side:not(.is-flipped)) + &-item .teaserCard.is-side-by-side {
@extend %teaserCard--side-by-side--flipped;
}
}
%teaserSection--with-backdrop {
.teaserCard {
--backdrop-color: #{$_page-color};
background-color: var(--backdrop-color);
}
}
$teaserSection_max-columns: 3 !default;
%teaserSection {
@include stack-spacing(section);
&-title {
@extend %sectionTitle;
@include stack-spacing(0);
}
&-description {
&:not(:first-child) {
@include stack-spacing(component);
}
}
&-items {
@include grid-flowbox($max-columns: $teaserSection_max-columns);
&:not(:first-child) {
@include stack-spacing(component);
}
}
&-item {
& > *:first-child {
@include stack-spacing(0);
}
}
@include only-on-desktop(){
&-description {
width: get-columns-width(8);
margin-left: auto;
margin-right: auto;
text-align: center;
}
}
}
%teaserSection--with-backdrop {
@include full-width-backdrop($set-padding: true);
.teaserCard {
background-color: $_page-color;
}
}
.teaserSection {
@extend %teaserSection;
&-title {
@extend %teaserSection-title;
}
&-description {
@extend %teaserSection-description;
}
&-items {
@extend %teaserSection-items;
}
&-item {
@extend %teaserSection-item;
}
&.has-backdrop {
@extend %teaserSection--with-backdrop;
}
}