Skip to main content

Cards

Figma

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__filled 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.

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.

First introduced for our collections feature in Teams, cards can also be stacked to imply multiple sections or items. No need to overthink it, we can just nest our cards. Note: You’ll need to compensate for the 4px of nesting on that right edge to keep things equidistant.

<div class="s-card p0">
<div class="s-card ps-relative b4 l4">

</div>
</div>

Community announcements

A collection of various announcements shared across the org.

Deploys by Netlify