Cards

The .fizz-card class provides a surface that you can combine with other utilities to make a number of different designs. By itself, it only applies a background color (white) and hides any overflow. (The default body background used to be gray.)

You can add a border using the .fizz-bordered utility:

You can then add .fizz-inset utilities to apply padding:

You can then add .fizz-elevation-1 to apply a shadow:

Within a card you can also use flex utilities to further arrange content within a card.

Interactive Cards

Use interactive cards to make a card clickable while also allowing links within to be clickable. Since you can't nest anchor elements, you need to include the target of the card using .fizz-overlay-link, followed by the content of the card. Any links within the card will be clickable, allowing you to target separate URLs. In the example below. Clicking on the link within the card will send you to Google, while clicking anywhere else within the card will send you to Provi.

<div class="fizz-card fizz-card-interactive fizz-bordered fizz-inset-square-8">
  <a href="https://provi.com" class="fizz-overlay-link"></a>
  <figure class="fizz-flex-row-0">
    <img src="https://assets.codepen.io/281/whiskey.png" class="fizz-inset-square-16"/>
    <figcaption>
      <p class="fizz-text-large"><strong>Breakthru Beverage Group</strong></p>
      <p class="fizz-text-small fizz-stack-8">Jessica Applescause, Mark Kitaeff, Amy Moye...</p>
      <p><a href="https://google.com/"><strong>Reorder past products</strong></a></p>
    </figcaption>
  </figure>
</div>