Card Section

HTML

<div class="row theme--2">
  <div class="sectionHeading width--wide">
    <h3 class="fs2">
      This is a section heading
    </h3>
    <p>
      This is an optional introductory paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin cursus libero in felis tincidunt
      malesuada quis vitae augue. Donec ac mollis tortor. Quisque eleifend sollicitudin metus, vitae bibendum turpis.
    </p><a class="button button--more">View all</a>
  </div>
  <div class="content 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 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>
  </div>
</div>