#987
A whole page
A whole page (the sign-in template) in a PreviewStage iframe, laid out at the chosen width with its own media queries.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "A whole page" pattern (@codeatlasdev/ui demo #987, layout/preview-stage) in my app.
Call get_demo({ ids: ["#987"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Showing a full page or a template at real phone, tablet and desktop widths with isolated styles.
Keep these library parts, with the props and tokens the demo uses:
- PreviewStage from "@codeatlasdev/ui"
Behaviour to keep:
- `<PreviewStage label="Sign in template" src="/templates/auth/sign-in/" height={420}`
- `widths={[390, 768, 1280]}` are the presets next to Fill
- The page renders in an isolated iframe: real viewport width, real media queries, no style leakage
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- PreviewStage
@codeatlasdev/ui
How it is built
- `<PreviewStage label="Sign in template" src="/templates/auth/sign-in/" height={420}`
- `widths={[390, 768, 1280]}` are the presets next to Fill
- The page renders in an isolated iframe: real viewport width, real media queries, no style leakage
Related
Loading source.