Cards

Cards are used to group similar concepts and tasks together to make information easier to scan, read, and act on. Cards should use a heading that sets clear expectations about the card’s purpose, paragraphs that put the most critical information first, and (optionally) calls to action on the bottom to direct user action.

Base

The base card styling applies a border and padding to the card.

Cards can be any size and it’s ok to increase the body text size for larger cards.

1
2
3
4
5
<div class="s-card">
    <h2 class="fs-body3 lh-sm fc-dark"></h2>
    <p class="fs-body1 fc-medium"></p>
    <button class="s-btn s-btn__primary s-btn__sm"></button>
</div>

Base card title

This is a description of the card’s content.

Base card title

This is a description of the card’s content. Sometimes the description is two or three sentences.

Box Shadows

Applying a .bs-* class adds a box shadow to a card. Useful when giving users the impression they can interact with the card.

1
2
3
<div class="s-card bs-sm"></div>
<div class="s-card bs-md"></div>
<div class="s-card bs-lg"></div>

Small box shadow

This adds a small box shadow.

Medium box shadow

This adds medium box shadow.

Large box shadow

This is the largest box shadow.

Linked Cards

The .s-card class can be applied to an <a> tag for instances where a whole card should link somewhere. If possible, linked cards should visually indication that they’re interactive (ex. including an .s-btn or .s-link somewhere).

A :hover style for border color is automatically added to all linked cards. For linked cards with a box shadow (.bs-*), adding a .h:bs-* class will apply a hover style to the box shadow as well. Increasing the .bs- size by a factor of one is usually best.

Muted

When a card is disabled or considered completed, apply the muted modifier to visually dim the card.

1
2
3
4
<div class="s-card s-card__muted">
    <h1 class="fs-body3 fc-dark"></h1>
    <p class="fs-body1 fc-light"></p>
</div>

Base card title

This is a description of the card’s content.

Linked card title

This is a description of the card’s content.