#097
Card layout
A card skeleton with a circular avatar placeholder beside three text lines of different widths.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Card layout" pattern (@codeatlasdev/ui demo #097, feedback/skeleton) in my app.
Call get_demo({ ids: ["#097"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Loading placeholder for a profile or list card so layout does not jump when data arrives.
Keep these library parts, with the props and tokens the demo uses:
- Skeleton, Card, Stack, Flex from "@codeatlasdev/ui"
Behaviour to keep:
- `<Card p="5" full>`
- `<Skeleton variant="circular" width="48px" height="48px" />` inside `<Flex gap="4" align="start">`
- Three lines in `<Stack gap="2">`: `height="16px" width="40%"`, `height="13px" width="70%"`, `height="13px" width="55%"`
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
How it is built
- `<Card p="5" full>`
- `<Skeleton variant="circular" width="48px" height="48px" />` inside `<Flex gap="4" align="start">`
- Three lines in `<Stack gap="2">`: `height="16px" width="40%"`, `height="13px" width="70%"`, `height="13px" width="55%"`
Related
Loading source.