Card
Cards contain content and actions about a single subject.
A card is created by giving a div element a class of
.card
.
.card__header
,
.card__media
,
.card__overlay
,
.card__content
,
.card__title
,
.card__actions
and
.card__footer
can all be used in conjunction inside
.card
element on div.
Simple variants can be created by using
.card
and inside add a div with class
.card__content
. Use
.card__title
inside
.card__content
or
.card__header
if required.
.card__footer
can be used to add a footer. If there are actions that need to be performed / buttons, use
.card__actions
, preferably inside footer or header.
Title
Subtitle for card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, dolores ad. Assumenda dolorum sunt, fuga velit sequi officia ea facere nostrum ad...


  <div className="card bg-gray-700 text-gray-300 container-xs">
    <div className="card__content">
      <div className="card__title">
        <div className="text-bold text-h5">
          Title
        </div>
        <div className="text-subtitle2">
          Subtitle for card
        </div>
      </div>
      <p className="text-body1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, dolores ad. Assumenda dolorum sunt, fuga velit sequi officia ea facere nostrum ad...
      </p>
    </div>
    <div className="card__footer">
      <div className="card__actions">
        <button className="btn btn--sm btn--rounded btn--link ml-auto text-white text-semibold">
          Read More
        </button>
      </div>
    </div>
  </div>
The full structure includes
.card__media
which by default takes up the entire width if there is an img inside. Most elements of cards can be used inside the other. For eg.
.card__title
and
.card__actions
can be used iniside
.card__header
.
SK
Shrimp and Chorizo
September 14, 2016

This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of frozen peas along with the mussels, if you like.


  <div className="card container-card bg-gray-800 text-white">
    <div className="card__header">
      <div className="avatar bg-red-500 mr-3">
        SK
      </div>
      <div className="card__title">
        <div className="text-gray-50 text-medium">
          Shrimp and Chorizo
        </div>
        <div className="text-subtitle2 text-gray-300">
          September 14, 2016
        </div>
      </div>
      <div className="card__actions ml-auto">
        <button className="btn btn--sm btn btn--icon-rounded btn--rounded">
          <svg
            aria-hidden="true"
            className="icon-sm fill-white"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
          </svg>
        </button>
      </div>
    </div>
    <div className="card__media">
      <img
        alt=""
        src="/paella.aeea352c.jpg"
      />
    </div>
    <div className="card__content">
      <p className="text-subtitle1 text-gray-300 text-light">
        This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of frozen peas along with the mussels, if you like.
      </p>
    </div>
    <div className="card__footer">
      <div className="card__actions w-full">
        <div className="">
          <button className="btn btn--sm btn--icon-circle btn--rounded mr-3">
            <svg
              aria-hidden="true"
              className="icon-sm fill-white"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
            </svg>
          </button>
          <button className="btn btn--sm btn--icon-circle btn--rounded">
            <svg
              aria-hidden="true"
              className="icon-sm fill-white"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z" />
            </svg>
          </button>
        </div>
        <button className="btn btn--sm btn--icon-circle btn--rounded ml-auto">
          <svg
            className="icon-sm fill-white"
            fill="none"
            height="44"
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="1.5"
            viewBox="0 0 24 24"
            width="44"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M0 0h24v24H0z"
              fill="none"
              stroke="none"
            />
            <polyline points="6 9 12 15 18 9" />
          </svg>
        </button>
      </div>
    </div>
  </div>
Card with dismiss button can be created by wrapping close button isnide
.card__actions
and put inside
.card__header
element of
.card
EF
Elliot Fu
Friends of Veronika

Elliot requested permission to view your contact details


  <div className="card container-card bg-gray-800 text-gray-300 p-2">
    <div className="card__header">
      <div className="avatar avatar--square bg-white text-black mr-3">
        EF
      </div>
      <div className="card__title">
        <div className="text-bold">
          Elliot Fu
        </div>
        <div className="text-subtitle2 text-normal">
          Friends of Veronika
        </div>
      </div>
      <div className="card__actions ml-auto">
        <button className="btn btn--sm btn--icon-circle btn--rounded">
          <svg
            aria-hidden="true"
            className="icon-sm fill-white"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
          </svg>
        </button>
      </div>
    </div>
    <div className="card__content">
      <p className="text-body1">
        Elliot requested permission to view your contact details
      </p>
    </div>
    <div className="card__footer border-top">
      <div className="card__actions ml-auto">
        <button className="btn btn--sm btn--success mr-2">
          Approve
        </button>
        <button className="btn btn--sm btn--danger mr-2">
          Decline
        </button>
      </div>
    </div>
  </div>
Overlay can be given to card by adding
.card__overlay
div inside
.card
. It will take up the whole card space as an overlay with opacity. If overlay element is added inside
.card__media
, then it will overlay only the parent media element.
Lizard
Squamate Reptiles

  <div className="card card--square container-card bg-white text-gray-300">
    <div className="card__media">
      <img
        alt=""
        src="/contemplative-reptile.ee8e602a.jpg"
      />
    </div>
    <div className="card__overlay text-white flex-col-reverse">
      <div className="card__title">
        <div className="text-bold text-h6">
          Lizard
        </div>
        <div className="text-subtitle2">
          Squamate Reptiles
        </div>
      </div>
    </div>
  </div>
To make the card horizontal add class
.card--horizontal
and accordingly structure the parts.
Lizard
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica. Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica.
 <div className="card card--horizontal container--sm bg-gray-800 text-gray-300">
    <div className="card__media w-1/3">
      <img
        alt=""
        src="/contemplative-reptile.ee8e602a.jpg"
      />
    </div>
    <div className="card__content w-2/3">
      <div className="card__title">
        <div className="text-bold text-h4">
          Lizard
        </div>
      </div>
      <div className="text-body1 mb-2">
        Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica. Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      </div>
      <div className="text-body1 mb-2">
        Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica.
      </div>
      <div className="card__footer">
        <div className="card__actions">
          <button className="btn btn--sm btn--link text-bold text-white text-button">
            Share
          </button>
          <button className="btn btn--sm btn--link text-bold text-white text-button">
            Learn More
          </button>
        </div>
      </div>
    </div>
  </div>
On this page