Sections

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

Section titled 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.

<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

Section titled 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.

<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

Section titled 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.

<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

Muted

Section titled Muted

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.

Stacked

Section titled Stacked

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.