Data display
Cards
The base surface for grouped content: layered shadow, background blur and a gradient stroke.
Examples
Spring campaign
12 assets waiting for review.
Anatomy
| # | Part | Description | Presence |
|---|---|---|---|
| 1 | Surface | 24px radius, 12px blur, gradient stroke | Required |
| 2 | Media | Nested radius 16px | Optional |
| 3 | Heading | A real heading level | Required |
| 4 | Actions | Buttons or one stretched link | Optional |
Specifications
| Corner radius | 24px (range 0 flat to 40 material) |
|---|---|
| Nested media radius | 16px, so media never leaks the corner |
| Padding | 24px · 16px compact |
| Vertical gap | 20px |
| Elevation | Multi-layer shadow + 12px background blur |
| Highlight | 1px top-inset shadow, 6% white |
| Stroke | styles.stroke.cardBorder, linear gradient matched to theme |
Interaction
| Key | Result |
|---|---|
| Tab | Each action once; a card is not a stop unless it is a link |
| Trigger | Response |
|---|---|
| Hover | Lift 2px and strengthen border |
| Click | On a linked card, the whole surface is the target |
Accessibility
role · article
1.3.1Info and Relationships2.4.6Headings and Labels2.5.8Target Size (Minimum)
| Requirement | How Rig meets it |
|---|---|
| Heading | Use h2 to h4 to match the page outline |
| One link | If the whole card is clickable, use one stretched link on the heading, not nested links |
| Media | alt text only if it carries information |
| Landmarks | Use <article> for standalone items |
Usage
| Do | Don’t |
|---|---|
| Keep one primary action per card | Do not nest links or buttons inside a clickable card |
| Do not use a card for one-line content |