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.
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.
<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.
Applying a .bs-* class adds a box shadow to a card. Useful when giving users the impression they can interact with the card.
<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.
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.
<a href="…" class="s-card">
<h2 class="fs-body3 lh-sm fc-dark">…</h2>
<p class="fs-body1 fc-medium">…</p>
<p class="fs-body1 s-link">…</p>
</a>
<a href="…" class="s-card bs-sm h:bs-md">
<h2 class="fs-body3 lh-sm fc-dark">…</h2>
<p class="fs-body1 fc-medium">…</p>
<p class="fs-body1 s-link">…</p>
</a>Linked card title
This is a description of the card’s content.
Learn more
Linked card title
When vertical space is an issue, the CTA can be moved inline with paragraph text. Learn more
Linked card title
When a card’s content is visually complex (ex. a graph) or having extra decoration is visually distracting.
Small box shadow on :hover
This is a description of the card’s content.
Learn more
Medium box shadow on :hover
This is a description of the card’s content.
Learn more
Large box shadow on :hover
This is a description of the card’s content.
Learn more
When a card is disabled or considered completed, apply the muted modifier to visually dim the card.
<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.