#098
Image placeholder
A flush card skeleton with a 180px rectangular image placeholder above two caption lines.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Image placeholder" pattern (@codeatlasdev/ui demo #098, feedback/skeleton) in my app.
Call get_demo({ ids: ["#098"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Loading placeholder for media cards such as products, posts or galleries.
Keep these library parts, with the props and tokens the demo uses:
- Skeleton, Card, Stack from "@codeatlasdev/ui"
Behaviour to keep:
- `<Card flush full>`
- `<Skeleton variant="rectangular" height="180px" />` fills the top of the card
- Caption in `<Stack gap="2">`: `height="16px" width="50%"` and `height="13px" width="80%"`
- Caption wrapper `<div class="caption">` has `padding: 16px`
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 flush full>`
- `<Skeleton variant="rectangular" height="180px" />` fills the top of the card
- Caption in `<Stack gap="2">`: `height="16px" width="50%"` and `height="13px" width="80%"`
- Caption wrapper `<div class="caption">` has `padding: 16px`
Related
Loading source.