Teaser Icon

Default

Headline

<div class="teaser-icon "> <span class="icon-wrapper"> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#ansprechpartner"></use> </svg> </span> <div class="content-container"> <h4 class="teaser-icon__headline">Headline</h4> </div> </div>

Image Small

Headline

<div class="teaser-icon teaser-icon--small"> <span class="image-wrapper"> <img class="teaser-icon-image" src="/images/placeholder-content-image.jpg" /> </span> <div class="content-container"> <h4 class="teaser-icon__headline">Headline</h4> </div> </div>

Image

Headline

<div class="teaser-icon "> <span class="image-wrapper"> <img class="teaser-icon-image" src="/images/placeholder-content-image.jpg" /> </span> <div class="content-container"> <h4 class="teaser-icon__headline">Headline</h4> </div> </div>

Headline

link
<div class="teaser-icon "> <a href="link-url" class="icon-wrapper"> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#ansprechpartner"></use> </svg> </a> <div class="content-container"> <h4 class="teaser-icon__headline">Headline</h4> <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>

Small

Headline

<div class="teaser-icon teaser-icon--small"> <span class="icon-wrapper"> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#ansprechpartner"></use> </svg> </span> <div class="content-container"> <h4 class="teaser-icon__headline">Headline</h4> </div> </div>

Text

Headline

Text

<div class="teaser-icon "> <span class="icon-wrapper"> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#ansprechpartner"></use> </svg> </span> <div class="content-container"> <h4 class="teaser-icon__headline">Headline</h4> <p>Text</p> </div> </div>