Organism

Section Teaser Row

            
              <section class="section-teaser-row has-padding-s">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-lg-4">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-4">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-4">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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>
  </div>
</section>

            
          

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

Show code
            
              <section class="section-teaser-row has-color-blue has-padding-m">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-lg-3">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-3">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-3">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-3">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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>
    <div class="row">
      <div class="col-md-10 offset-md-1">
        <svg class="section-teaser-row__bracket hidden-sm-down" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewbox="0 0 837.7 74" style="enable-background:new 0 0 837.7 74;" xml:space="preserve">
        <path class="st0" d="M781.1,18.2V25c0,4.5-0.3,6-1.6,7.4c-1.4,1.4-3.5,1.8-8.2,1.8H431.4c-6.5,0-9.9,2.3-12.6,7.7 c-2.6-5.4-6-7.7-12.6-7.7H66.5c-4.7,0-6.8-0.4-8.2-1.8c-1.4-1.4-1.6-2.9-1.6-7.4v-6.8H51v6.9c0,6.2,0.9,9.7,3.4,12.2 c2.4,2.4,5,3.3,12,3.3h339.8c3.5,0,6,0.8,7.5,2.3c1.4,1.4,2.4,3,2.4,5.4v4.2h5.5v-4.2c0-2.4,1-4,2.4-5.4c1.5-1.5,4-2.3,7.5-2.3 h339.8c6.9,0,9.6-0.9,12-3.3c2.5-2.5,3.4-6,3.4-12.2v-6.9C786.7,18.2,781.1,18.2,781.1,18.2z"></path></svg> <svg class="section-teaser-row__bracket hidden-md-up" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewbox="0 0 507 117.3" style="enable-background:new 0 0 507 117.3;" xml:space="preserve">
        <g>
          <path class="st0" d="M491.8,42.4v3.5c0,9.7-0.5,13-3.5,15.9c-3,3-7.6,3.8-17.6,3.8H280.5c-14,0-21.3,4.9-27,16.5 c-5.7-11.6-13-16.5-27-16.5H36.2c-10,0-14.6-0.8-17.6-3.8c-3-3-3.5-6.2-3.5-15.9v-3.5H3v3.8C3,59.4,4.9,67,10.3,72.4 c5.1,5.1,10.8,7,25.7,7h190.2c7.6,0,13,1.6,16.2,4.9c3,3,5.1,6.5,5.1,11.6v4.9h5.9h0h5.9v-4.9c0-5.1,2.2-8.6,5.1-11.6 c3.2-3.2,8.6-4.9,16.2-4.9H471c14.9,0,20.5-1.9,25.7-7c5.4-5.4,7.3-13,7.3-26.2v-3.8H491.8z"></path>
          <path class="st0" d="M491.8,42.4v3.5c0,9.7-0.5,13-3.5,15.9c-3,3-7.6,3.8-17.6,3.8H280.5c-14,0-21.3,4.9-27,16.5 c-5.7-11.6-13-16.5-27-16.5H36.2c-10,0-14.6-0.8-17.6-3.8c-3-3-3.5-6.2-3.5-15.9v-3.5H3v3.8C3,59.4,4.9,67,10.3,72.4 c5.1,5.1,10.8,7,25.7,7h190.2c7.6,0,13,1.6,16.2,4.9c3,3,5.1,6.5,5.1,11.6v4.9h5.9h0h5.9v-4.9c0-5.1,2.2-8.6,5.1-11.6 c3.2-3.2,8.6-4.9,16.2-4.9H471c14.9,0,20.5-1.9,25.7-7c5.4-5.4,7.3-13,7.3-26.2v-3.8H491.8z"></path>
        </g></svg>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <h3 class="text-center section-teaser-row__bracket--headline">
          Lorem ipsum dolor
        </h3>
      </div>
    </div>
  </div>
</section>
<div style="margin: 40px 0"></div>
<section class="section-teaser-row has-color-grey has-padding-m">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-lg-3">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-3">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-3">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-3">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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>
    <div class="row">
      <div class="col-md-10 offset-md-1">
        <svg class="section-teaser-row__bracket hidden-sm-down" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewbox="0 0 837.7 74" style="enable-background:new 0 0 837.7 74;" xml:space="preserve">
        <path class="st0" d="M781.1,18.2V25c0,4.5-0.3,6-1.6,7.4c-1.4,1.4-3.5,1.8-8.2,1.8H431.4c-6.5,0-9.9,2.3-12.6,7.7 c-2.6-5.4-6-7.7-12.6-7.7H66.5c-4.7,0-6.8-0.4-8.2-1.8c-1.4-1.4-1.6-2.9-1.6-7.4v-6.8H51v6.9c0,6.2,0.9,9.7,3.4,12.2 c2.4,2.4,5,3.3,12,3.3h339.8c3.5,0,6,0.8,7.5,2.3c1.4,1.4,2.4,3,2.4,5.4v4.2h5.5v-4.2c0-2.4,1-4,2.4-5.4c1.5-1.5,4-2.3,7.5-2.3 h339.8c6.9,0,9.6-0.9,12-3.3c2.5-2.5,3.4-6,3.4-12.2v-6.9C786.7,18.2,781.1,18.2,781.1,18.2z"></path></svg> <svg class="section-teaser-row__bracket hidden-md-up" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewbox="0 0 507 117.3" style="enable-background:new 0 0 507 117.3;" xml:space="preserve">
        <g>
          <path class="st0" d="M491.8,42.4v3.5c0,9.7-0.5,13-3.5,15.9c-3,3-7.6,3.8-17.6,3.8H280.5c-14,0-21.3,4.9-27,16.5 c-5.7-11.6-13-16.5-27-16.5H36.2c-10,0-14.6-0.8-17.6-3.8c-3-3-3.5-6.2-3.5-15.9v-3.5H3v3.8C3,59.4,4.9,67,10.3,72.4 c5.1,5.1,10.8,7,25.7,7h190.2c7.6,0,13,1.6,16.2,4.9c3,3,5.1,6.5,5.1,11.6v4.9h5.9h0h5.9v-4.9c0-5.1,2.2-8.6,5.1-11.6 c3.2-3.2,8.6-4.9,16.2-4.9H471c14.9,0,20.5-1.9,25.7-7c5.4-5.4,7.3-13,7.3-26.2v-3.8H491.8z"></path>
          <path class="st0" d="M491.8,42.4v3.5c0,9.7-0.5,13-3.5,15.9c-3,3-7.6,3.8-17.6,3.8H280.5c-14,0-21.3,4.9-27,16.5 c-5.7-11.6-13-16.5-27-16.5H36.2c-10,0-14.6-0.8-17.6-3.8c-3-3-3.5-6.2-3.5-15.9v-3.5H3v3.8C3,59.4,4.9,67,10.3,72.4 c5.1,5.1,10.8,7,25.7,7h190.2c7.6,0,13,1.6,16.2,4.9c3,3,5.1,6.5,5.1,11.6v4.9h5.9h0h5.9v-4.9c0-5.1,2.2-8.6,5.1-11.6 c3.2-3.2,8.6-4.9,16.2-4.9H471c14.9,0,20.5-1.9,25.7-7c5.4-5.4,7.3-13,7.3-26.2v-3.8H491.8z"></path>
        </g></svg>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <h3 class="text-center section-teaser-row__bracket--headline">
          Lorem ipsum dolor
        </h3>
      </div>
    </div>
  </div>
</section>
<div style="margin: 40px 0"></div>
<section class="section-teaser-row has-color-orange has-padding-m">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-lg-3">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-3">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-3">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-3">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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>
    <div class="row">
      <div class="col-md-10 offset-md-1">
        <svg class="section-teaser-row__bracket hidden-sm-down" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewbox="0 0 837.7 74" style="enable-background:new 0 0 837.7 74;" xml:space="preserve">
        <path class="st0" d="M781.1,18.2V25c0,4.5-0.3,6-1.6,7.4c-1.4,1.4-3.5,1.8-8.2,1.8H431.4c-6.5,0-9.9,2.3-12.6,7.7 c-2.6-5.4-6-7.7-12.6-7.7H66.5c-4.7,0-6.8-0.4-8.2-1.8c-1.4-1.4-1.6-2.9-1.6-7.4v-6.8H51v6.9c0,6.2,0.9,9.7,3.4,12.2 c2.4,2.4,5,3.3,12,3.3h339.8c3.5,0,6,0.8,7.5,2.3c1.4,1.4,2.4,3,2.4,5.4v4.2h5.5v-4.2c0-2.4,1-4,2.4-5.4c1.5-1.5,4-2.3,7.5-2.3 h339.8c6.9,0,9.6-0.9,12-3.3c2.5-2.5,3.4-6,3.4-12.2v-6.9C786.7,18.2,781.1,18.2,781.1,18.2z"></path></svg> <svg class="section-teaser-row__bracket hidden-md-up" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewbox="0 0 507 117.3" style="enable-background:new 0 0 507 117.3;" xml:space="preserve">
        <g>
          <path class="st0" d="M491.8,42.4v3.5c0,9.7-0.5,13-3.5,15.9c-3,3-7.6,3.8-17.6,3.8H280.5c-14,0-21.3,4.9-27,16.5 c-5.7-11.6-13-16.5-27-16.5H36.2c-10,0-14.6-0.8-17.6-3.8c-3-3-3.5-6.2-3.5-15.9v-3.5H3v3.8C3,59.4,4.9,67,10.3,72.4 c5.1,5.1,10.8,7,25.7,7h190.2c7.6,0,13,1.6,16.2,4.9c3,3,5.1,6.5,5.1,11.6v4.9h5.9h0h5.9v-4.9c0-5.1,2.2-8.6,5.1-11.6 c3.2-3.2,8.6-4.9,16.2-4.9H471c14.9,0,20.5-1.9,25.7-7c5.4-5.4,7.3-13,7.3-26.2v-3.8H491.8z"></path>
          <path class="st0" d="M491.8,42.4v3.5c0,9.7-0.5,13-3.5,15.9c-3,3-7.6,3.8-17.6,3.8H280.5c-14,0-21.3,4.9-27,16.5 c-5.7-11.6-13-16.5-27-16.5H36.2c-10,0-14.6-0.8-17.6-3.8c-3-3-3.5-6.2-3.5-15.9v-3.5H3v3.8C3,59.4,4.9,67,10.3,72.4 c5.1,5.1,10.8,7,25.7,7h190.2c7.6,0,13,1.6,16.2,4.9c3,3,5.1,6.5,5.1,11.6v4.9h5.9h0h5.9v-4.9c0-5.1,2.2-8.6,5.1-11.6 c3.2-3.2,8.6-4.9,16.2-4.9H471c14.9,0,20.5-1.9,25.7-7c5.4-5.4,7.3-13,7.3-26.2v-3.8H491.8z"></path>
        </g></svg>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <h3 class="text-center section-teaser-row__bracket--headline">
          Lorem ipsum dolor
        </h3>
      </div>
    </div>
  </div>
</section>

            
          

2 columns, 3 columns, 4 columns

            
              <section class="section-teaser-row has-padding-m">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-lg-4 offset-lg-2">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-4">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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>
    <div class="row">
      <div class="col-md-10 offset-md-1">
        <svg class="section-teaser-row__bracket hidden-sm-down" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewbox="0 0 837.7 74" style="enable-background:new 0 0 837.7 74;" xml:space="preserve">
        <path class="st0" d="M781.1,18.2V25c0,4.5-0.3,6-1.6,7.4c-1.4,1.4-3.5,1.8-8.2,1.8H431.4c-6.5,0-9.9,2.3-12.6,7.7 c-2.6-5.4-6-7.7-12.6-7.7H66.5c-4.7,0-6.8-0.4-8.2-1.8c-1.4-1.4-1.6-2.9-1.6-7.4v-6.8H51v6.9c0,6.2,0.9,9.7,3.4,12.2 c2.4,2.4,5,3.3,12,3.3h339.8c3.5,0,6,0.8,7.5,2.3c1.4,1.4,2.4,3,2.4,5.4v4.2h5.5v-4.2c0-2.4,1-4,2.4-5.4c1.5-1.5,4-2.3,7.5-2.3 h339.8c6.9,0,9.6-0.9,12-3.3c2.5-2.5,3.4-6,3.4-12.2v-6.9C786.7,18.2,781.1,18.2,781.1,18.2z"></path></svg> <svg class="section-teaser-row__bracket hidden-md-up" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewbox="0 0 507 117.3" style="enable-background:new 0 0 507 117.3;" xml:space="preserve">
        <g>
          <path class="st0" d="M491.8,42.4v3.5c0,9.7-0.5,13-3.5,15.9c-3,3-7.6,3.8-17.6,3.8H280.5c-14,0-21.3,4.9-27,16.5 c-5.7-11.6-13-16.5-27-16.5H36.2c-10,0-14.6-0.8-17.6-3.8c-3-3-3.5-6.2-3.5-15.9v-3.5H3v3.8C3,59.4,4.9,67,10.3,72.4 c5.1,5.1,10.8,7,25.7,7h190.2c7.6,0,13,1.6,16.2,4.9c3,3,5.1,6.5,5.1,11.6v4.9h5.9h0h5.9v-4.9c0-5.1,2.2-8.6,5.1-11.6 c3.2-3.2,8.6-4.9,16.2-4.9H471c14.9,0,20.5-1.9,25.7-7c5.4-5.4,7.3-13,7.3-26.2v-3.8H491.8z"></path>
          <path class="st0" d="M491.8,42.4v3.5c0,9.7-0.5,13-3.5,15.9c-3,3-7.6,3.8-17.6,3.8H280.5c-14,0-21.3,4.9-27,16.5 c-5.7-11.6-13-16.5-27-16.5H36.2c-10,0-14.6-0.8-17.6-3.8c-3-3-3.5-6.2-3.5-15.9v-3.5H3v3.8C3,59.4,4.9,67,10.3,72.4 c5.1,5.1,10.8,7,25.7,7h190.2c7.6,0,13,1.6,16.2,4.9c3,3,5.1,6.5,5.1,11.6v4.9h5.9h0h5.9v-4.9c0-5.1,2.2-8.6,5.1-11.6 c3.2-3.2,8.6-4.9,16.2-4.9H471c14.9,0,20.5-1.9,25.7-7c5.4-5.4,7.3-13,7.3-26.2v-3.8H491.8z"></path>
        </g></svg>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <h3 class="text-center section-teaser-row__bracket--headline">
          Lorem ipsum dolor
        </h3>
      </div>
    </div>
  </div>
</section>
<div style="margin: 40px 0"></div>
<section class="section-teaser-row has-padding-m">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-lg-4">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-4">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-4">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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>
    <div class="row">
      <div class="col-md-10 offset-md-1">
        <svg class="section-teaser-row__bracket hidden-sm-down" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewbox="0 0 837.7 74" style="enable-background:new 0 0 837.7 74;" xml:space="preserve">
        <path class="st0" d="M781.1,18.2V25c0,4.5-0.3,6-1.6,7.4c-1.4,1.4-3.5,1.8-8.2,1.8H431.4c-6.5,0-9.9,2.3-12.6,7.7 c-2.6-5.4-6-7.7-12.6-7.7H66.5c-4.7,0-6.8-0.4-8.2-1.8c-1.4-1.4-1.6-2.9-1.6-7.4v-6.8H51v6.9c0,6.2,0.9,9.7,3.4,12.2 c2.4,2.4,5,3.3,12,3.3h339.8c3.5,0,6,0.8,7.5,2.3c1.4,1.4,2.4,3,2.4,5.4v4.2h5.5v-4.2c0-2.4,1-4,2.4-5.4c1.5-1.5,4-2.3,7.5-2.3 h339.8c6.9,0,9.6-0.9,12-3.3c2.5-2.5,3.4-6,3.4-12.2v-6.9C786.7,18.2,781.1,18.2,781.1,18.2z"></path></svg> <svg class="section-teaser-row__bracket hidden-md-up" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewbox="0 0 507 117.3" style="enable-background:new 0 0 507 117.3;" xml:space="preserve">
        <g>
          <path class="st0" d="M491.8,42.4v3.5c0,9.7-0.5,13-3.5,15.9c-3,3-7.6,3.8-17.6,3.8H280.5c-14,0-21.3,4.9-27,16.5 c-5.7-11.6-13-16.5-27-16.5H36.2c-10,0-14.6-0.8-17.6-3.8c-3-3-3.5-6.2-3.5-15.9v-3.5H3v3.8C3,59.4,4.9,67,10.3,72.4 c5.1,5.1,10.8,7,25.7,7h190.2c7.6,0,13,1.6,16.2,4.9c3,3,5.1,6.5,5.1,11.6v4.9h5.9h0h5.9v-4.9c0-5.1,2.2-8.6,5.1-11.6 c3.2-3.2,8.6-4.9,16.2-4.9H471c14.9,0,20.5-1.9,25.7-7c5.4-5.4,7.3-13,7.3-26.2v-3.8H491.8z"></path>
          <path class="st0" d="M491.8,42.4v3.5c0,9.7-0.5,13-3.5,15.9c-3,3-7.6,3.8-17.6,3.8H280.5c-14,0-21.3,4.9-27,16.5 c-5.7-11.6-13-16.5-27-16.5H36.2c-10,0-14.6-0.8-17.6-3.8c-3-3-3.5-6.2-3.5-15.9v-3.5H3v3.8C3,59.4,4.9,67,10.3,72.4 c5.1,5.1,10.8,7,25.7,7h190.2c7.6,0,13,1.6,16.2,4.9c3,3,5.1,6.5,5.1,11.6v4.9h5.9h0h5.9v-4.9c0-5.1,2.2-8.6,5.1-11.6 c3.2-3.2,8.6-4.9,16.2-4.9H471c14.9,0,20.5-1.9,25.7-7c5.4-5.4,7.3-13,7.3-26.2v-3.8H491.8z"></path>
        </g></svg>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <h3 class="text-center section-teaser-row__bracket--headline">
          Lorem ipsum dolor
        </h3>
      </div>
    </div>
  </div>
</section>
<div style="margin: 40px 0"></div>
<section class="section-teaser-row has-padding-m">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-lg-3">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-3">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-3">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-3">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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>
    <div class="row">
      <div class="col-md-10 offset-md-1">
        <svg class="section-teaser-row__bracket hidden-sm-down" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewbox="0 0 837.7 74" style="enable-background:new 0 0 837.7 74;" xml:space="preserve">
        <path class="st0" d="M781.1,18.2V25c0,4.5-0.3,6-1.6,7.4c-1.4,1.4-3.5,1.8-8.2,1.8H431.4c-6.5,0-9.9,2.3-12.6,7.7 c-2.6-5.4-6-7.7-12.6-7.7H66.5c-4.7,0-6.8-0.4-8.2-1.8c-1.4-1.4-1.6-2.9-1.6-7.4v-6.8H51v6.9c0,6.2,0.9,9.7,3.4,12.2 c2.4,2.4,5,3.3,12,3.3h339.8c3.5,0,6,0.8,7.5,2.3c1.4,1.4,2.4,3,2.4,5.4v4.2h5.5v-4.2c0-2.4,1-4,2.4-5.4c1.5-1.5,4-2.3,7.5-2.3 h339.8c6.9,0,9.6-0.9,12-3.3c2.5-2.5,3.4-6,3.4-12.2v-6.9C786.7,18.2,781.1,18.2,781.1,18.2z"></path></svg> <svg class="section-teaser-row__bracket hidden-md-up" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewbox="0 0 507 117.3" style="enable-background:new 0 0 507 117.3;" xml:space="preserve">
        <g>
          <path class="st0" d="M491.8,42.4v3.5c0,9.7-0.5,13-3.5,15.9c-3,3-7.6,3.8-17.6,3.8H280.5c-14,0-21.3,4.9-27,16.5 c-5.7-11.6-13-16.5-27-16.5H36.2c-10,0-14.6-0.8-17.6-3.8c-3-3-3.5-6.2-3.5-15.9v-3.5H3v3.8C3,59.4,4.9,67,10.3,72.4 c5.1,5.1,10.8,7,25.7,7h190.2c7.6,0,13,1.6,16.2,4.9c3,3,5.1,6.5,5.1,11.6v4.9h5.9h0h5.9v-4.9c0-5.1,2.2-8.6,5.1-11.6 c3.2-3.2,8.6-4.9,16.2-4.9H471c14.9,0,20.5-1.9,25.7-7c5.4-5.4,7.3-13,7.3-26.2v-3.8H491.8z"></path>
          <path class="st0" d="M491.8,42.4v3.5c0,9.7-0.5,13-3.5,15.9c-3,3-7.6,3.8-17.6,3.8H280.5c-14,0-21.3,4.9-27,16.5 c-5.7-11.6-13-16.5-27-16.5H36.2c-10,0-14.6-0.8-17.6-3.8c-3-3-3.5-6.2-3.5-15.9v-3.5H3v3.8C3,59.4,4.9,67,10.3,72.4 c5.1,5.1,10.8,7,25.7,7h190.2c7.6,0,13,1.6,16.2,4.9c3,3,5.1,6.5,5.1,11.6v4.9h5.9h0h5.9v-4.9c0-5.1,2.2-8.6,5.1-11.6 c3.2-3.2,8.6-4.9,16.2-4.9H471c14.9,0,20.5-1.9,25.7-7c5.4-5.4,7.3-13,7.3-26.2v-3.8H491.8z"></path>
        </g></svg>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <h3 class="text-center section-teaser-row__bracket--headline">
          Lorem ipsum dolor
        </h3>
      </div>
    </div>
  </div>
</section>
<div style="margin: 40px 0"></div>

            
          

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

Show code
            
              <section class="section-teaser-row has-padding-s has-color-blue">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-lg-3">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-3">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-3">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-3">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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>
    <div class="row">
      <div class="col-md-10 offset-md-1">
        <svg class="section-teaser-row__bracket hidden-sm-down" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewbox="0 0 837.7 74" style="enable-background:new 0 0 837.7 74;" xml:space="preserve">
        <path class="st0" d="M781.1,18.2V25c0,4.5-0.3,6-1.6,7.4c-1.4,1.4-3.5,1.8-8.2,1.8H431.4c-6.5,0-9.9,2.3-12.6,7.7 c-2.6-5.4-6-7.7-12.6-7.7H66.5c-4.7,0-6.8-0.4-8.2-1.8c-1.4-1.4-1.6-2.9-1.6-7.4v-6.8H51v6.9c0,6.2,0.9,9.7,3.4,12.2 c2.4,2.4,5,3.3,12,3.3h339.8c3.5,0,6,0.8,7.5,2.3c1.4,1.4,2.4,3,2.4,5.4v4.2h5.5v-4.2c0-2.4,1-4,2.4-5.4c1.5-1.5,4-2.3,7.5-2.3 h339.8c6.9,0,9.6-0.9,12-3.3c2.5-2.5,3.4-6,3.4-12.2v-6.9C786.7,18.2,781.1,18.2,781.1,18.2z"></path></svg> <svg class="section-teaser-row__bracket hidden-md-up" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewbox="0 0 507 117.3" style="enable-background:new 0 0 507 117.3;" xml:space="preserve">
        <g>
          <path class="st0" d="M491.8,42.4v3.5c0,9.7-0.5,13-3.5,15.9c-3,3-7.6,3.8-17.6,3.8H280.5c-14,0-21.3,4.9-27,16.5 c-5.7-11.6-13-16.5-27-16.5H36.2c-10,0-14.6-0.8-17.6-3.8c-3-3-3.5-6.2-3.5-15.9v-3.5H3v3.8C3,59.4,4.9,67,10.3,72.4 c5.1,5.1,10.8,7,25.7,7h190.2c7.6,0,13,1.6,16.2,4.9c3,3,5.1,6.5,5.1,11.6v4.9h5.9h0h5.9v-4.9c0-5.1,2.2-8.6,5.1-11.6 c3.2-3.2,8.6-4.9,16.2-4.9H471c14.9,0,20.5-1.9,25.7-7c5.4-5.4,7.3-13,7.3-26.2v-3.8H491.8z"></path>
          <path class="st0" d="M491.8,42.4v3.5c0,9.7-0.5,13-3.5,15.9c-3,3-7.6,3.8-17.6,3.8H280.5c-14,0-21.3,4.9-27,16.5 c-5.7-11.6-13-16.5-27-16.5H36.2c-10,0-14.6-0.8-17.6-3.8c-3-3-3.5-6.2-3.5-15.9v-3.5H3v3.8C3,59.4,4.9,67,10.3,72.4 c5.1,5.1,10.8,7,25.7,7h190.2c7.6,0,13,1.6,16.2,4.9c3,3,5.1,6.5,5.1,11.6v4.9h5.9h0h5.9v-4.9c0-5.1,2.2-8.6,5.1-11.6 c3.2-3.2,8.6-4.9,16.2-4.9H471c14.9,0,20.5-1.9,25.7-7c5.4-5.4,7.3-13,7.3-26.2v-3.8H491.8z"></path>
        </g></svg>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <h3 class="text-center section-teaser-row__bracket--headline">
          Lorem ipsum dolor
        </h3>
      </div>
    </div>
  </div>
</section>
<div style="margin: 40px 0"></div>
<section class="section-teaser-row has-padding-m has-color-grey">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-lg-3">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-3">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-3">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-3">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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>
    <div class="row">
      <div class="col-md-10 offset-md-1">
        <svg class="section-teaser-row__bracket hidden-sm-down" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewbox="0 0 837.7 74" style="enable-background:new 0 0 837.7 74;" xml:space="preserve">
        <path class="st0" d="M781.1,18.2V25c0,4.5-0.3,6-1.6,7.4c-1.4,1.4-3.5,1.8-8.2,1.8H431.4c-6.5,0-9.9,2.3-12.6,7.7 c-2.6-5.4-6-7.7-12.6-7.7H66.5c-4.7,0-6.8-0.4-8.2-1.8c-1.4-1.4-1.6-2.9-1.6-7.4v-6.8H51v6.9c0,6.2,0.9,9.7,3.4,12.2 c2.4,2.4,5,3.3,12,3.3h339.8c3.5,0,6,0.8,7.5,2.3c1.4,1.4,2.4,3,2.4,5.4v4.2h5.5v-4.2c0-2.4,1-4,2.4-5.4c1.5-1.5,4-2.3,7.5-2.3 h339.8c6.9,0,9.6-0.9,12-3.3c2.5-2.5,3.4-6,3.4-12.2v-6.9C786.7,18.2,781.1,18.2,781.1,18.2z"></path></svg> <svg class="section-teaser-row__bracket hidden-md-up" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewbox="0 0 507 117.3" style="enable-background:new 0 0 507 117.3;" xml:space="preserve">
        <g>
          <path class="st0" d="M491.8,42.4v3.5c0,9.7-0.5,13-3.5,15.9c-3,3-7.6,3.8-17.6,3.8H280.5c-14,0-21.3,4.9-27,16.5 c-5.7-11.6-13-16.5-27-16.5H36.2c-10,0-14.6-0.8-17.6-3.8c-3-3-3.5-6.2-3.5-15.9v-3.5H3v3.8C3,59.4,4.9,67,10.3,72.4 c5.1,5.1,10.8,7,25.7,7h190.2c7.6,0,13,1.6,16.2,4.9c3,3,5.1,6.5,5.1,11.6v4.9h5.9h0h5.9v-4.9c0-5.1,2.2-8.6,5.1-11.6 c3.2-3.2,8.6-4.9,16.2-4.9H471c14.9,0,20.5-1.9,25.7-7c5.4-5.4,7.3-13,7.3-26.2v-3.8H491.8z"></path>
          <path class="st0" d="M491.8,42.4v3.5c0,9.7-0.5,13-3.5,15.9c-3,3-7.6,3.8-17.6,3.8H280.5c-14,0-21.3,4.9-27,16.5 c-5.7-11.6-13-16.5-27-16.5H36.2c-10,0-14.6-0.8-17.6-3.8c-3-3-3.5-6.2-3.5-15.9v-3.5H3v3.8C3,59.4,4.9,67,10.3,72.4 c5.1,5.1,10.8,7,25.7,7h190.2c7.6,0,13,1.6,16.2,4.9c3,3,5.1,6.5,5.1,11.6v4.9h5.9h0h5.9v-4.9c0-5.1,2.2-8.6,5.1-11.6 c3.2-3.2,8.6-4.9,16.2-4.9H471c14.9,0,20.5-1.9,25.7-7c5.4-5.4,7.3-13,7.3-26.2v-3.8H491.8z"></path>
        </g></svg>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <h3 class="text-center section-teaser-row__bracket--headline">
          Lorem ipsum dolor
        </h3>
      </div>
    </div>
  </div>
</section>
<div style="margin: 40px 0"></div>
<section class="section-teaser-row has-padding-l has-color-orange">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-lg-3">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-3">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-3">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-3">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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>
    <div class="row">
      <div class="col-md-10 offset-md-1">
        <svg class="section-teaser-row__bracket hidden-sm-down" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewbox="0 0 837.7 74" style="enable-background:new 0 0 837.7 74;" xml:space="preserve">
        <path class="st0" d="M781.1,18.2V25c0,4.5-0.3,6-1.6,7.4c-1.4,1.4-3.5,1.8-8.2,1.8H431.4c-6.5,0-9.9,2.3-12.6,7.7 c-2.6-5.4-6-7.7-12.6-7.7H66.5c-4.7,0-6.8-0.4-8.2-1.8c-1.4-1.4-1.6-2.9-1.6-7.4v-6.8H51v6.9c0,6.2,0.9,9.7,3.4,12.2 c2.4,2.4,5,3.3,12,3.3h339.8c3.5,0,6,0.8,7.5,2.3c1.4,1.4,2.4,3,2.4,5.4v4.2h5.5v-4.2c0-2.4,1-4,2.4-5.4c1.5-1.5,4-2.3,7.5-2.3 h339.8c6.9,0,9.6-0.9,12-3.3c2.5-2.5,3.4-6,3.4-12.2v-6.9C786.7,18.2,781.1,18.2,781.1,18.2z"></path></svg> <svg class="section-teaser-row__bracket hidden-md-up" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewbox="0 0 507 117.3" style="enable-background:new 0 0 507 117.3;" xml:space="preserve">
        <g>
          <path class="st0" d="M491.8,42.4v3.5c0,9.7-0.5,13-3.5,15.9c-3,3-7.6,3.8-17.6,3.8H280.5c-14,0-21.3,4.9-27,16.5 c-5.7-11.6-13-16.5-27-16.5H36.2c-10,0-14.6-0.8-17.6-3.8c-3-3-3.5-6.2-3.5-15.9v-3.5H3v3.8C3,59.4,4.9,67,10.3,72.4 c5.1,5.1,10.8,7,25.7,7h190.2c7.6,0,13,1.6,16.2,4.9c3,3,5.1,6.5,5.1,11.6v4.9h5.9h0h5.9v-4.9c0-5.1,2.2-8.6,5.1-11.6 c3.2-3.2,8.6-4.9,16.2-4.9H471c14.9,0,20.5-1.9,25.7-7c5.4-5.4,7.3-13,7.3-26.2v-3.8H491.8z"></path>
          <path class="st0" d="M491.8,42.4v3.5c0,9.7-0.5,13-3.5,15.9c-3,3-7.6,3.8-17.6,3.8H280.5c-14,0-21.3,4.9-27,16.5 c-5.7-11.6-13-16.5-27-16.5H36.2c-10,0-14.6-0.8-17.6-3.8c-3-3-3.5-6.2-3.5-15.9v-3.5H3v3.8C3,59.4,4.9,67,10.3,72.4 c5.1,5.1,10.8,7,25.7,7h190.2c7.6,0,13,1.6,16.2,4.9c3,3,5.1,6.5,5.1,11.6v4.9h5.9h0h5.9v-4.9c0-5.1,2.2-8.6,5.1-11.6 c3.2-3.2,8.6-4.9,16.2-4.9H471c14.9,0,20.5-1.9,25.7-7c5.4-5.4,7.3-13,7.3-26.2v-3.8H491.8z"></path>
        </g></svg>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <h3 class="text-center section-teaser-row__bracket--headline">
          Lorem ipsum dolor
        </h3>
      </div>
    </div>
  </div>
</section>

            
          

with headline, with bracket visual

            
              <section class="section-teaser-row has-padding-m">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-lg-4">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-4">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-4">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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>
  </div>
</section>
<div style="margin: 40px 0;"></div>
<section class="section-teaser-row has-padding-m">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-lg-4">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-4">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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="col-md-6 col-lg-4">
        <a href="#" class="teaser-a" style="background-image:url("/images/_teaser/01_csm_printer_699e6bbb02.jpg")"></a>
        <div class="teaser-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.
          </div>
          <div class="teaser-footer">
            <span class="btn btn-outline-white btn--icon-right"><span>Learn more</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>
    <div class="row">
      <div class="col-md-10 offset-md-1">
        <svg class="section-teaser-row__bracket hidden-sm-down" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewbox="0 0 837.7 74" style="enable-background:new 0 0 837.7 74;" xml:space="preserve">
        <path class="st0" d="M781.1,18.2V25c0,4.5-0.3,6-1.6,7.4c-1.4,1.4-3.5,1.8-8.2,1.8H431.4c-6.5,0-9.9,2.3-12.6,7.7 c-2.6-5.4-6-7.7-12.6-7.7H66.5c-4.7,0-6.8-0.4-8.2-1.8c-1.4-1.4-1.6-2.9-1.6-7.4v-6.8H51v6.9c0,6.2,0.9,9.7,3.4,12.2 c2.4,2.4,5,3.3,12,3.3h339.8c3.5,0,6,0.8,7.5,2.3c1.4,1.4,2.4,3,2.4,5.4v4.2h5.5v-4.2c0-2.4,1-4,2.4-5.4c1.5-1.5,4-2.3,7.5-2.3 h339.8c6.9,0,9.6-0.9,12-3.3c2.5-2.5,3.4-6,3.4-12.2v-6.9C786.7,18.2,781.1,18.2,781.1,18.2z"></path></svg> <svg class="section-teaser-row__bracket hidden-md-up" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewbox="0 0 507 117.3" style="enable-background:new 0 0 507 117.3;" xml:space="preserve">
        <g>
          <path class="st0" d="M491.8,42.4v3.5c0,9.7-0.5,13-3.5,15.9c-3,3-7.6,3.8-17.6,3.8H280.5c-14,0-21.3,4.9-27,16.5 c-5.7-11.6-13-16.5-27-16.5H36.2c-10,0-14.6-0.8-17.6-3.8c-3-3-3.5-6.2-3.5-15.9v-3.5H3v3.8C3,59.4,4.9,67,10.3,72.4 c5.1,5.1,10.8,7,25.7,7h190.2c7.6,0,13,1.6,16.2,4.9c3,3,5.1,6.5,5.1,11.6v4.9h5.9h0h5.9v-4.9c0-5.1,2.2-8.6,5.1-11.6 c3.2-3.2,8.6-4.9,16.2-4.9H471c14.9,0,20.5-1.9,25.7-7c5.4-5.4,7.3-13,7.3-26.2v-3.8H491.8z"></path>
          <path class="st0" d="M491.8,42.4v3.5c0,9.7-0.5,13-3.5,15.9c-3,3-7.6,3.8-17.6,3.8H280.5c-14,0-21.3,4.9-27,16.5 c-5.7-11.6-13-16.5-27-16.5H36.2c-10,0-14.6-0.8-17.6-3.8c-3-3-3.5-6.2-3.5-15.9v-3.5H3v3.8C3,59.4,4.9,67,10.3,72.4 c5.1,5.1,10.8,7,25.7,7h190.2c7.6,0,13,1.6,16.2,4.9c3,3,5.1,6.5,5.1,11.6v4.9h5.9h0h5.9v-4.9c0-5.1,2.2-8.6,5.1-11.6 c3.2-3.2,8.6-4.9,16.2-4.9H471c14.9,0,20.5-1.9,25.7-7c5.4-5.4,7.3-13,7.3-26.2v-3.8H491.8z"></path>
        </g></svg>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <h3 class="text-center section-teaser-row__bracket--headline">
          Lorem ipsum dolor
        </h3>
      </div>
    </div>
  </div>
</section>