#235
ca-prose, Callout and Steps
A documentation article using the ca-prose wrapper with headings, two Callouts, a Steps list and a request fields table.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "ca-prose, Callout and Steps" pattern (@codeatlasdev/ui demo #235, docs-kit/docs) in my app.
Call get_demo({ ids: ["#235"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Rendering API guide content, with tips, warnings, numbered steps and reference tables, inside a docs page.
Keep these library parts, with the props and tokens the demo uses:
- Callout, Steps from "@codeatlasdev/ui"
Behaviour to keep:
- Wrapper `<div class="ca-prose prose">` holds plain `h2`, `h3` and `p` elements with ids like `id="demo-auth"`
- `<Callout type="tip">` and `<Callout type="caution">`
- `<Steps>` wraps an `<ol>` with 2 items: Create a session and Connect with a QR code
- Table sits in `<div class="ca-table-wrap" tabindex="0" role="region" aria-label="Request fields">`
- Table columns: Field, Type, Description, with 2 rows for `to` and `text`
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
- Callout
@codeatlasdev/ui - Steps
@codeatlasdev/ui
How it is built
- Wrapper `<div class="ca-prose prose">` holds plain `h2`, `h3` and `p` elements with ids like `id="demo-auth"`
- `<Callout type="tip">` and `<Callout type="caution">`
- `<Steps>` wraps an `<ol>` with 2 items: Create a session and Connect with a QR code
- Table sits in `<div class="ca-table-wrap" tabindex="0" role="region" aria-label="Request fields">`
- Table columns: Field, Type, Description, with 2 rows for `to` and `text`
Related
Loading source.