Pricing
Tiers as cards; the featured tier is solid in the tone.
Examples
Pricing
Starter
€0/mo
- 1 project
- Community support
Pro
€12/mo
- Unlimited projects
- Priority support
Team
€48/mo
- SSO
- Audit log
Anatomy
.pricing | Grid of tiers that wraps to fewer columns as space runs out. Cards align to the top. |
> .card | One tier: name, price, features, action, evenly spaced. |
p.price | The figure, large with tabular numbers. Usable outside a pricing grid. |
p.price > small | The period (/mo), small and muted. |
.card > ul | Feature list. Each item gets a check mark in the accent, with wrapped lines hanging clear of it. |
.card > .btn | The tier's action. Inverted on the featured card. |
API
| Attribute | Values | Description |
|---|---|---|
data-featuredon .card | boolean | On one tier inside .pricing: solid tone fill with contrast text and an inverted button, no blur. |
data-toneon .card | accentsuccesswarningdangerinfo | Changes the tone the featured card is filled with. Default accent. |
Accessibility
- The check marks are CSS-generated content, which some screen readers read aloud before each feature.
- "Featured" is only a fill. Say why in text ("Most popular") so it reaches everyone.
/mois read literally. Add.sr-onlytext such as "per month" if the abbreviation is unclear.- Name each tier with a heading so screen reader users can jump between them.