Card

Use our cards system to create flexible content containers.

Usage


  <div class="card">
    <div class="card__header">...</div>
    <img class="card__img" src="..." alt="">
    <div class="card__body">
      <h5 class="card__title">...</h5>
      <p class="card__text">...</p>
    </div>
  </div>

Body

Open this example in a new window


  <div class="card">
    <div class="card__body">
      <p class="card__text">...</p>
    </div>
  </div>

Image

Open this example in a new window


  <div class="card">
    <img class="card__img" src="..." alt="">
  </div>

Video

Open this example in a new window


  <div class="card">
    <div class="card__video">
      <div class="embed">
        <iframe src="https://player.vimeo.com/video/371612154" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="allowfullscreen"></iframe>
      </div>
    </div>
  </div>

Horizontal

Open this example in a new window


  <div class="card card--horizontal">
    <div class="row margin-0">
      <div class="col padding-0">
        <div class="card__header">...</div>
      </div>
      <div class="col col-4 padding-0">
        <img class="card__img height-100" src="..." alt="">
      </div>
      <div class="col col-8 padding-0">
        <div class="card__body">
          <h5 class="card__title">...</h5>
          <p class="card__text">...</p>
          <a class="button" href="#">
            <span class="button__text">Go somewhere</span>
          </a>
        </div>
      </div>
    </div>
  </div>