0.2.2 alpha

Menu

Price card

ExperimentalGet the Figma fileBlock

One plan at a glance: its name, its price, what it includes and the button that chooses it.A block is copied, not installed: take an example's code and the stylesheet at the foot of the page, and rename the site- prefix to your project's own.

Examples

Usage

One plan: its name and who it is for, the price and its period, three things it includes, and an outline button that chooses it.

Team

For a small team

$29per month

  • Every component and token
  • The Figma library
  • Updates for a year

Chosen

The plan the reader is on: the selected edge round the card, said in words by the badge, and a secondary button that manages it.

Team

Your plan

For a small team

$29per month

  • Every component and token
  • The Figma library
  • Updates for a year

Three plans

Plans side by side, the chosen one in the middle, every card as tall as the row so the buttons line up. Where there is less room they wrap, and on a phone they stack.

Starter

For one person

$0per month

  • Every component and token
  • One project

Team

Your plan

For a small team

$29per month

  • Every component and token
  • The Figma library
  • Up to ten projects

Business

For a whole company

$79per month

  • Everything in Team
  • Projects without limit
  • Help within a working day

Built from

Guidelines

Purpose

Shows one plan on a pricing page or in billing settings. It names the plan and who it is for. Under that come the price, how often it is paid, what the plan includes and a button to choose it. Several sit in a row so a reader can compare them, and the reader's current plan is marked.

When to use

  • On a pricing page, 2 to 4 plans in a row.
  • In billing settings, to show the plan a reader pays for now beside the ones they could move up or down to.

When not to use

  • For one price with nothing to compare it with. Write it in the text, beside the button.
  • For a long comparison of features. Use a table, and keep the cards for what each plan is about.

Usage rules

Do

  • Keep each line of the list short.
  • List the same kinds of things on every plan, in the same order, so a reader can compare them line by line.
  • Mark one plan at most.

Don't

  • Rely on the edge alone.
  • Hide a price behind a button. Say what the plan costs, or say that it is priced on request.

Anatomy

  • The card, the Card component. Its large header names the plan, with a line on who it is for. Its slot body holds the price and the list, and its footer one full-width button.
  • The price in the medium heading style, with its period beside it on the same line.
  • What the plan includes, a list in the small body style, each line after a tick, the Icon component.
  • The button, the Button component, outline for a plan to choose and secondary for the current plan.
  • The plan the reader is on adds the card's selected edge and says so in words with the Badge component in its header.

Behavior

The page sets which plan is the reader's. That card takes the selected edge, the badge and a button that manages the plan. In a row, the cards share the width and stand as tall as the row, so their buttons line up. They wrap where there is less room, and stack on a phone. The card itself takes no focus. Its button is the one stop.

Accessibility

What it does for you

  • The card is an article, and the plan's name is its heading.
  • What the plan includes is a list, so a screen reader says how many lines it has.
  • The ticks are decoration and are hidden from assistive technology.
  • The reader's plan says so in words in its badge, never only by the edge's color.

What you must do

  • Make the plan's name a heading at the level the page needs.
  • Say which plan a button chooses in its label, such as "Choose Team", so a screen reader's list of buttons tells them apart.
  • Write the period in words, such as "per month".

How to test

  • With a screen reader, each card reads the plan's name as a heading, then the price and its period. The list follows with its count, then a button named for the plan.
  • In a forced-color mode, the reader's plan still says so in words in its badge.

Keyboard

Price card keys
KeyWhat it does
Tab
Moves focus to each card's button in turn.
Enter
Presses the focused button.

Source

The price card's own layout, its classes under the site- prefix. The components inside it are drawn by the design system's stylesheet.

Stylesheet
price-card.css
/* site-price-card — Price card, a block: one plan, its price, what it includes and the button that chooses it. Copy
 * it into your project and rename site- to your project's own prefix. The frame is the Card component: its header
 * names the plan, its slot body holds the price and the list, and its full-width button footer holds the Button. The
 * plan a reader has already chosen takes the card's selected edge and says so in a Badge. The block draws only the
 * price line and the list; each tick is the Icon component. */

/* The price, then its period beside it on the same baseline. */
.site-price-card__price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--smbk-space-inline-xs);
  margin: 0;
}

.site-price-card__price {
  color: var(--smbk-color-text-default);
  font-family: var(--smbk-typography-heading-md-font-family);
  font-size: var(--smbk-typography-heading-md-font-size);
  font-weight: var(--smbk-typography-heading-md-font-weight);
  line-height: var(--smbk-typography-heading-md-line-height);
  letter-spacing: var(--smbk-typography-heading-md-letter-spacing);
  font-variant-numeric: tabular-nums;
}

.site-price-card__period {
  font-family: var(--smbk-typography-body-sm-font-family);
  font-size: var(--smbk-typography-body-sm-font-size);
  font-weight: var(--smbk-typography-body-sm-font-weight);
  line-height: var(--smbk-typography-body-sm-line-height);
  letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
}

/* What it includes: one line each, a tick before it. */
.site-price-card__includes {
  display: flex;
  flex-direction: column;
  gap: var(--smbk-space-stack-xs);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--smbk-typography-body-sm-font-family);
  font-size: var(--smbk-typography-body-sm-font-size);
  font-weight: var(--smbk-typography-body-sm-font-weight);
  line-height: var(--smbk-typography-body-sm-line-height);
  letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
}

.site-price-card__include {
  display: flex;
  align-items: center;
  gap: var(--smbk-space-inline-sm);
}

.site-price-card__tick {
  flex: none;
  color: var(--smbk-color-text-default);
}