# Price card

One plan at a glance: its name, its price, what it includes and the button that chooses it.

A block: a ready-made arrangement of components, to copy into a project. Its own classes carry the `site-` prefix; rename it to your project's own. Status: experimental. Figma: the Figma file, https://www.figma.com/community/file/1688324308358870630. Built from: Card, Icon, Button, Badge.

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

```html
<article class="smbk-card smbk-card--surface-slab smbk-card--layout-stacked site-price-card">
  <div class="smbk-card__content">
    <header class="smbk-card__header smbk-card__header--type-title smbk-card__header--size-lg">
      <div class="smbk-card__header-text">
        <div class="smbk-card__title-row">
          <h3 class="smbk-card__title">Team</h3>
        </div>
        <p class="smbk-card__meta">For a small team</p>
      </div>
    </header>
    <div class="smbk-card__body smbk-card__body--type-slot">
      <p class="site-price-card__price-row">
        <span class="site-price-card__price">$29</span>
        <span class="site-price-card__period">per month</span>
      </p>
      <ul class="site-price-card__includes">
        <li class="site-price-card__include"><i class="ph ph-check smbk-icon smbk-icon--size-sm site-price-card__tick" aria-hidden="true"></i>Every component and token</li>
        <li class="site-price-card__include"><i class="ph ph-check smbk-icon smbk-icon--size-sm site-price-card__tick" aria-hidden="true"></i>The Figma library</li>
        <li class="site-price-card__include"><i class="ph ph-check smbk-icon smbk-icon--size-sm site-price-card__tick" aria-hidden="true"></i>Updates for a year</li>
      </ul>
    </div>
    <footer class="smbk-card__footer smbk-card__footer--type-full-button smbk-card__footer--rule-off">
      <div class="smbk-card__footer-row">
        <button type="button" class="smbk-btn smbk-btn--tone-outline smbk-btn--size-md">
          <span class="smbk-btn__label">Choose Team</span>
        </button>
      </div>
    </footer>
  </div>
</article>
```

```tsx
import { Card, CardHeader, CardFooter, CardBody } from './design-system/components/card/card.js';
import { Button } from './design-system/components/button/button.js';
import { Icon } from './design-system/components/icon/icon.js';

<Card className="site-price-card" header={<CardHeader size="lg" title="Team" meta="For a small team" />} footer={<CardFooter type="full-button">
  <Button tone="outline">Choose Team</Button>
</CardFooter>}>
  <CardBody type="slot">
    <p className="site-price-card__price-row">
      <span className="site-price-card__price">$29</span>
      <span className="site-price-card__period">per month</span>
    </p>
    <ul className="site-price-card__includes">
      <li className="site-price-card__include">
        <Icon className="site-price-card__tick" name="Check" size="sm" />
        Every component and token
      </li>
      <li className="site-price-card__include">
        <Icon className="site-price-card__tick" name="Check" size="sm" />
        The Figma library
      </li>
      <li className="site-price-card__include">
        <Icon className="site-price-card__tick" name="Check" size="sm" />
        Updates for a year
      </li>
    </ul>
  </CardBody>
</Card>
```

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

```html
<article class="smbk-card smbk-card--surface-slab smbk-card--layout-stacked smbk-card--selected site-price-card">
  <div class="smbk-card__content">
    <header class="smbk-card__header smbk-card__header--type-title smbk-card__header--size-lg">
      <div class="smbk-card__header-text">
        <div class="smbk-card__title-row">
          <h3 class="smbk-card__title">Team</h3>
          <span class="smbk-badge smbk-badge--look-soft smbk-badge--tone-success smbk-badge--size-sm">
            <span class="smbk-badge__label">Your plan</span>
          </span>
        </div>
        <p class="smbk-card__meta">For a small team</p>
      </div>
    </header>
    <div class="smbk-card__body smbk-card__body--type-slot">
      <p class="site-price-card__price-row">
        <span class="site-price-card__price">$29</span>
        <span class="site-price-card__period">per month</span>
      </p>
      <ul class="site-price-card__includes">
        <li class="site-price-card__include"><i class="ph ph-check smbk-icon smbk-icon--size-sm site-price-card__tick" aria-hidden="true"></i>Every component and token</li>
        <li class="site-price-card__include"><i class="ph ph-check smbk-icon smbk-icon--size-sm site-price-card__tick" aria-hidden="true"></i>The Figma library</li>
        <li class="site-price-card__include"><i class="ph ph-check smbk-icon smbk-icon--size-sm site-price-card__tick" aria-hidden="true"></i>Updates for a year</li>
      </ul>
    </div>
    <footer class="smbk-card__footer smbk-card__footer--type-full-button smbk-card__footer--rule-off">
      <div class="smbk-card__footer-row">
        <button type="button" class="smbk-btn smbk-btn--tone-secondary smbk-btn--size-md">
          <span class="smbk-btn__label">Manage plan</span>
        </button>
      </div>
    </footer>
  </div>
</article>
```

```tsx
import { Card, CardHeader, CardFooter, CardBody } from './design-system/components/card/card.js';
import { Badge } from './design-system/components/badge/badge.js';
import { Button } from './design-system/components/button/button.js';
import { Icon } from './design-system/components/icon/icon.js';

<Card selected className="site-price-card" header={<CardHeader size="lg" title="Team" meta="For a small team" status={<Badge tone="success" size="sm">Your plan</Badge>} />} footer={<CardFooter type="full-button">
  <Button tone="secondary">Manage plan</Button>
</CardFooter>}>
  <CardBody type="slot">
    <p className="site-price-card__price-row">
      <span className="site-price-card__price">$29</span>
      <span className="site-price-card__period">per month</span>
    </p>
    <ul className="site-price-card__includes">
      <li className="site-price-card__include">
        <Icon className="site-price-card__tick" name="Check" size="sm" />
        Every component and token
      </li>
      <li className="site-price-card__include">
        <Icon className="site-price-card__tick" name="Check" size="sm" />
        The Figma library
      </li>
      <li className="site-price-card__include">
        <Icon className="site-price-card__tick" name="Check" size="sm" />
        Updates for a year
      </li>
    </ul>
  </CardBody>
</Card>
```

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

```html
<article class="smbk-card smbk-card--surface-slab smbk-card--layout-stacked site-price-card">
  <div class="smbk-card__content">
    <header class="smbk-card__header smbk-card__header--type-title smbk-card__header--size-lg">
      <div class="smbk-card__header-text">
        <div class="smbk-card__title-row">
          <h3 class="smbk-card__title">Starter</h3>
        </div>
        <p class="smbk-card__meta">For one person</p>
      </div>
    </header>
    <div class="smbk-card__body smbk-card__body--type-slot">
      <p class="site-price-card__price-row">
        <span class="site-price-card__price">$0</span>
        <span class="site-price-card__period">per month</span>
      </p>
      <ul class="site-price-card__includes">
        <li class="site-price-card__include"><i class="ph ph-check smbk-icon smbk-icon--size-sm site-price-card__tick" aria-hidden="true"></i>Every component and token</li>
        <li class="site-price-card__include"><i class="ph ph-check smbk-icon smbk-icon--size-sm site-price-card__tick" aria-hidden="true"></i>One project</li>
      </ul>
    </div>
    <footer class="smbk-card__footer smbk-card__footer--type-full-button smbk-card__footer--rule-off">
      <div class="smbk-card__footer-row">
        <button type="button" class="smbk-btn smbk-btn--tone-outline smbk-btn--size-md">
          <span class="smbk-btn__label">Choose Starter</span>
        </button>
      </div>
    </footer>
  </div>
</article>
<article class="smbk-card smbk-card--surface-slab smbk-card--layout-stacked smbk-card--selected site-price-card">
  <div class="smbk-card__content">
    <header class="smbk-card__header smbk-card__header--type-title smbk-card__header--size-lg">
      <div class="smbk-card__header-text">
        <div class="smbk-card__title-row">
          <h3 class="smbk-card__title">Team</h3>
          <span class="smbk-badge smbk-badge--look-soft smbk-badge--tone-success smbk-badge--size-sm">
            <span class="smbk-badge__label">Your plan</span>
          </span>
        </div>
        <p class="smbk-card__meta">For a small team</p>
      </div>
    </header>
    <div class="smbk-card__body smbk-card__body--type-slot">
      <p class="site-price-card__price-row">
        <span class="site-price-card__price">$29</span>
        <span class="site-price-card__period">per month</span>
      </p>
      <ul class="site-price-card__includes">
        <li class="site-price-card__include"><i class="ph ph-check smbk-icon smbk-icon--size-sm site-price-card__tick" aria-hidden="true"></i>Every component and token</li>
        <li class="site-price-card__include"><i class="ph ph-check smbk-icon smbk-icon--size-sm site-price-card__tick" aria-hidden="true"></i>The Figma library</li>
        <li class="site-price-card__include"><i class="ph ph-check smbk-icon smbk-icon--size-sm site-price-card__tick" aria-hidden="true"></i>Up to ten projects</li>
      </ul>
    </div>
    <footer class="smbk-card__footer smbk-card__footer--type-full-button smbk-card__footer--rule-off">
      <div class="smbk-card__footer-row">
        <button type="button" class="smbk-btn smbk-btn--tone-secondary smbk-btn--size-md">
          <span class="smbk-btn__label">Manage plan</span>
        </button>
      </div>
    </footer>
  </div>
</article>
<article class="smbk-card smbk-card--surface-slab smbk-card--layout-stacked site-price-card">
  <div class="smbk-card__content">
    <header class="smbk-card__header smbk-card__header--type-title smbk-card__header--size-lg">
      <div class="smbk-card__header-text">
        <div class="smbk-card__title-row">
          <h3 class="smbk-card__title">Business</h3>
        </div>
        <p class="smbk-card__meta">For a whole company</p>
      </div>
    </header>
    <div class="smbk-card__body smbk-card__body--type-slot">
      <p class="site-price-card__price-row">
        <span class="site-price-card__price">$79</span>
        <span class="site-price-card__period">per month</span>
      </p>
      <ul class="site-price-card__includes">
        <li class="site-price-card__include"><i class="ph ph-check smbk-icon smbk-icon--size-sm site-price-card__tick" aria-hidden="true"></i>Everything in Team</li>
        <li class="site-price-card__include"><i class="ph ph-check smbk-icon smbk-icon--size-sm site-price-card__tick" aria-hidden="true"></i>Projects without limit</li>
        <li class="site-price-card__include"><i class="ph ph-check smbk-icon smbk-icon--size-sm site-price-card__tick" aria-hidden="true"></i>Help within a working day</li>
      </ul>
    </div>
    <footer class="smbk-card__footer smbk-card__footer--type-full-button smbk-card__footer--rule-off">
      <div class="smbk-card__footer-row">
        <button type="button" class="smbk-btn smbk-btn--tone-outline smbk-btn--size-md">
          <span class="smbk-btn__label">Choose Business</span>
        </button>
      </div>
    </footer>
  </div>
</article>
```

```tsx
import { Card, CardHeader, CardFooter, CardBody } from './design-system/components/card/card.js';
import { Button } from './design-system/components/button/button.js';
import { Icon } from './design-system/components/icon/icon.js';
import { Badge } from './design-system/components/badge/badge.js';

<Card className="site-price-card" header={<CardHeader size="lg" title="Starter" meta="For one person" />} footer={<CardFooter type="full-button">
  <Button tone="outline">Choose Starter</Button>
</CardFooter>}>
  <CardBody type="slot">
    <p className="site-price-card__price-row">
      <span className="site-price-card__price">$0</span>
      <span className="site-price-card__period">per month</span>
    </p>
    <ul className="site-price-card__includes">
      <li className="site-price-card__include">
        <Icon className="site-price-card__tick" name="Check" size="sm" />
        Every component and token
      </li>
      <li className="site-price-card__include">
        <Icon className="site-price-card__tick" name="Check" size="sm" />
        One project
      </li>
    </ul>
  </CardBody>
</Card>
<Card selected className="site-price-card" header={<CardHeader size="lg" title="Team" meta="For a small team" status={<Badge tone="success" size="sm">Your plan</Badge>} />} footer={<CardFooter type="full-button">
  <Button tone="secondary">Manage plan</Button>
</CardFooter>}>
  <CardBody type="slot">
    <p className="site-price-card__price-row">
      <span className="site-price-card__price">$29</span>
      <span className="site-price-card__period">per month</span>
    </p>
    <ul className="site-price-card__includes">
      <li className="site-price-card__include">
        <Icon className="site-price-card__tick" name="Check" size="sm" />
        Every component and token
      </li>
      <li className="site-price-card__include">
        <Icon className="site-price-card__tick" name="Check" size="sm" />
        The Figma library
      </li>
      <li className="site-price-card__include">
        <Icon className="site-price-card__tick" name="Check" size="sm" />
        Up to ten projects
      </li>
    </ul>
  </CardBody>
</Card>
<Card className="site-price-card" header={<CardHeader size="lg" title="Business" meta="For a whole company" />} footer={<CardFooter type="full-button">
  <Button tone="outline">Choose Business</Button>
</CardFooter>}>
  <CardBody type="slot">
    <p className="site-price-card__price-row">
      <span className="site-price-card__price">$79</span>
      <span className="site-price-card__period">per month</span>
    </p>
    <ul className="site-price-card__includes">
      <li className="site-price-card__include">
        <Icon className="site-price-card__tick" name="Check" size="sm" />
        Everything in Team
      </li>
      <li className="site-price-card__include">
        <Icon className="site-price-card__tick" name="Check" size="sm" />
        Projects without limit
      </li>
      <li className="site-price-card__include">
        <Icon className="site-price-card__tick" name="Check" size="sm" />
        Help within a working day
      </li>
    </ul>
  </CardBody>
</Card>
```

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

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

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

## 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

| Key | What it does |
|---|---|
| Tab | Moves focus to each card's button in turn. |
| Enter | Presses the focused button. |

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

## Stylesheet

```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);
}
```