#961
Embed
An AspectRatio of 16/9 inside a 28rem frame holding a centred caption, standing in for a video or iframe.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Embed" pattern (@codeatlasdev/ui demo #961, display/aspect-ratio) in my app.
Call get_demo({ ids: ["#961"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Embeds, maps and video players that have no intrinsic size but must hold a ratio while loading.
Keep these library parts, with the props and tokens the demo uses:
- AspectRatio from "@codeatlasdev/ui"
Behaviour to keep:
- `<AspectRatio ratio={16 / 9}>` with one `<div class="slot">16 / 9: any child, one box</div>` child
- Wrapper `.frame` is `max-width: 28rem` with `--ca-radius-md` and `overflow: hidden`
- `.slot` is `height: 100%` on `--ca-surface-sunken` and centres its text
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
- AspectRatio
@codeatlasdev/ui
How it is built
- `<AspectRatio ratio={16 / 9}>` with one `<div class="slot">16 / 9: any child, one box</div>` child
- Wrapper `.frame` is `max-width: 28rem` with `--ca-radius-md` and `overflow: hidden`
- `.slot` is `height: 100%` on `--ca-surface-sunken` and centres its text
Related
Loading source.