Skip to main content

Cards

tip

Jazz up your .card elements with .hov and .shadow utilities

variants​

By itself, .card doesn't do very much but prepares a wrapper which can contain child elements for card content and optional card titles.

.card.card.square

.content​

To add content to a .card, add a child element with the class of .content.

If the content is an image rather than text, add the .image class.

.content
.content
avatar
<div class="card">
  <div class="content">.content</div>
</div>

<div class="card square">
  <div class="content">.content</div>
</div>

<div class="card square">
  <div class="content image">
    <img src="device.png" alt="avatar" />
  </div>
</div>
tip

.card .content elements default to an violet background with purple text but customisable with all 6 key futureproof colors

Note that colour combination rules still apply (see futureproof colors)

.title​

.title
.content
.title
.content
tip

.card .title elements default to a coral background with purple text but customisable with all 6 key futureproof colors