Organism

Section Teaser Block

            
              <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 col-md-6 teaser-d__image-col">
          <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 col-md-6 teaser-d__image-col">
          <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 col-md-6 teaser-d__image-col">
          <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 col-md-6 teaser-d__image-col">
          <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 col-md-6 teaser-d__image-col">
          <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 col-md-6 teaser-d__image-col">
          <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 col-md-6 teaser-d__image-col">
          <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 col-md-6 teaser-d__image-col">
          <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 col-md-6 teaser-d__image-col">
          <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 col-md-6 teaser-d__image-col">
          <div class="teaser-image">
            <img src="/images/_teaser/landungsbruecken_neu.png" alt="img-alt">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>