Teaser für redaktionelle Inhalte z.B. News (Banken-Detail), Blogbeiträge o.Ä..
Im Breakpoint xs (Smartphone) wird der Copy-Text ausgeblendet.
<div class="teaser teaser-image-text typ-a">
<div class="teaser-image">
<a href="#">
<img src="/assets/toolkit/images/placeholder-ratio.jpg" width="100%" height="100%" />
</a>
</div>
<div class="right-wrapper">
<div class="teaser-body">
<span>Category</span>
<a href="#"><h4>Headline</h4></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="teaser-footer">
</div>
</div>
</div>
Teaser für redaktionelle Inhalte z.B. Angebote (Banken-Detail).
Im Breakpoint xs (Smartphone) wird der Copy-Text NICHT ausgeblendet und nur das Bild und die Headline gezeigt.
<div class="teaser teaser-image-text typ-b">
<div class="teaser-image">
<a href="#">
<img src="/assets/toolkit/images/placeholder-ratio.jpg" width="100%" height="100%" />
</a>
</div>
<div class="right-wrapper">
<div class="teaser-body">
<span>Category</span>
<a href="#"><h4>Headline</h4></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="teaser-footer">
</div>
</div>
</div>
Teaser für redaktionelle Inhalte z.B. Angebote (Banken-Detail).
Im Breakpoint xs (Smartphone) wird der Copy-Text NICHT ausgeblendet und nur das Bild und die Headline gezeigt.
<div class="teaser teaser-image-text typ-c">
<div class="teaser-image">
<a href="#">
<img src="/assets/toolkit/images/placeholder-ratio.jpg" width="100%" height="100%" />
</a>
</div>
<div class="right-wrapper">
<div class="teaser-body">
<span>Category</span>
<a href="#"><h4>Headline</h4></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="teaser-footer">
</div>
</div>
</div>
Teaser für redaktionelle Inhalte z.B. Angebote (Banken-Detail).
Im Breakpoint xs (Smartphone) wird der Copy-Text NICHT ausgeblendet und nur das Bild und die Headline gezeigt.
<div class="teaser teaser-image-text typ-d">
<div class="teaser-image">
<a href="#">
<img src="/assets/toolkit/images/placeholder-ratio.jpg" width="100%" height="100%" />
</a>
</div>
<div class="right-wrapper">
<div class="teaser-body">
<span>Category</span>
<a href="#"><h4>Headline</h4></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="teaser-footer">
</div>
</div>
</div>