#076
Elevation
Six solid Surface tiles showing elevation levels 0 to 5 in a wrapping row.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Elevation" pattern (@codeatlasdev/ui demo #076, surfaces/surface) in my app.
Call get_demo({ ids: ["#076"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Choosing how much depth a card, panel or popover needs.
Keep these library parts, with the props and tokens the demo uses:
- Surface from "@codeatlasdev/ui"
Behaviour to keep:
- `const levels = [0, 1, 2, 3, 4, 5] as const` rendered with `{#each levels as elevation (elevation)}`
- `<Surface material="solid" {elevation} p="4" class="tile">`
- Each tile prints Elevation 0 to Elevation 5 in a `.name` paragraph
- `.tile` uses `min-width: 7rem` in a wrapping flex `.row`
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Surface
@codeatlasdev/ui
How it is built
- `const levels = [0, 1, 2, 3, 4, 5] as const` rendered with `{#each levels as elevation (elevation)}`
- `<Surface material="solid" {elevation} p="4" class="tile">`
- Each tile prints Elevation 0 to Elevation 5 in a `.name` paragraph
- `.tile` uses `min-width: 7rem` in a wrapping flex `.row`
Related
Loading source.