role container
Card draft v0.1.0
A surface that groups a title and related content as one unit.
A card gathers what belongs together, a title and its content, on a raised surface with its own edge, so a page of many things reads as a grid of units: a project in a list of projects, a plan in a pricing page, a setting group. It is a surface, not a control: a card that opens something holds a link or a button; a card is never itself clickable. Its surface level follows the Color foundation.
States matrix
Every option of each styling property against every declared state, per part when states belong to parts. Properties whose options combine in one component token path are crossed: one table per combination of the others. States are forced with data-state, so what you see is exactly what the CSS defines, independent of the pointer. A column header names the inputs or platforms a state belongs to; states without a web rendering are listed under the table.
By surface
| Surface | default |
|---|---|
level-1 |
Quantum Design SystemTechnology-agnostic component specifications, DTCG tokens and a vanilla CSS reference implementation. |
level-2 |
Quantum Design SystemTechnology-agnostic component specifications, DTCG tokens and a vanilla CSS reference implementation. |