#600
Reading width with an aside
A PageShell with width="reading" (form column capped at 46rem) and an aside snippet holding a section index, inside a fixed-height frame.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Reading width with an aside" pattern (@codeatlasdev/ui demo #600, layout/page-shell) in my app.
Call get_demo({ ids: ["#600"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Settings and form pages on wide screens that need a readable column plus a companion column (in-page index, summary, help, preview).
Keep these library parts, with the props and tokens the demo uses:
- PageShell, Card, TextField, Stack from "@codeatlasdev/ui"
Behaviour to keep:
- Frame is a 420px tall flex column with an inset outline
- `<PageShell title="Workspace settings" description="Reading width keeps the form at a comfortable line length." width="reading" asideLabel="Sections">`
- `{#snippet aside()}` renders a `Card` with a nav (aria-label On this page) of three links: General, Billing, Danger zone
- Body is a `Card full title="General"` with a `Stack gap="4"` of two `TextField`s: Name (Acme Inc.) and Slug (acme)
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
How it is built
- Frame is a 420px tall flex column with an inset outline
- `<PageShell title="Workspace settings" description="Reading width keeps the form at a comfortable line length." width="reading" asideLabel="Sections">`
- `{#snippet aside()}` renders a `Card` with a nav (aria-label On this page) of three links: General, Billing, Danger zone
- Body is a `Card full title="General"` with a `Stack gap="4"` of two `TextField`s: Name (Acme Inc.) and Slug (acme)
Related
Loading source.