#107
With image
A row of four large avatars loaded from image URLs.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "With image" pattern (@codeatlasdev/ui demo #107, display/avatar) in my app.
Call get_demo({ ids: ["#107"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: User lists, comments and team pages where members have profile photos.
Keep these library parts, with the props and tokens the demo uses:
- Avatar from "@codeatlasdev/ui"
Behaviour to keep:
- Four avatars with `size="lg"`
- `src="https://i.pravatar.cc/150?img=1"` with `alt="Alice Martin"`
- `src="https://i.pravatar.cc/150?img=12"` with `alt="Bob Chen"`
- `src="https://i.pravatar.cc/150?img=32"` with `alt="Clara Silva"`
- `src="https://i.pravatar.cc/150?img=47"` with `alt="David Kim"`
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
- Four avatars with `size="lg"`
- `src="https://i.pravatar.cc/150?img=1"` with `alt="Alice Martin"`
- `src="https://i.pravatar.cc/150?img=12"` with `alt="Bob Chen"`
- `src="https://i.pravatar.cc/150?img=32"` with `alt="Clara Silva"`
- `src="https://i.pravatar.cc/150?img=47"` with `alt="David Kim"`
Related
Loading source.