Organism

Section Testimonial

Default

Show code
/images/placeholder-ratio.jpg
Some quick example text to build on the card title and make up the bulk of the card's content. Author Link
Primary 
            
              <section class="section-testimonial has-padding-m">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="section-testimonial__image">
          <img src="/images/placeholder-ratio.jpg" alt="/images/placeholder-ratio.jpg">
        </div>
      </div>
      <div class="col-md-6">
        <div class="section-testimonial__body">
          <div class="testimonial">
            <div class="testimonial-header">
              <div class="avatar avatar--md avatar--image" style="background-image:url("/images/placeholder-square.jpg")"></div>
            </div>
            <div class="testimonial-body">
              <blockquote class="blockquote" cite="Author">
                Some quick example text to build on the card title and make up the bulk of the card"s content. <cite>Author <a href="#">Link</a></cite>
              </blockquote>
            </div>
            <div class="testimonial-footer">
              <a href="button-link" class="btn btn-outline-primary btn--icon-right"><span>Primary</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>
    </div>
  </div>
</section>

Alignment

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

Show code
/images/placeholder-ratio.jpg
Some quick example text to build on the card title and make up the bulk of the card's content. Author Link
Primary
/images/placeholder-ratio.jpg
Some quick example text to build on the card title and make up the bulk of the card's content. Author Link
Primary
/images/placeholder-ratio.jpg
Some quick example text to build on the card title and make up the bulk of the card's content. Author Link
Primary 
            
              <section class="section-testimonial has-padding-m has-color-blue">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="section-testimonial__image">
          <img src="/images/placeholder-ratio.jpg" alt="/images/placeholder-ratio.jpg">
        </div>
      </div>
      <div class="col-md-6">
        <div class="section-testimonial__body align-right">
          <div class="testimonial has-color-blue">
            <div class="testimonial-header">
              <div class="avatar avatar--md avatar--image" style="background-image:url("/images/placeholder-square.jpg")"></div>
            </div>
            <div class="testimonial-body">
              <blockquote class="blockquote" cite="Author">
                Some quick example text to build on the card title and make up the bulk of the card"s content. <cite>Author <a href="#">Link</a></cite>
              </blockquote>
            </div>
            <div class="testimonial-footer">
              <a href="button-link" class="btn btn-outline-white btn--icon-right"><span>Primary</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>
    </div>
  </div>
</section>
<div style="margin: 40px 0;"></div>
<section class="section-testimonial has-padding-m has-color-blue">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="section-testimonial__image">
          <img src="/images/placeholder-ratio.jpg" alt="/images/placeholder-ratio.jpg">
        </div>
      </div>
      <div class="col-md-6">
        <div class="section-testimonial__body align-left">
          <div class="testimonial has-color-blue">
            <div class="testimonial-header">
              <div class="avatar avatar--md avatar--image" style="background-image:url("/images/placeholder-square.jpg")"></div>
            </div>
            <div class="testimonial-body">
              <blockquote class="blockquote" cite="Author">
                Some quick example text to build on the card title and make up the bulk of the card"s content. <cite>Author <a href="#">Link</a></cite>
              </blockquote>
            </div>
            <div class="testimonial-footer">
              <a href="button-link" class="btn btn-outline-white btn--icon-right"><span>Primary</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>
    </div>
  </div>
</section>
<div style="margin: 40px 0;"></div>
<section class="section-testimonial has-padding-m has-color-blue">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="section-testimonial__image">
          <img src="/images/placeholder-ratio.jpg" alt="/images/placeholder-ratio.jpg">
        </div>
      </div>
      <div class="col-md-6">
        <div class="section-testimonial__body align-center">
          <div class="testimonial has-color-blue">
            <div class="testimonial-header">
              <div class="avatar avatar--md avatar--image" style="background-image:url("/images/placeholder-square.jpg")"></div>
            </div>
            <div class="testimonial-body">
              <blockquote class="blockquote" cite="Author">
                Some quick example text to build on the card title and make up the bulk of the card"s content. <cite>Author <a href="#">Link</a></cite>
              </blockquote>
            </div>
            <div class="testimonial-footer">
              <a href="button-link" class="btn btn-outline-white btn--icon-right"><span>Primary</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>
    </div>
  </div>
</section>

Colors

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

Show code
/images/placeholder-ratio.jpg
Some quick example text to build on the card title and make up the bulk of the card's content. Author Link
White
/images/placeholder-ratio.jpg
Some quick example text to build on the card title and make up the bulk of the card's content. Author Link
Primary
/images/placeholder-ratio.jpg
Some quick example text to build on the card title and make up the bulk of the card's content. Author Link
White 
            
              <section class="section-testimonial has-color-blue has-padding-m">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="section-testimonial__image">
          <img src="/images/placeholder-ratio.jpg" alt="/images/placeholder-ratio.jpg">
        </div>
      </div>
      <div class="col-md-6">
        <div class="section-testimonial__body">
          <div class="testimonial has-color-blue">
            <div class="testimonial-header">
              <div class="avatar avatar--md avatar--image" style="background-image:url("/images/placeholder-square.jpg")"></div>
            </div>
            <div class="testimonial-body">
              <blockquote class="blockquote" cite="Author">
                Some quick example text to build on the card title and make up the bulk of the card"s content. <cite>Author <a href="#">Link</a></cite>
              </blockquote>
            </div>
            <div class="testimonial-footer">
              <a href="button-link" class="btn btn-outline-white btn--icon-right"><span>White</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>
    </div>
  </div>
</section>
<div style="margin: 40px 0;"></div>
<section class="section-testimonial has-color-grey has-padding-m">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="section-testimonial__image">
          <img src="/images/placeholder-ratio.jpg" alt="/images/placeholder-ratio.jpg">
        </div>
      </div>
      <div class="col-md-6">
        <div class="section-testimonial__body">
          <div class="testimonial has-color-grey">
            <div class="testimonial-header">
              <div class="avatar avatar--md avatar--image" style="background-image:url("/images/placeholder-square.jpg")"></div>
            </div>
            <div class="testimonial-body">
              <blockquote class="blockquote" cite="Author">
                Some quick example text to build on the card title and make up the bulk of the card"s content. <cite>Author <a href="#">Link</a></cite>
              </blockquote>
            </div>
            <div class="testimonial-footer">
              <a href="button-link" class="btn btn-outline-primary btn--icon-right"><span>Primary</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>
    </div>
  </div>
</section>
<div style="margin: 40px 0;"></div>
<section class="section-testimonial has-color-orange has-padding-m">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="section-testimonial__image">
          <img src="/images/placeholder-ratio.jpg" alt="/images/placeholder-ratio.jpg">
        </div>
      </div>
      <div class="col-md-6">
        <div class="section-testimonial__body">
          <div class="testimonial has-color-orange">
            <div class="testimonial-header">
              <div class="avatar avatar--md avatar--image" style="background-image:url("/images/placeholder-square.jpg")"></div>
            </div>
            <div class="testimonial-body">
              <blockquote class="blockquote" cite="Author">
                Some quick example text to build on the card title and make up the bulk of the card"s content. <cite>Author <a href="#">Link</a></cite>
              </blockquote>
            </div>
            <div class="testimonial-footer">
              <a href="button-link" class="btn btn-outline-white btn--icon-right"><span>White</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>
    </div>
  </div>
</section>
<div style="margin: 40px 0;"></div>

Full width testimonial

Show code
Some quick example text to build on the card title and make up the bulk of the card's content. Author Link
Primary
Some quick example text to build on the card title and make up the bulk of the card's content. Author Link
Primary 
            
              <section class="section-testimonial">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="section-testimonial__body">
          <div class="testimonial">
            <div class="testimonial-header">
              <div class="avatar avatar--md avatar--image" style="background-image:url("/images/placeholder-square.jpg")"></div>
            </div>
            <div class="testimonial-body">
              <blockquote class="blockquote" cite="Author">
                Some quick example text to build on the card title and make up the bulk of the card"s content. <cite>Author <a href="#">Link</a></cite>
              </blockquote>
            </div>
            <div class="testimonial-footer">
              <a href="button-link" class="btn btn-outline-primary btn--icon-right"><span>Primary</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>
    </div>
  </div>
</section>
<div style="margin: 40px 0;"></div>
<section class="section-testimonial">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="section-testimonial__body">
          <div class="testimonial align-center">
            <div class="testimonial-header">
              <div class="avatar avatar--md avatar--image" style="background-image:url("/images/placeholder-square.jpg")"></div>
            </div>
            <div class="testimonial-body">
              <blockquote class="blockquote" cite="Author">
                Some quick example text to build on the card title and make up the bulk of the card"s content. <cite>Author <a href="#">Link</a></cite>
              </blockquote>
            </div>
            <div class="testimonial-footer">
              <a href="button-link" class="btn btn-outline-primary btn--icon-right"><span>Primary</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>
    </div>
  </div>
</section>

Orders

default, text first .order-first

Show code
/images/placeholder-ratio.jpg
Some quick example text to build on the card title and make up the bulk of the card's content. Author Link
Primary
/images/placeholder-ratio.jpg
Some quick example text to build on the card title and make up the bulk of the card's content. Author Link
White 
            
              <section class="section-testimonial has-color-grey has-padding-m">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="section-testimonial__image">
          <img src="/images/placeholder-ratio.jpg" alt="/images/placeholder-ratio.jpg">
        </div>
      </div>
      <div class="col-md-6">
        <div class="section-testimonial__body">
          <div class="testimonial has-color-grey">
            <div class="testimonial-header">
              <div class="avatar avatar--md avatar--image" style="background-image:url("/images/placeholder-square.jpg")"></div>
            </div>
            <div class="testimonial-body">
              <blockquote class="blockquote" cite="Author">
                Some quick example text to build on the card title and make up the bulk of the card"s content. <cite>Author <a href="#">Link</a></cite>
              </blockquote>
            </div>
            <div class="testimonial-footer">
              <a href="button-link" class="btn btn-outline-primary btn--icon-right"><span>Primary</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>
    </div>
  </div>
</section>
<div style="margin: 40px 0;"></div>
<section class="section-testimonial has-color-orange has-padding-m">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="section-testimonial__image">
          <img src="/images/placeholder-ratio.jpg" alt="/images/placeholder-ratio.jpg">
        </div>
      </div>
      <div class="col-md-6 order-first">
        <div class="section-testimonial__body">
          <div class="testimonial has-color-orange">
            <div class="testimonial-header">
              <div class="avatar avatar--md avatar--image" style="background-image:url("/images/placeholder-square.jpg")"></div>
            </div>
            <div class="testimonial-body">
              <blockquote class="blockquote" cite="Author">
                Some quick example text to build on the card title and make up the bulk of the card"s content. <cite>Author <a href="#">Link</a></cite>
              </blockquote>
            </div>
            <div class="testimonial-footer">
              <a href="button-link" class="btn btn-outline-white btn--icon-right"><span>White</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>
    </div>
  </div>
</section>
<div style="margin: 40px 0;"></div>

Paddings

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

Show code
/images/placeholder-ratio.jpg
Some quick example text to build on the card title and make up the bulk of the card's content. Author Link
Primary
/images/placeholder-ratio.jpg
Some quick example text to build on the card title and make up the bulk of the card's content. Author Link
Primary
/images/placeholder-ratio.jpg
Some quick example text to build on the card title and make up the bulk of the card's content. Author Link
Primary 
            
              <section class="section-testimonial has-padding-s has-color-blue">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="section-testimonial__image">
          <img src="/images/placeholder-ratio.jpg" alt="/images/placeholder-ratio.jpg">
        </div>
      </div>
      <div class="col-md-6">
        <div class="section-testimonial__body">
          <div class="testimonial has-color-blue">
            <div class="testimonial-header">
              <div class="avatar avatar--md avatar--image" style="background-image:url("/images/placeholder-square.jpg")"></div>
            </div>
            <div class="testimonial-body">
              <blockquote class="blockquote" cite="Author">
                Some quick example text to build on the card title and make up the bulk of the card"s content. <cite>Author <a href="#">Link</a></cite>
              </blockquote>
            </div>
            <div class="testimonial-footer">
              <a href="button-link" class="btn btn-outline-white btn--icon-right"><span>Primary</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>
    </div>
  </div>
</section>
<div style="margin: 40px 0;"></div>
<section class="section-testimonial has-padding-m has-color-blue">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="section-testimonial__image">
          <img src="/images/placeholder-ratio.jpg" alt="/images/placeholder-ratio.jpg">
        </div>
      </div>
      <div class="col-md-6">
        <div class="section-testimonial__body">
          <div class="testimonial has-color-blue">
            <div class="testimonial-header">
              <div class="avatar avatar--md avatar--image" style="background-image:url("/images/placeholder-square.jpg")"></div>
            </div>
            <div class="testimonial-body">
              <blockquote class="blockquote" cite="Author">
                Some quick example text to build on the card title and make up the bulk of the card"s content. <cite>Author <a href="#">Link</a></cite>
              </blockquote>
            </div>
            <div class="testimonial-footer">
              <a href="button-link" class="btn btn-outline-white btn--icon-right"><span>Primary</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>
    </div>
  </div>
</section>
<div style="margin: 40px 0;"></div>
<section class="section-testimonial has-padding-l has-color-blue">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="section-testimonial__image">
          <img src="/images/placeholder-ratio.jpg" alt="/images/placeholder-ratio.jpg">
        </div>
      </div>
      <div class="col-md-6">
        <div class="section-testimonial__body">
          <div class="testimonial has-color-blue">
            <div class="testimonial-header">
              <div class="avatar avatar--md avatar--image" style="background-image:url("/images/placeholder-square.jpg")"></div>
            </div>
            <div class="testimonial-body">
              <blockquote class="blockquote" cite="Author">
                Some quick example text to build on the card title and make up the bulk of the card"s content. <cite>Author <a href="#">Link</a></cite>
              </blockquote>
            </div>
            <div class="testimonial-footer">
              <a href="button-link" class="btn btn-outline-white btn--icon-right"><span>Primary</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>
    </div>
  </div>
</section>
<div style="margin: 40px 0;"></div>