Teaser

Icon Text Teaser

  • deprecated

Headline

Pork belly vice lo-fi forage banh mi cred

Link
<div class="teaser glyph-text"> <div class="content-container"> <span class="icon icon-ansprechpartner"> <!-- --> </span> <h4>Headline</h4> <p>Pork belly vice lo-fi forage banh mi cred</p> <a class="link-icon right" href="#"> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#arrow-right"></use> </svg> <span class="link-label">Link</span> </a> </div> </div>

Image Teaser

Headline

<div class="image-teaser" style="background-image: url('images/placeholder-content-image.jpg')"> <div class="overlay"> <h4>Headline</h4> </div> </div>

Image Text Teaser

headline

Text

Link
<div class="teaser image-text"> <div class="row"> <div class="col-xs-2"> <img src="/images/placeholder-content-image.jpg" width="100%" /> </div> <div class="col-xs-10"> <h4>headline</h4> <p>Text</p> <a class="link-icon right" href="#"> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#arrow-right"></use> </svg> <span class="link-label">Link</span> </a> </div> </div> </div>

Teaser Color1

<a href="#" class="teaser color color1 invert"> <div class="content"> <h2>Headline</h2> <div class="hidden-xs"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="arrow"> <span class="icon icon-arrow-right"><!-- --></span> </div> </a>

Teaser Color2

<a href="#" class="teaser color color2 invert"> <div class="content"> <h2>Headline</h2> <div class="hidden-xs"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="arrow"> <span class="icon icon-arrow-right"><!-- --></span> </div> </a>

Teaser Color3

<a href="#" class="teaser color color3 invert"> <div class="content"> <h2>Headline</h2> <div class="hidden-xs"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="arrow"> <span class="icon icon-arrow-right"><!-- --></span> </div> </a>

Teaser Color4

<a href="#" class="teaser color color4 invert"> <div class="content"> <h2>Headline</h2> <div class="hidden-xs"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div class="arrow"> <span class="icon icon-arrow-right"><!-- --></span> </div> </a>