#068
Tone and glow
Two Cards side by side: one with a brand tint and one with a brand glow, each with a title and one line of text.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Tone and glow" pattern (@codeatlasdev/ui demo #068, surfaces/card) in my app.
Call get_demo({ ids: ["#068"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Highlighting a featured or selected card without changing its content layout.
Keep these library parts, with the props and tokens the demo uses:
- Card from "@codeatlasdev/ui"
Behaviour to keep:
- `<Card tone="brand" class="accent">` titled Tinted
- `<Card glow class="accent">` titled Glowing
- Both cards share `class="accent"` styled with `flex: 1` and `min-width: 200px`
- Card content is a `.title` paragraph and a `.text` paragraph
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
- Card
@codeatlasdev/ui
How it is built
- `<Card tone="brand" class="accent">` titled Tinted
- `<Card glow class="accent">` titled Glowing
- Both cards share `class="accent"` styled with `flex: 1` and `min-width: 200px`
- Card content is a `.title` paragraph and a `.text` paragraph
Related
Loading source.