No notes defined.
<section class="doc-section">
<h2 class="doc-section-title">Default Teaser Cards</h2>
<section class="doc-variant">
<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>
<section class="doc-section">
<h2 class="doc-section-title">Default Teaser Cards with Backdrop</h2>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>.has-backdrop</li>
</ul>
</div>
<section class="doc-variant">
<div class="teaserSection has-backdrop">
<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>
<div class="teaserSection has-backdrop" data-theme="dark">
<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>
<section class="doc-section">
<h2 class="doc-section-title">Teaser Cards with Product Mockups</h2>
<section class="doc-variant">
<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 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" 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 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">
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 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">
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>
<section class="doc-section">
<h2 class="doc-section-title">Text-only Teaser Cards</h2>
<section class="doc-variant">
<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>
<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" 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" 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" 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">
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" data-theme="accent">
<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>
<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" 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" 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" 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">
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" data-theme="dark">
<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>
<section class="doc-section">
<h2 class="doc-section-title">Large Teaser Cards</h2>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-large</li>
</ul>
</div>
<section class="doc-variant">
<div class="teaserSection is-large">
<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 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">
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 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" 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">With Contact Cards</h2>
<section class="doc-variant">
<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="contactCard">
<div class="contactCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</div>
<div class="contactCard-content">
<h3 class="contactCard-heading">
<span class="kicker">
Thema
</span>
<span class="contactCard-title">Ich bin der Titel</span>
</h3>
<div class="contactCard-address">
PSI Software SG<br />Dircksenstraße 42-44<br />10178 Berlin
</div>
<div class="contactCard-contactlinks">
<div class="contactLink" data-type="mail">
<span class="contactLink-title">E-Mail</span> <a class="contactLink-link" href="mailto:mail@domain.com"><span class="contactLink-label">mail@domain.com</span></a>
</div>
<div class="contactLink" data-type="phone">
<span class="contactLink-title">Telefon</span> <a class="contactLink-link" href="tel:+49123456789"><span class="contactLink-label">+49 123 456789</span></a>
</div>
<div class="contactLink" data-type="mobile">
<span class="contactLink-title">Telefon</span> <a class="contactLink-link" href="tel:+49123456789"><span class="contactLink-label">+49 123 456789</span></a>
</div>
<div class="contactLink" data-type="linkedin">
<span class="contactLink-title">LinkedIn</span> <a class="contactLink-link" href="https://de.linkedin.com/company/psi-se"><span class="contactLink-label">@psi-se</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="teaserSection-item">
<div class="contactCard">
<div class="contactCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</div>
<div class="contactCard-content">
<h3 class="contactCard-heading">
<span class="kicker">
Thema
</span>
<span class="contactCard-title">Ich bin der Titel</span>
</h3>
<div class="contactCard-address">
PSI Information Technology (Shanghai) Co., Ltd.<br />1212 South Building, Raycom InfoTech Park Tower C<br />KeXueYuanNanLu No. 2, Haidian District<br />Peking, 100190<br />V.R. China
</div>
<div class="contactCard-contactlinks">
<div class="contactLink" data-type="mail">
<span class="contactLink-title">E-Mail</span> <a class="contactLink-link" href="mailto:mail@domain.com"><span class="contactLink-label">mail@domain.com</span></a>
</div>
<div class="contactLink" data-type="phone">
<span class="contactLink-title">Telefon</span> <a class="contactLink-link" href="tel:+49123456789"><span class="contactLink-label">+49 123 456789</span></a>
</div>
<div class="contactLink" data-type="mobile">
<span class="contactLink-title">Telefon</span> <a class="contactLink-link" href="tel:+49123456789"><span class="contactLink-label">+49 123 456789</span></a>
</div>
<div class="contactLink" data-type="linkedin">
<span class="contactLink-title">LinkedIn</span> <a class="contactLink-link" href="https://de.linkedin.com/company/psi-se"><span class="contactLink-label">@psi-se</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="teaserSection-item">
<div class="contactCard">
<div class="contactCard-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</div>
<div class="contactCard-content">
<h3 class="contactCard-heading">
<span class="kicker">
Thema
</span>
<span class="contactCard-title">Ich bin der Titel</span>
</h3>
<div class="contactCard-address">
PSI Software SG<br />Dircksenstraße 42-44<br />10178 Berlin
</div>
<div class="contactCard-contactlinks">
<div class="contactLink" data-type="mail">
<span class="contactLink-title">E-Mail</span> <a class="contactLink-link" href="mailto:mail@domain.com"><span class="contactLink-label">mail@domain.com</span></a>
</div>
</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">Side-by-side Teaser Card</h2>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-side-by-side</li>
</ul>
</div>
<section class="doc-variant">
<div class="teaserSection is-side-by-side">
<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 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" 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 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" 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>
</section>
</section>
<section class="doc-section">
<h2 class="doc-section-title">With Teaser List</h2>
<section class="doc-variant">
<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-list">
<div class="teaserList">
<div class="teaserList-list">
<div class="teaserList-item">
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
</div>
</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">With Subsections</h2>
<section class="doc-variant">
<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-subsection">
<h3 class="teaserSection-subsection-title">Ich bin eine neuer Abschnitt</h3>
<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>
<div class="teaserSection-subsection">
<h3 class="teaserSection-subsection-title">Ich bin eine neuer Abschnitt</h3>
<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>
</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": [
{
"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": "Default Teaser Cards with Backdrop",
"modifiers": ".has-backdrop",
"variants": [
{
"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"
}
},
"has-backdrop": true
},
{
"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"
}
},
"theme": "dark"
}
]
}
]
},
{
"title": "Teaser Cards with Product Mockups",
"variants": [
{
"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": 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": "#"
}
}
}
}
},
{
"teasercard": {
"image": null,
"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": "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,
"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": "#"
}
}
},
"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"
}
}
}
}
],
"cta": {
"modifier": "is-secondary",
"label": "Alle anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
}
}
}
}
]
},
{
"title": "Text-only Teaser Cards",
"variants": [
{
"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": 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"
}
}
}
}
],
"cta": {
"modifier": "is-secondary",
"label": "Alle anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
}
},
"modifier": "is-full-width"
},
{
"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": 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"
}
},
{
"teasercard": {
"theme": "accent",
"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": {
"theme": "accent",
"image": null,
"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"
}
},
"modifier": "is-full-width"
},
{
"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": 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": {
"theme": "dark",
"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": {
"theme": "dark",
"image": null,
"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"
}
},
"modifier": "is-full-width"
}
]
}
]
},
{
"title": "Large Teaser Cards",
"modifiers": "is-large",
"variants": [
{
"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": {
"modifier": "is-large",
"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": {
"modifier": "is-large",
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung"
},
"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"
}
}
}
}
],
"cta": {
"modifier": "is-secondary",
"label": "Alle anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
}
},
"modifier": "is-large"
}
}
]
},
{
"title": "With Contact Cards",
"variants": [
{
"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": [
{
"contactcard": {
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"address": "PSI Software SG<br/>Dircksenstraße 42-44<br/>10178 Berlin",
"contactlinks": [
{
"title": "E-Mail",
"label": "mail@domain.com",
"url": "mailto:mail@domain.com",
"type": "mail"
},
{
"title": "Telefon",
"label": "+49 123 456789",
"url": "tel:+49123456789",
"type": "phone"
},
{
"title": "Telefon",
"label": "+49 123 456789",
"url": "tel:+49123456789",
"type": "mobile"
},
{
"title": "LinkedIn",
"label": "@psi-se",
"url": "https://de.linkedin.com/company/psi-se",
"type": "linkedin"
}
]
}
},
{
"contactcard": {
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"address": "PSI Information Technology (Shanghai) Co., Ltd.<br/>1212 South Building, Raycom InfoTech Park Tower C<br/>KeXueYuanNanLu No. 2, Haidian District<br/>Peking, 100190<br/>V.R. China",
"contactlinks": [
{
"title": "E-Mail",
"label": "mail@domain.com",
"url": "mailto:mail@domain.com",
"type": "mail"
},
{
"title": "Telefon",
"label": "+49 123 456789",
"url": "tel:+49123456789",
"type": "phone"
},
{
"title": "Telefon",
"label": "+49 123 456789",
"url": "tel:+49123456789",
"type": "mobile"
},
{
"title": "LinkedIn",
"label": "@psi-se",
"url": "https://de.linkedin.com/company/psi-se",
"type": "linkedin"
}
]
}
},
{
"contactcard": {
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"address": "PSI Software SG<br/>Dircksenstraße 42-44<br/>10178 Berlin",
"contactlinks": [
{
"title": "E-Mail",
"label": "mail@domain.com",
"url": "mailto:mail@domain.com",
"type": "mail"
}
]
}
}
],
"cta": {
"modifier": "is-secondary",
"label": "Alle anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
}
}
}
}
]
},
{
"title": "Side-by-side Teaser Card",
"modifiers": "is-side-by-side",
"variants": [
{
"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",
"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"
}
},
{
"teasercard": {
"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"
}
}
],
"cta": null,
"modifier": "is-side-by-side"
}
}
]
},
{
"title": "With Teaser List",
"variants": [
{
"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": null,
"cta": {
"modifier": "is-secondary",
"label": "Alle anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
}
},
"teaserlist": {
"title": null,
"description": null,
"teaserinsets": [
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"cta": {
"url": "#",
"label": "Weiter zum Artikel"
}
},
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"cta": {
"url": "#",
"label": "Weiter zum Artikel"
}
},
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"cta": {
"url": "#",
"label": "Weiter zum Artikel"
}
}
]
}
}
}
]
},
{
"title": "With Subsections",
"variants": [
{
"samples-with-subsections": {
"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": null,
"cta": {
"modifier": "is-secondary",
"label": "Alle anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
}
},
"sections": [
{
"title": "Ich bin eine neuer Abschnitt",
"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"
}
}
}
}
],
"cta": {
"modifier": "is-secondary",
"label": "Alle anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
}
}
},
{
"title": "Ich bin eine neuer Abschnitt",
"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"
}
}
}
}
],
"cta": {
"modifier": "is-secondary",
"label": "Alle anzeigen",
"icon": {
"position": "right",
"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;
}
}