Card

Example Code

<div class="card">
  <h1 class="card-title">Optional Title</h1>
  <p>Content</p>
</div>

Content

Cards can either be Primary or Secondary. All cards default to the Primary variant. To make a card secondary, add the class secondary.

This is an example of a Primary card.

This is an example of a Secondary card.

One use case for Secondary cards is creating nested cards.

This Secondary card is nested within a Primary one.

You can add a title to the card by adding a child element with the class card-title.

I have a title.

Me too!