Scale — Card Pricing

Install

Examples

Default

Slot a Badge into badge, the price into plan, supporting copy into description, Rows for features in the default slot, and a Button into actions.

Starter

$19 For individuals.

Basic components

1 project

Community support

Buy Now

Plan comparison

Lay tiers side by side and use the Badge status plus a higher-emphasis Button to flag the recommended plan.

Starter

$19 For individuals.

Basic components

1 project

Choose Starter

Guidelines

Usage

pricing pages, plan comparisons, and subscription tiers. For a plain surface, use Card.

Do

List the same features in the same order across tiers so they’re scannable.
Flag one recommended plan with a Badge and a primary button.
Keep the price prominent and the billing period unambiguous.

Don’t

Don’t cram unlimited feature rows in — summarise and link to full details.
Don’t give every tier a primary button; only the recommended one should compete.
Don’t hide the real cost behind vague copy.

Accessibility

Structure: the price renders in a <span>, not a heading — add a real heading near the card (e.g. the plan name) so tiers appear in the document outline.
Feature rows: the check icon is decorative; the Row text must convey what’s included on its own.
Action: the actions slot holds a real Button or link — keyboard focusable, with a label naming the plan it buys.
Comparison: when laying tiers side by side, keep a logical DOM order so screen-reader users read each plan top to bottom.
Contrast: the Badge status colour must meet WCAG AA against the card surface.

Properties

Card — the plain surface primitive.
Card Image — a media-led card with image and text.
Card Selector — selectable card for single- or multi-choice.
Row — the feature line items inside the card.

Card Pricing