Card

Cards can optionally be given the .column class which will make the cards
a) grow proportionally within their grow
b) conform to the same layout as the siblings.

HTML

<div class="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>

Card (Columns)

HTML

<section class="row">
  <div class="width--wide">
    <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">
      <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>
  </div>
</section>

Card (Left)

Cards can optionally be given the .column class which will make the cards
a) grow proportionally within their grow
b) conform to the same layout as the siblings.

HTML

<div class="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 card__info--left">
      <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>

Card (Panel)

Cards can optionally be given the .column class which will make the cards
a) grow proportionally within their grow
b) conform to the same layout as the siblings.

HTML

<div class="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>

Card (Panel columns)

HTML

<section class="row">
  <div class="width--wide">
    <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>
  </div>
</section>