#070
Header and actions
A Card with a built-in Team members header and an Invite button supplied through a headerActions snippet.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Header and actions" pattern (@codeatlasdev/ui demo #070, surfaces/card) in my app.
Call get_demo({ ids: ["#070"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Panels whose header needs a title and an action, such as team, billing or settings sections.
Keep these library parts, with the props and tokens the demo uses:
- Card, Button from "@codeatlasdev/ui"
Behaviour to keep:
- `<Card title="Team members" class="titled">` with `max-width: 420px`
- `{#snippet headerActions()}` renders `<Button size="sm" variant="outlined">Invite</Button>`
- Body is one paragraph explaining `title` and `headerActions`
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
- `<Card title="Team members" class="titled">` with `max-width: 420px`
- `{#snippet headerActions()}` renders `<Button size="sm" variant="outlined">Invite</Button>`
- Body is one paragraph explaining `title` and `headerActions`
Related
Loading source.