Molecule

Teaser D

            
              <a href="teaser-d-link" class="teaser-d 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-body">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque.
    </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/_teaser/landungsbruecken_neu.png" alt="img-alt">
  </div>
</div>

            
          

.teaser-d--reverse

            
              <a href="teaser-d-link" class="teaser-d has-padding-m 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-body">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque.
    </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/_teaser/landungsbruecken_neu.png" alt="img-alt">
  </div>
</div>

            
          

.teaser-d--vertical

            
              <a href="teaser-d-link" class="teaser-d has-padding-m teaser-d--vertical"></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-body">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque.
    </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/_logo/markforged-logo.png" alt="img-alt">
  </div>
</div>

            
          

.has-color-blue.has-color-grey.has-color-orange

            
              <a href="teaser-d-link" class="teaser-d has-padding-m 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-body">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque.
    </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 style="margin: 40px 0"></div><a href="teaser-d-link" class="teaser-d has-padding-m 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-body">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque.
    </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/_teaser/landungsbruecken_neu.png" alt="img-alt">
  </div>
</div>
<div style="margin: 40px 0"></div><a href="teaser-d-link" class="teaser-d has-padding-m 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-body">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque.
    </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>

            
          

no image, default, .has-full-image

            
              <a href="teaser-d-link" class="teaser-d"></a>
<div class="teaser-col col-md-12">
  <div class="teaser-col-wrapper">
    <div class="teaser-header">
      <h3>
        Headline
      </h3>
    </div>
    <div class="teaser-body">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque.
    </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 style="margin: 40px 0"></div><a href="teaser-d-link" class="teaser-d 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-body">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque.
    </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/_teaser/landungsbruecken_neu.png" alt="img-alt">
  </div>
</div>
<div style="margin: 40px 0"></div><a href="teaser-d-link" class="teaser-d 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-body">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque.
    </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/_teaser/landungsbruecken_neu.png" alt="img-alt">
  </div>
</div>

            
          

.has-padding-s.has-padding-m.has-padding-l

            
              <a href="teaser-d-link" class="teaser-d has-padding-s 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-body">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque.
    </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 style="margin: 40px 0"></div><a href="teaser-d-link" class="teaser-d has-padding-m 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-body">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque.
    </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 style="margin: 40px 0"></div><a href="teaser-d-link" class="teaser-d has-padding-l 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-body">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque.
    </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>