Card

Cards present related content. They provide an easy way to get information quickly and are typically used in groups.

Information

  • Cards use the Stack Layout Object.
  • The breakpoint when the Cards split horizontally can be changed by adjusting the Stack--split responsive suffix modifier.

Base

Base Cards have a maximum width and the standard Card styles. They are meant to be filled with related content such as a heading and paragraph.

<div class="sprk-c-Card sprk-o-Stack">

  <div class="sprk-o-Stack__item sprk-c-Card__content sprk-o-Stack sprk-o-Stack--medium">

  </div>
</div>

Teaser

Teaser Cards include an image or illustration and a call to action that can be a button or a link.

Pierce Stocking Scenic Drive

Visit Michigan!

Pierce Stocking Scenic Drive is a beautiful 7.4 mile drive in Northern Michigan. It runs by rich forests, sand dunes and lakes.

<div class="sprk-c-Card sprk-o-Stack">
  <a href="#" class="sprk-o-Stack__item">
    <img
      alt="Pierce Stocking Scenic Drive"
      src="../../assets/toolkit/images/road.jpg">
  </a>

  <div class="sprk-o-Stack__item sprk-c-Card__content sprk-o-Stack sprk-o-Stack--medium">

    <h3 class="sprk-b-TypeDisplayFive sprk-o-Stack__item">
      Visit Michigan!
    </h3>

    <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
      Pierce Stocking Scenic Drive is a beautiful 7.4 mile drive in Northern Michigan. It runs by rich forests, sand dunes and lakes.
    </p>

    <div class="sprk-o-Stack__item">
      <a href="#" class="sprk-c-Button">
      Learn More
      </a>
    </div>

  </div>
</div>

Teaser With Different Element Order

Elements inside a Card can be reordered.

Visit Michigan!

Pierce Stocking Scenic Drive

Pierce Stocking Scenic Drive is a beautiful 7.4 mile drive in Northern Michigan. It runs by rich forests, sand dunes and lakes.

<div class="sprk-c-Card sprk-o-Stack">
  <h3 class="sprk-o-Stack__item sprk-c-Card__content sprk-b-TypeDisplayFive">
    Visit Michigan!
  </h3>

  <a href="#" class="sprk-o-Stack__item">
    <img
      alt="Pierce Stocking Scenic Drive"
      src="../../assets/toolkit/images/road.jpg" />
  </a>

  <div class="sprk-o-Stack__item sprk-c-Card__content sprk-o-Stack sprk-o-Stack--medium">
    <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
      Pierce Stocking Scenic Drive is a beautiful 7.4 mile drive in Northern Michigan. It runs by rich forests, sand dunes and lakes.
    </p>

    <div class="sprk-o-Stack__item">
      <a href="#" class="sprk-c-Button">
        Learn More
      </a>
    </div>
  </div>
</div>

Card Layout - Two Up

Cards should typically be used in a group of at least two Cards. They should be related to one another.

Pierce Stocking Scenic Drive

Michigan!

Pierce Stocking Scenic Drive.

Learn More
Pierce Stocking Scenic Drive

Michigan!

Pierce Stocking Scenic Drive.

Learn More
<div class="sprk-o-Stack sprk-o-Stack--large sprk-o-Stack--split@l">
  <div class="sprk-o-Stack__item sprk-o-Stack__item--equal@l sprk-c-Card sprk-o-Stack">
    <a href="#" class="sprk-o-Stack__item">
    <img
      alt="Pierce Stocking Scenic Drive"
      src="../../assets/toolkit/images/road.jpg">
  </a>

    <div class="sprk-o-Stack__item sprk-c-Card__content sprk-o-Stack sprk-o-Stack--medium">

      <h3 class="sprk-b-TypeDisplayFive sprk-o-Stack__item">
      Michigan!
    </h3>

      <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        Pierce Stocking Scenic Drive.
      </p>

      <a href="#" class="sprk-o-Stack__item sprk-b-Link sprk-b-Link--standalone">
      Learn More
    </a>
    </div>
  </div>

  <div class="sprk-o-Stack__item sprk-o-Stack__item--equal@l sprk-c-Card sprk-o-Stack">
    <a href="#" class="sprk-o-Stack__item">
    <img
      alt="Pierce Stocking Scenic Drive"
      src="../../assets/toolkit/images/road.jpg">
  </a>

    <div class="sprk-o-Stack__item sprk-c-Card__content sprk-o-Stack sprk-o-Stack--medium">

      <h3 class="sprk-b-TypeDisplayFive sprk-o-Stack__item">
      Michigan!
    </h3>

      <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        Pierce Stocking Scenic Drive.
      </p>

      <a href="#" class="sprk-o-Stack__item sprk-b-Link sprk-b-Link--standalone">
      Learn More
    </a>
    </div>
  </div>

</div>

Layout - Three Up

Three Cards that stack on small viewports and align horizontally on larger viewports. Use three Sneak Peaks in a grouping when you would like to show related content

Icons

A useful piece of a Design System.

Learn More

Icons

A useful piece of a Design System.

Learn More

Icons

A useful piece of a Design System.

Learn More
<div class="sprk-o-Stack sprk-o-Stack--large sprk-o-Stack--split@l">
  <div class="sprk-o-Stack__item sprk-o-Stack__item--equal@l sprk-c-Card sprk-o-Stack">

    <div class="sprk-o-Stack__item sprk-c-Card__content sprk-o-Stack sprk-o-Stack--medium sprk-u-TextAlign--center">
      <a href="#" class="sprk-u-AbsoluteCenter sprk-o-Stack__item">
      <svg height="75" viewBox="0 0 220.63 197.62">
        <use xlink:href="#sparkler" />
      </svg>
    </a>

      <h3 class="sprk-b-TypeDisplayFive sprk-o-Stack__item">
      Icons
    </h3>

      <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        A useful piece of a Design System.
      </p>

      <a href="#" class="sprk-o-Stack__item sprk-b-Link sprk-b-Link--standalone">
      Learn More
    </a>
    </div>
  </div>

  <div class="sprk-o-Stack__item sprk-o-Stack__item--equal@l sprk-c-Card sprk-o-Stack">

    <div class="sprk-o-Stack__item sprk-c-Card__content sprk-o-Stack sprk-o-Stack--medium sprk-u-TextAlign--center">
      <a href="#" class="sprk-u-AbsoluteCenter sprk-o-Stack__item">
      <svg height="75" viewBox="0 0 220.63 197.62">
        <use xlink:href="#sparkler" />
      </svg>
    </a>

      <h3 class="sprk-b-TypeDisplayFive sprk-o-Stack__item">
      Icons
    </h3>

      <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        A useful piece of a Design System.
      </p>

      <a href="#" class="sprk-o-Stack__item sprk-b-Link sprk-b-Link--standalone">
      Learn More
    </a>
    </div>
  </div>

  <div class="sprk-o-Stack__item sprk-o-Stack__item--equal@l sprk-c-Card sprk-o-Stack">

    <div class="sprk-o-Stack__item sprk-c-Card__content sprk-o-Stack sprk-o-Stack--medium sprk-u-TextAlign--center">
      <a href="#" class="sprk-u-AbsoluteCenter sprk-o-Stack__item">
      <svg height="75" viewBox="0 0 220.63 197.62">
        <use xlink:href="#sparkler" />
      </svg>
    </a>

      <h3 class="sprk-b-TypeDisplayFive sprk-o-Stack__item">
      Icons
    </h3>

      <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        A useful piece of a Design System.
      </p>

      <a href="#" class="sprk-o-Stack__item sprk-b-Link sprk-b-Link--standalone">
      Learn More
    </a>
    </div>
  </div>

</div>

Card Layout - Four Up

You may group Cards together in a set of four. The Cards should share some relation to one another.

Pierce Stocking Scenic Drive

Michigan!

Pierce Stocking Scenic Drive.

Pierce Stocking Scenic Drive

Michigan!

Pierce Stocking Scenic Drive.

Pierce Stocking Scenic Drive

Michigan!

Pierce Stocking Scenic Drive.

Pierce Stocking Scenic Drive

Michigan!

Pierce Stocking Scenic Drive.

<div class="sprk-o-Stack sprk-o-Stack--large sprk-o-Stack--split@xl">
  <div class="sprk-o-Stack__item sprk-o-Stack__item--equal@l sprk-c-Card sprk-o-Stack">
    <a href="#" class="sprk-o-Stack__item">
    <img
      alt="Pierce Stocking Scenic Drive"
      src="../../assets/toolkit/images/road.jpg">
  </a>

    <div class="sprk-o-Stack__item sprk-c-Card__content sprk-o-Stack sprk-o-Stack--medium">

      <h4 class="sprk-b-TypeDisplaySix sprk-o-Stack__item">
      Michigan!
    </h4>

      <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        Pierce Stocking Scenic Drive.
      </p>

      <div class="sprk-o-Stack__item">
        <a href="#" class="sprk-c-Button">
      More
      </a>
      </div>

    </div>
  </div>

  <div class="sprk-o-Stack__item sprk-o-Stack__item--equal@l sprk-c-Card sprk-o-Stack">
    <a href="#" class="sprk-o-Stack__item">
    <img
      alt="Pierce Stocking Scenic Drive"
      src="../../assets/toolkit/images/road.jpg">
  </a>

    <div class="sprk-o-Stack__item sprk-c-Card__content sprk-o-Stack sprk-o-Stack--medium">

      <h4 class="sprk-b-TypeDisplaySix sprk-o-Stack__item">
      Michigan!
    </h4>

      <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        Pierce Stocking Scenic Drive.
      </p>

      <div class="sprk-o-Stack__item">
        <a href="#" class="sprk-c-Button">
      More
      </a>
      </div>

    </div>
  </div>

  <div class="sprk-o-Stack__item sprk-o-Stack__item--equal@l sprk-c-Card sprk-o-Stack">
    <a href="#" class="sprk-o-Stack__item">
    <img
      alt="Pierce Stocking Scenic Drive"
      src="../../assets/toolkit/images/road.jpg">
  </a>

    <div class="sprk-o-Stack__item sprk-c-Card__content sprk-o-Stack sprk-o-Stack--medium">

      <h4 class="sprk-b-TypeDisplaySix sprk-o-Stack__item">
      Michigan!
    </h4>

      <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        Pierce Stocking Scenic Drive.
      </p>

      <div class="sprk-o-Stack__item">
        <a href="#" class="sprk-c-Button">
      More
      </a>
      </div>

    </div>
  </div>

  <div class="sprk-o-Stack__item sprk-o-Stack__item--equal@l sprk-c-Card sprk-o-Stack">
    <a href="#" class="sprk-o-Stack__item">
    <img
      alt="Pierce Stocking Scenic Drive"
      src="../../assets/toolkit/images/road.jpg">
  </a>

    <div class="sprk-o-Stack__item sprk-c-Card__content sprk-o-Stack sprk-o-Stack--medium">

      <h4 class="sprk-b-TypeDisplaySix sprk-o-Stack__item">
      Michigan!
    </h4>

      <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        Pierce Stocking Scenic Drive.
      </p>

      <div class="sprk-o-Stack__item">
        <a href="#" class="sprk-c-Button">
      More
      </a>
      </div>

    </div>
  </div>

</div>