Card

card.scss ;

Use the card module to style basic cards.

Cards should generally use <a> tags, since UX prefers the entire card to be clickable.
Note that in the example, cards in each row match height with one another.

Examples

Basic

Lorem Ipsum

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Lorem Ipsum Dolor Sit Amet lorem ipsum

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus quasi.

Lorem Ipsum

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Lorem Ipsum

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Lorem Ipsum

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus quasi error qui officia vel deserunt eligendi ex earum ullam magni. Officia soluta atque alias reiciendis est illum impedit, perferendis maxime.

Lorem Ipsum Dolor Sit Amet lorem ipsum

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus quasi error qui officia vel deserunt eligendi ex earum ullam magni.

Lorem Ipsum

<div class="row">
  <div class="col-12 col-sm-6 col-lg-4 col-xl-3 d-flex">
    <a href="" class="card">
      <header class="card__header">
        <div class="card__image" style="background-image: url('https://picsum.photos/400/?random=1');"></div>
      </header>
      <div class="card__body">
        <div class="card__heading">Lorem Ipsum</div>
        <div class="card__subheading">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
      </div>
      <footer class="card__footer">
        <div class="text-link">Read More</div>
      </footer>
    </a>
  </div>
  <div class="col-12 col-sm-6 col-lg-4 col-xl-3 d-flex">
    <a href="" class="card">
      <header class="card__header">
        <div class="card__image" style="background-image: url('https://picsum.photos/400/?random=2');"></div>
      </header>
      <div class="card__body">
        <div class="card__heading">Lorem Ipsum Dolor Sit Amet lorem ipsum</div>
        <div class="card__subheading">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus quasi.</div>
      </div>
      <footer class="card__footer">
        <div class="text-link">Read More</div>
      </footer>
    </a>
  </div>
  <div class="col-12 col-sm-6 col-lg-4 col-xl-3 d-flex">
    <a href="" class="card">
      <header class="card__header">
        <div class="card__image" style="background-image: url('https://picsum.photos/400/?random=3');"></div>
      </header>
      <div class="card__body">
        <div class="card__heading">Lorem Ipsum</div>
        <div class="card__subheading">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
      </div>
      <footer class="card__footer">
        <div class="text-link">Read More</div>
      </footer>
    </a>
  </div>
  <div class="col-12 col-sm-6 col-lg-4 col-xl-3 d-flex">
    <a href="" class="card">
      <header class="card__header">
        <div class="card__image" style="background-image: url('https://picsum.photos/400/?random=4');"></div>
      </header>
      <div class="card__body">
        <div class="card__heading">Lorem Ipsum</div>
        <div class="card__subheading">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
      </div>
      <footer class="card__footer">
        <div class="text-link">Read More</div>
      </footer>
    </a>
  </div>
  <div class="col-12 col-sm-6 col-lg-4 col-xl-3 d-flex">
    <a href="" class="card">
      <header class="card__header">
        <div class="card__image" style="background-image: url('https://picsum.photos/400/?random=5');"></div>
      </header>
      <div class="card__body">
        <div class="card__heading">Lorem Ipsum</div>
        <div class="card__subheading">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus quasi error qui officia vel deserunt eligendi ex earum ullam magni. Officia soluta atque alias reiciendis est illum impedit, perferendis maxime.</div>
      </div>
      <footer class="card__footer">
        <div class="text-link">Read More</div>
      </footer>
    </a>
  </div>
  <div class="col-12 col-sm-6 col-lg-4 col-xl-3 d-flex">
    <a href="" class="card">
      <header class="card__header">
        <div class="card__image" style="background-image: url('https://picsum.photos/400/?random=6');"></div>
      </header>
      <div class="card__body">
        <div class="card__heading">Lorem Ipsum Dolor Sit Amet lorem ipsum</div>
        <div class="card__subheading">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus quasi error qui officia vel deserunt eligendi ex earum ullam magni.</div>
      </div>
      <footer class="card__footer">
        <div class="text-link">Read More</div>
      </footer>
    </a>
  </div>
  <div class="col-12 col-sm-6 col-lg-4 col-xl-3 d-flex">
    <a href="" class="card">
      <header class="card__header">
        <div class="card__image" style="background-image: url('https://picsum.photos/400/?random=7');"></div>
      </header>
      <div class="card__body">
        <div class="card__heading">Lorem Ipsum</div>
        <div class="card__subheading">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus quasi error qui officia vel deserunt eligendi ex earum ullam magni. Officia soluta atque alias reiciendis est illum impedit, perferendis maxime.</div>
      </div>
      <footer class="card__footer">
        <div class="text-link">Read More</div>
      </footer>
    </a>
  </div>
  <div class="col-12 col-sm-6 col-lg-4 col-xl-3 d-flex">
    <a href="" class="card">
      <header class="card__header">
        <div class="card__image" style="background-image: url('https://picsum.photos/400/?random=8');"></div>
      </header>
      <div class="card__body">
        <div class="card__heading">Lorem Ipsum</div>
        <div class="card__subheading">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus quasi error qui officia vel deserunt eligendi ex earum ullam magni. Officia soluta atque alias reiciendis est illum impedit, perferendis maxime.</div>
      </div>
      <footer class="card__footer">
        <div class="text-link">Read More</div>
      </footer>
    </a>
  </div>
</div>