Organism

Section Button Row

Default

Show code

Headline

Button Button Button 
            
              <section class="section-button-row">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h2 class="section-button-row__headline">
          Headline
        </h2>
      </div>
      <div class="col-md-6">
        <div class="section-button-row-button-wrap">
          <a href="button-link" class="btn btn-primary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a> <a href="button-link" class="btn btn-outline-primary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a> <a href="button-link" class="btn btn-secondary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a>
        </div>
      </div>
    </div>
  </div>
</section>

Alignment

.align-right.align-left.align-center

Show code

Headline

Button Button Button

Headline

Button Button Button

Headline

Button Button Button 
            
              <section class="section-button-row align-right">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h2 class="section-button-row__headline">
          Headline
        </h2>
      </div>
      <div class="col-12">
        <div class="section-button-row-button-wrap">
          <a href="button-link" class="btn btn-primary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a> <a href="button-link" class="btn btn-outline-primary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a> <a href="button-link" class="btn btn-secondary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a>
        </div>
      </div>
    </div>
  </div>
</section>
<div style="margin: 40px 0;"></div>
<section class="section-button-row align-left">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h2 class="section-button-row__headline">
          Headline
        </h2>
      </div>
      <div class="col-12">
        <div class="section-button-row-button-wrap">
          <a href="button-link" class="btn btn-primary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a> <a href="button-link" class="btn btn-outline-primary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a> <a href="button-link" class="btn btn-secondary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a>
        </div>
      </div>
    </div>
  </div>
</section>
<div style="margin: 40px 0;"></div>
<section class="section-button-row align-center">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h2 class="section-button-row__headline">
          Headline
        </h2>
      </div>
      <div class="col-12">
        <div class="section-button-row-button-wrap">
          <a href="button-link" class="btn btn-primary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a> <a href="button-link" class="btn btn-outline-primary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a> <a href="button-link" class="btn btn-secondary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a>
        </div>
      </div>
    </div>
  </div>
</section>

Colors

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

Show code

Headline

Button Button Button

Headline

Button Button Button

Headline

Button Button Button 
            
              <section class="section-button-row has-padding-m has-color-blue">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h2 class="section-button-row__headline">
          Headline
        </h2>
      </div>
      <div class="col-md-6">
        <div class="section-button-row-button-wrap">
          <a href="button-link" class="btn btn-secondary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a> <a href="button-link" class="btn btn-outline-white btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a> <a href="button-link" class="btn btn-secondary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a>
        </div>
      </div>
    </div>
  </div>
</section>
<div style="margin: 40px 0;"></div>
<section class="section-button-row has-padding-m has-color-grey">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h2 class="section-button-row__headline">
          Headline
        </h2>
      </div>
      <div class="col-md-6">
        <div class="section-button-row-button-wrap">
          <a href="button-link" class="btn btn-primary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a> <a href="button-link" class="btn btn-outline-primary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a> <a href="button-link" class="btn btn-secondary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a>
        </div>
      </div>
    </div>
  </div>
</section>
<div style="margin: 40px 0;"></div>
<section class="section-button-row has-padding-m has-color-orange">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h2 class="section-button-row__headline">
          Headline
        </h2>
      </div>
      <div class="col-md-6">
        <div class="section-button-row-button-wrap">
          <a href="button-link" class="btn btn-primary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a> <a href="button-link" class="btn btn-outline-white btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a> <a href="button-link" class="btn btn-primary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a>
        </div>
      </div>
    </div>
  </div>
</section>

Paddings

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

Show code

Headline

Button Button Button

Headline

Button Button Button

Headline

Button Button Button 
            
              <section class="section-button-row has-padding-m has-color-blue">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h2 class="section-button-row__headline">
          Headline
        </h2>
      </div>
      <div class="col-md-6">
        <div class="section-button-row-button-wrap">
          <a href="button-link" class="btn btn-secondary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a> <a href="button-link" class="btn btn-outline-white btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a> <a href="button-link" class="btn btn-secondary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a>
        </div>
      </div>
    </div>
  </div>
</section>
<div style="margin: 40px 0;"></div>
<section class="section-button-row has-padding-m has-color-blue">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h2 class="section-button-row__headline">
          Headline
        </h2>
      </div>
      <div class="col-md-6">
        <div class="section-button-row-button-wrap">
          <a href="button-link" class="btn btn-secondary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a> <a href="button-link" class="btn btn-outline-white btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a> <a href="button-link" class="btn btn-secondary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a>
        </div>
      </div>
    </div>
  </div>
</section>
<div style="margin: 40px 0;"></div>
<section class="section-button-row has-padding-l has-color-blue">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h2 class="section-button-row__headline">
          Headline
        </h2>
      </div>
      <div class="col-md-6">
        <div class="section-button-row-button-wrap">
          <a href="button-link" class="btn btn-secondary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a> <a href="button-link" class="btn btn-outline-white btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a> <a href="button-link" class="btn btn-secondary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a>
        </div>
      </div>
    </div>
  </div>
</section>

Variants

with full-width columns, buttons only, headline & buttons only

Show code

Headline

Button Button Button

Headline

Button Button Button
Button Button Button 
            
              <section class="section-button-row align-center has-color-blue has-padding-m">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h2 class="section-button-row__headline">
          Headline
        </h2>
      </div>
      <div class="col-12">
        <div class="section-button-row-button-wrap">
          <a href="button-link" class="btn btn-secondary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a> <a href="button-link" class="btn btn-outline-white btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a> <a href="button-link" class="btn btn-secondary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a>
        </div>
      </div>
    </div>
  </div>
</section>
<div style="margin: 40px 0;"></div>
<section class="section-button-row align-left has-color-grey has-padding-m">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h2 class="section-button-row__headline">
          Headline
        </h2>
      </div>
      <div class="col-md-6">
        <div class="section-button-row-button-wrap">
          <a href="button-link" class="btn btn-primary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a> <a href="button-link" class="btn btn-outline-primary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a> <a href="button-link" class="btn btn-secondary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a>
        </div>
      </div>
    </div>
  </div>
</section>
<div style="margin: 40px 0;"></div>
<section class="section-button-row align-center has-color-orange has-padding-m">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="section-button-row-button-wrap">
          <a href="button-link" class="btn btn-primary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a> <a href="button-link" class="btn btn-outline-white btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a> <a href="button-link" class="btn btn-primary btn--icon-right"><span>Button</span> <svg class="icon" viewbox="0 0 32 32">
          <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a>
        </div>
      </div>
    </div>
  </div>
</section>