#111
Avatar stack
An overlapping avatar stack of three photo avatars and a fourth `+4` overflow avatar.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Avatar stack" pattern (@codeatlasdev/ui demo #111, display/avatar) in my app.
Call get_demo({ ids: ["#111"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Showing collaborators on a card, project or document with an overflow count.
Keep these library parts, with the props and tokens the demo uses:
- Avatar from "@codeatlasdev/ui"
Behaviour to keep:
- `const people` has 4 entries: Alice, Bob and Clara with `src`, and `{ alt: '+4' }` without one
- `{#each people as p, i}` renders `<Avatar src={p.src} alt={p.alt} size="md" />`
- Each avatar is wrapped in `<div class="item" style="--z:{people.length - i}">`
- Overlap uses `.item { margin-left: -10px; position: relative; z-index: var(--z, 0); }`
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
- `const people` has 4 entries: Alice, Bob and Clara with `src`, and `{ alt: '+4' }` without one
- `{#each people as p, i}` renders `<Avatar src={p.src} alt={p.alt} size="md" />`
- Each avatar is wrapped in `<div class="item" style="--z:{people.length - i}">`
- Overlap uses `.item { margin-left: -10px; position: relative; z-index: var(--z, 0); }`
Related
Loading source.