#845
Decorative
Avatars next to a visible name, marked decorative so a screen reader says the name once.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Decorative" pattern (@codeatlasdev/ui demo #845, display/avatar) in my app.
Call get_demo({ ids: ["#845"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Lists, headers and comment rows where the avatar repeats the name written beside it.
Keep these library parts, with the props and tokens the demo uses:
- Avatar from "@codeatlasdev/ui"
Behaviour to keep:
- `<Avatar alt={name} size="sm" decorative />` followed by `<span>{name}</span>` in each `<li>`
- People are `Ada Lovelace` and `Grace Hopper` in a `ul` with `list-style: none`
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
- Avatar
@codeatlasdev/ui
How it is built
- `<Avatar alt={name} size="sm" decorative />` followed by `<span>{name}</span>` in each `<li>`
- People are `Ada Lovelace` and `Grace Hopper` in a `ul` with `list-style: none`
Related
Loading source.