# I9kSection > Titled page section, named by its heading, whose header carries its own actions and an optional toolbar. It can collapse behind a disclosure button inside the heading, controlled with v-model:open or left to manage itself. The primary variant fills it with the brand green, and fullWidth lets that fill reach the viewport edges as a band. ```ts import { I9kSection } from '@9klabs/design'; ``` ## Examples ### With actions ```vue Member list ``` ### Controlled, with a toolbar ```vue Project list ``` ### Uncontrolled, initially closed ```vue Billing address and tax number. ``` ### Primary ```vue
Two evenings of live pairing on real Vue codebases, with notes to keep. See the schedule Read past notes
``` ### Full-width primary band ```vue
The band reaches the edges; the text keeps its column. Panels turn translucent on the green. Borders and text follow. Start building Talk to us
``` ### Arabic RTL ```vue
قائمة الملاحظات.
``` ## Watch out - Binding `open` makes the section collapsible; use `collapsible` alone for a section that manages its own state. - A controlled section only emits `update:open`; bind `v-model:open` or the disclosure button does nothing. - `defaultOpen` is true, unlike I9kCollapsible, because a section shows its content unless asked not to. - Actions and toolbar stay visible while the section is closed, so a result an action reports inside the body is hidden until the section opens; open it from the action. - Every instance is a named `
`, which is a region landmark; do not use it for small groups. - The body is hidden with the `hidden` attribute, not an inline style, so it stays closed under a `style-src` Content Security Policy. - `fullWidth` only extends the fill, so it has no visible effect on `variant="default"`. - Render I9kModal outside a `variant="primary"` section, not next to its trigger in `#actions` or the body: its native `` inherits the white-on-green tokens while it paints off the green, so its surface turns translucent and the page shows through. - The full-width band paints past the section with a border-image outset. An ancestor with `overflow: hidden`, `clip` or `auto` cuts it off at that ancestor edge, and it paints over the background of a non-positioned side column beside the page column. - On `variant="primary"`, a primary I9kButton inverts to white with green text, and focus rings turn white; do not override those colors back to green. - Error, warning and success colors are not re-mapped on `variant="primary"`: in the light theme the error color is 1.06:1 on the green and the success color is the green itself, so an error message or invalid border is invisible. Keep any field that can show an error, and any feedback, off the green. - On the default and full-width variants the disclosure button sits 0.5rem past the section inline-start edge so its title lines up with the body, and its focus ring reaches about 0.8rem out; inside a scroll container or `overflow: hidden`, leave that much room or both are clipped. The contained primary variant keeps both inside its padding. ## API ### Props | Prop | Type | Default | Required | | --- | --- | --- | --- | | `title` | `string` | — | yes | | `id` | `string` | `undefined` | no | | `level` | `2 \| 3 \| 4 \| 5 \| 6` | `2` | no | | `collapsible` | `boolean` | `false` | no | | `open` | `boolean` | `undefined` | no | | `defaultOpen` | `boolean` | `true` | no | | `variant` | `'default' \| 'primary'` | `'default'` | no | | `fullWidth` | `boolean` | `false` | no | ### Emits | Event | Payload | | --- | --- | | `update:open` | `[open: boolean]` | ### Slots - `actions` - `toolbar` - `default` ## Agent prompt ```text Use I9kSection from @9klabs/design for a titled section of a page whose actions belong in its header, such as "Invite member" beside "Team", optionally collapsible. import { I9kSection } from '@9klabs/design'; Props: - title: string (required) — the heading text; it is also the disclosure button's label when collapsible. - id?: string — set on the
; the heading gets "-heading" and the body "-body". Omit it and unique ids are generated. - level?: 2 | 3 | 4 | 5 | 6 (default 2) — the rendered heading level (). - collapsible?: boolean (default false) — puts a disclosure button in the heading and lets the section manage its own open state. - open?: boolean (default undefined) — bind with v-model:open to control the open state from the parent, e.g. for expand-all. Binding a boolean makes the section collapsible; also set `collapsible` when the bound value can be undefined, or the section has no disclosure button while it is. - defaultOpen?: boolean (default true) — the initial state of a collapsible section whose `open` is not bound. - variant?: 'default' | 'primary' (default 'default') — 'primary' fills the section with the brand green, pads it, rounds its corners, and re-themes its content for the green (see Behavior). - fullWidth?: boolean (default false) — on the primary variant, the green reaches the viewport edges while the content stays in its column, as a full-width band. It has no visible effect on the default variant, which has no fill. Emits: - update:open(open: boolean) — every click on the disclosure button, with the requested state. Slots: - default — the section body; it gets the `hidden` attribute while closed. - actions — controls for the section, rendered in the header after the heading, outside the disclosure button, and still visible while closed. - toolbar — a full-width header row under the heading and actions, such as filters or expand-all; still visible while closed. Data attributes (stable hooks for tests and page scripts): - data-i9k-section-toggle — on the disclosure button (only while collapsible). - data-i9k-section-body — on the body wrapper. Behavior: the root is a
labelled by its heading (aria-labelledby), so it is a named region landmark. While collapsible, the heading wraps a