Plan Comparison
ProA full-width comparison table showing features across multiple plan tiers. Uses proper table semantics with column headers for plan names and row headers for features. Supports grouped feature sections with sub-headers for complex pricing pages.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard comparison table with feature rows and plan columns. | Use on pricing pages where users need to compare features across tiers. |
| Compact |
Usage Guidelines
Use proper <th> with scope="col" for plan headers and scope="row" for feature names.
Build comparison tables with CSS grid divs — use semantic <table> elements.
Group related features under section sub-headers for scanability.
Rely on colour alone to distinguish included from excluded features.
Highlight the recommended plan column with a distinct background.
Cram more than 4 plan columns — it becomes unreadable on smaller screens.
Use checkmarks and dashes (not just colour) to indicate included/excluded.
Code
Design Tokens
Accessibility
- Uses semantic <table>, <thead>, <tbody>, <th>, and <td> elements.
- Plan headers use scope="col"; feature labels use scope="row".
- Checkmarks include sr-only text like "Included" or "Not included".
- Table has a <caption> or aria-label describing its purpose.
- Responsive: on small screens, consider stacking cards instead of a horizontal scroll.