Card Columns

Cards will be themed based on any themes applied to their parent. However you can override but applying a theme--# class to the card its self (see col 3)

HTML

<div class="column card">
  <div class="card__inner">
    <img alt="Card image alt text" src="/assets/img/content/Uncover_john.s.jpg" data-srcset=
    "/assets/img/content/Uncover_john.s.jpg 150w, /assets/img/content/Uncover_john.jpg 300w, /assets/img/content/Uncover_john.jpg 600w" class=
    "lazyload" data-sizes="auto">
    <div class="card__info">
      <h3>
        John
      </h3>
      <p>
        This is an optional description
      </p><a class="button button--large button--more" href="#">Explore John</a>
      <div class="card__meta">
        <span class="tag tag--podcast">Podcast</span> <time datetime="PT20M">20mins</time>
      </div>
    </div>
  </div>
</div>
<div class="column card">
  <div class="card__inner">
    <img alt="Card image alt text" src="/assets/img/content/Uncover_john.s.jpg" data-srcset=
    "/assets/img/content/Uncover_john.s.jpg 150w, /assets/img/content/Uncover_john.jpg 300w, /assets/img/content/Uncover_john.jpg 600w" class=
    "lazyload" data-sizes="auto">
    <div class="card__info">
      <h3>
        A Much Longer heading to test
      </h3><a class="button button--large button--more" href="#">Explore John</a>
      <div class="card__meta">
        <span class="tag tag--blog">Blog</span> <time datetime="PT20M">20mins</time>
      </div>
    </div>
  </div>
</div>
<div class="column card theme--1">
  <div class="card__inner">
    <img alt="Card image alt text" src="/assets/img/content/Uncover_john.s.jpg" data-srcset=
    "/assets/img/content/Uncover_john.s.jpg 150w, /assets/img/content/Uncover_john.jpg 300w, /assets/img/content/Uncover_john.jpg 600w" class=
    "lazyload" data-sizes="auto">
    <div class="card__info">
      <h3>
        Themed Card
      </h3>
      <p>
        This is an optional description but it's much longer here than on the other one. Much much longer, lets really push things.
      </p><a class="button button--large button--more" href="#">Explore John</a>
      <div class="card__meta">
        <span class="tag tag--podcast">Podcast</span> <time datetime="PT20M">20mins</time>
      </div>
    </div>
  </div>
</div>

Card Columns (Panel)

HTML

<div class="column card card--panel">
  <div class="card__inner">
    <img alt="Card image alt text" src="/assets/img/content/Uncover_john.s.jpg" data-srcset=
    "/assets/img/content/Uncover_john.s.jpg 150w, /assets/img/content/Uncover_john.jpg 300w, /assets/img/content/Uncover_john.jpg 600w" class=
    "lazyload" data-sizes="auto">
    <div class="card__info">
      <h3>
        John
      </h3>
      <p>
        This is an optional description
      </p><a class="button button--large button--more" href="#">Explore John</a>
      <div class="card__meta">
        <span class="tag tag--podcast">Podcast</span> <time datetime="PT20M">20mins</time>
      </div>
    </div>
  </div>
</div>
<div class="column card card--panel">
  <div class="card__inner">
    <img alt="Card image alt text" src="/assets/img/content/Uncover_john.s.jpg" data-srcset=
    "/assets/img/content/Uncover_john.s.jpg 150w, /assets/img/content/Uncover_john.jpg 300w, /assets/img/content/Uncover_john.jpg 600w" class=
    "lazyload" data-sizes="auto">
    <div class="card__info">
      <h3>
        A Much Longer heading to test
      </h3><a class="button button--large button--more" href="#">Explore John</a>
      <div class="card__meta">
        <span class="tag tag--blog">Blog</span> <time datetime="PT20M">20mins</time>
      </div>
    </div>
  </div>
</div>
<div class="column card card--panel">
  <div class="card__inner">
    <img alt="Card image alt text" src="/assets/img/content/Uncover_john.s.jpg" data-srcset=
    "/assets/img/content/Uncover_john.s.jpg 150w, /assets/img/content/Uncover_john.jpg 300w, /assets/img/content/Uncover_john.jpg 600w" class=
    "lazyload" data-sizes="auto">
    <div class="card__info">
      <h3>
        John
      </h3>
      <p>
        This is an optional description but it's much longer here than on the other one. Much much longer, lets really push things.
      </p><a class="button button--large button--more" href="#">Explore John</a>
      <div class="card__meta">
        <span class="tag tag--podcast">Podcast</span> <time datetime="PT20M">20mins</time>
      </div>
    </div>
  </div>
</div>