Organism
<section class="section-teaser-block has-padding-s">
<div class="container">
<div class="row">
<div class="col-md-12">
<a href="teaser-d-link" class="teaser-d"></a>
<div class="teaser-col col-md-6 teaser-d__text-col">
<div class="teaser-col-wrapper">
<div class="teaser-header">
<h3>
Headline
</h3>
</div>
<div class="teaser-footer">
<span class="btn btn-outline-primary btn--icon-right"><span>Label</span> <svg class="icon" viewbox="0 0 32 32">
<use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></span>
</div>
</div>
</div>
<div class="teaser-col teaser-d__image-col col-md-6">
<div class="teaser-image">
<img src="/images/placeholder-ratio.jpg" alt="img-alt">
</div>
</div>
</div>
</div>
</div>
</section>
.teaser-d--reverse
<section class="section-teaser-block has-padding-s">
<div class="container">
<div class="row">
<div class="col-md-12">
<a href="teaser-d-link" class="teaser-d teaser-d--reverse"></a>
<div class="teaser-col col-md-6 teaser-d__text-col">
<div class="teaser-col-wrapper">
<div class="teaser-header">
<h3>
Headline
</h3>
</div>
<div class="teaser-footer">
<span class="btn btn-outline-primary btn--icon-right"><span>Label</span> <svg class="icon" viewbox="0 0 32 32">
<use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></span>
</div>
</div>
</div>
<div class="teaser-col teaser-d__image-col col-md-6">
<div class="teaser-image">
<img src="/images/placeholder-ratio.jpg" alt="img-alt">
</div>
</div>
</div>
</div>
</div>
</section>
.has-padding-s.has-padding-m.has-padding-l
<section class="section-teaser-block has-color-blue">
<div class="container">
<div class="row">
<div class="col-md-12">
<a href="teaser-d-link" class="teaser-d has-color-blue has-padding-s"></a>
<div class="teaser-col col-md-6 teaser-d__text-col">
<div class="teaser-col-wrapper">
<div class="teaser-header">
<h3>
Headline
</h3>
</div>
<div class="teaser-footer">
<span class="btn btn-outline-white btn--icon-right"><span>Label</span> <svg class="icon" viewbox="0 0 32 32">
<use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></span>
</div>
</div>
</div>
<div class="teaser-col teaser-d__image-col col-md-6">
<div class="teaser-image">
<img src="/images/placeholder-ratio.jpg" alt="img-alt">
</div>
</div>
</div>
</div>
</div>
</section>
<div style="margin: 40px 0;"></div>
<section class="section-teaser-block has-color-blue">
<div class="container">
<div class="row">
<div class="col-md-12">
<a href="teaser-d-link" class="teaser-d has-color-blue has-padding-m"></a>
<div class="teaser-col col-md-6 teaser-d__text-col">
<div class="teaser-col-wrapper">
<div class="teaser-header">
<h3>
Headline
</h3>
</div>
<div class="teaser-footer">
<span class="btn btn-outline-white btn--icon-right"><span>Label</span> <svg class="icon" viewbox="0 0 32 32">
<use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></span>
</div>
</div>
</div>
<div class="teaser-col teaser-d__image-col col-md-6">
<div class="teaser-image">
<img src="/images/placeholder-ratio.jpg" alt="img-alt">
</div>
</div>
</div>
</div>
</div>
</section>
<div style="margin: 40px 0;"></div>
<section class="section-teaser-block has-color-blue">
<div class="container">
<div class="row">
<div class="col-md-12">
<a href="teaser-d-link" class="teaser-d has-color-blue has-padding-l"></a>
<div class="teaser-col col-md-6 teaser-d__text-col">
<div class="teaser-col-wrapper">
<div class="teaser-header">
<h3>
Headline
</h3>
</div>
<div class="teaser-footer">
<span class="btn btn-outline-white btn--icon-right"><span>Label</span> <svg class="icon" viewbox="0 0 32 32">
<use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></span>
</div>
</div>
</div>
<div class="teaser-col teaser-d__image-col col-md-6">
<div class="teaser-image">
<img src="/images/placeholder-ratio.jpg" alt="img-alt">
</div>
</div>
</div>
</div>
</div>
</section>
.has-color-blue.has-color-grey.has-color-orange
<section class="section-teaser-block has-color-blue has-padding-s">
<div class="container">
<div class="row">
<div class="col-md-12">
<a href="teaser-d-link" class="teaser-d has-color-blue"></a>
<div class="teaser-col col-md-6 teaser-d__text-col">
<div class="teaser-col-wrapper">
<div class="teaser-header">
<h3>
Headline
</h3>
</div>
<div class="teaser-footer">
<span class="btn btn-outline-white btn--icon-right"><span>Label</span> <svg class="icon" viewbox="0 0 32 32">
<use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></span>
</div>
</div>
</div>
<div class="teaser-col teaser-d__image-col col-md-6">
<div class="teaser-image">
<img src="/images/placeholder-ratio.jpg" alt="img-alt">
</div>
</div>
</div>
</div>
</div>
</section>
<div style="margin: 40px 0;"></div>
<section class="section-teaser-block has-color-grey has-padding-s">
<div class="container">
<div class="row">
<div class="col-md-12">
<a href="teaser-d-link" class="teaser-d has-color-grey"></a>
<div class="teaser-col col-md-6 teaser-d__text-col">
<div class="teaser-col-wrapper">
<div class="teaser-header">
<h3>
Headline
</h3>
</div>
<div class="teaser-footer">
<span class="btn btn-outline-primary btn--icon-right"><span>Label</span> <svg class="icon" viewbox="0 0 32 32">
<use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></span>
</div>
</div>
</div>
<div class="teaser-col teaser-d__image-col col-md-6">
<div class="teaser-image">
<img src="/images/placeholder-ratio.jpg" alt="img-alt">
</div>
</div>
</div>
</div>
</div>
</section>
<div style="margin: 40px 0;"></div>
<section class="section-teaser-block has-color-orange has-padding-s">
<div class="container">
<div class="row">
<div class="col-md-12">
<a href="teaser-d-link" class="teaser-d has-color-orange"></a>
<div class="teaser-col col-md-6 teaser-d__text-col">
<div class="teaser-col-wrapper">
<div class="teaser-header">
<h3>
Headline
</h3>
</div>
<div class="teaser-footer">
<span class="btn btn-outline-white btn--icon-right"><span>Label</span> <svg class="icon" viewbox="0 0 32 32">
<use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></span>
</div>
</div>
</div>
<div class="teaser-col teaser-d__image-col col-md-6">
<div class="teaser-image">
<img src="/images/placeholder-ratio.jpg" alt="img-alt">
</div>
</div>
</div>
</div>
</div>
</section>
default, .has-full-image
<section class="section-teaser-block has-color-blue">
<div class="container">
<div class="row">
<div class="col-md-12">
<a href="teaser-d-link" class="teaser-d has-color-blue has-padding-s"></a>
<div class="teaser-col col-md-6 teaser-d__text-col">
<div class="teaser-col-wrapper">
<div class="teaser-header">
<h3>
Headline
</h3>
</div>
<div class="teaser-footer">
<span class="btn btn-outline-white btn--icon-right"><span>Label</span> <svg class="icon" viewbox="0 0 32 32">
<use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></span>
</div>
</div>
</div>
<div class="teaser-col teaser-d__image-col col-md-6">
<div class="teaser-image">
<img src="/images/_teaser/landungsbruecken_neu.png" alt="img-alt">
</div>
</div>
</div>
</div>
</div>
</section>
<div style="margin: 40px 0;"></div>
<section class="section-teaser-block has-color-blue">
<div class="container">
<div class="row">
<div class="col-md-12">
<a href="teaser-d-link" class="teaser-d has-color-blue has-padding-s has-full-image"></a>
<div class="teaser-col col-md-6 teaser-d__text-col">
<div class="teaser-col-wrapper">
<div class="teaser-header">
<h3>
Headline
</h3>
</div>
<div class="teaser-footer">
<span class="btn btn-outline-white btn--icon-right"><span>Label</span> <svg class="icon" viewbox="0 0 32 32">
<use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></span>
</div>
</div>
</div>
<div class="teaser-col teaser-d__image-col col-md-6">
<div class="teaser-image">
<img src="/images/_teaser/landungsbruecken_neu.png" alt="img-alt">
</div>
</div>
</div>
</div>
</div>
</section>