LVL-02
Untriaged Level comparison matrix
A real comparison table for readers who want to check a specific capability rather than read three summaries.
Use it when
A real comparison table for readers who want to check a specific capability rather than read three summaries.
- Category
- Service levels and scope
- Layout archetype
- Data table
- Page position
- middle (derived)
- Purpose
- compare (derived)
- Field
- light (derived)
- Interaction
- static (derived)
- Motifs
- Held column, Margin note, Quiet field
Content it requires
- Nine or fewer capability rows
- A true or false value for each of the four levels
Do not use it when
- Scrolls horizontally below 640px. Acceptable for a genuine data table and better than collapsing a matrix into cards.
- Tick and dash marks are aria-hidden with visually hidden text alternatives. Keep both if you edit it.
- Capabilities must be strictly cumulative. A gap in the middle of a row means the level model is wrong, not the table.
Variants
None. Colour swaps and mirrored alignment do not count as variants.
Implementation
src/components/patterns/LevelMatrix.astro
---
import LevelMatrix from '../components/patterns/LevelMatrix.astro';
---
<LevelMatrix />Import directly. Do not route production through patternComponents.
Production usage
Not yet used on a production page. Nothing here has been proven in front of a customer.
Accessibility
- Verified at 360, 768, 1024, and 1440 with no horizontal overflow.
- No interactive controls beyond links and buttons inherited from the design system.
- Colour never carries meaning alone: every state marker is paired with text.
- Motion respects prefers-reduced-motion.