Widget Teaser

Widget Teaser no text

Widget Teaser ohne Text

<a href="" class="widget-teaser has-padding" style="background-image: url(/images/placeholder-content-image.jpg)"> <div class="widget-teaser__header"> <h2 class="widget-teaser__headline">Headline</h2> </div> <div class="widget-teaser__footer"> <span class="btn btn-primary" > Button </span> </div> </a>

Widget Teaser default

widget-teaser mit allen Elementen

<a href="" class="widget-teaser has-padding" style="background-image: url(/images/placeholder-content-image.jpg)"> <div class="widget-teaser__header"> <h2 class="widget-teaser__headline">Headline</h2> <span class="widget-teaser__subline"> Subline </span> </div> <div class="widget-teaser__body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor </div> <div class="widget-teaser__footer"> <span class="btn btn-primary" > Button </span> </div> </a>

Widget Teaser overlay invert

widget-teaser mit abgedunkeltem Bild und invertierter Headline

<a href="" class="widget-teaser is-invert " style="background-image: url(/images/placeholder-content-image.jpg)"> <div class="widget-teaser__overlay"> <div class="widget-teaser__header"> <h2 class="widget-teaser__headline">Headline</h2> <span class="widget-teaser__subline"> Subline </span> </div> <div class="widget-teaser__body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor </div> <div class="widget-teaser__footer"> <span class="btn btn-primary" > Button </span> </div> </div> </a>

Widget Teaser no subline

widget-teaser ohne eine Subline

<a href="" class="widget-teaser has-padding" style="background-image: url(/images/placeholder-content-image.jpg)"> <div class="widget-teaser__header"> <h2 class="widget-teaser__headline">Headline</h2> </div> <div class="widget-teaser__body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor </div> <div class="widget-teaser__footer"> <span class="btn btn-primary" > Button </span> </div> </a>

widget-teaser mit einem Link als Subline

<a href="" class="widget-teaser has-padding" style="background-image: url(/images/placeholder-content-image.jpg)"> <div class="widget-teaser__header"> <h2 class="widget-teaser__headline">Headline</h2> <span class="widget-teaser__subline is-link"> Subline <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#arrow-right"></use> </svg> </span> </div> <div class="widget-teaser__body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor </div> </a>