NoteList

Card of short titled notes separated by rules — the accessibility block of a documentation page.

Built-in ARIA

The trigger carries aria-expanded.

Keyboard

Arrow keys move, Escape closes.

Reduced motion

The slide is dropped, the panel still opens.

Variant

Notes (demo)

<NoteList />

01 Examples

Notes as they appear on a page

An accessibility card

The shape this component exists for: three short notes about ARIA, keyboard and motion, in the card that closes almost every component page.

Built-in ARIA

The trigger carries aria-expanded and points at the panel it opens.

Keyboard

Arrow keys move between items, Escape closes and returns focus to the trigger.

Reduced motion

The slide is dropped under prefers-reduced-motion; the panel still opens.

<Section marker id="accessibility" title="Accessibility">
  <NoteList>
    <Note title="Built-in ARIA">
      <p>The trigger carries <code>aria-expanded</code> and points at the panel it opens.</p>
    </Note>
    <Note title="Keyboard">
      <p>Arrow keys move between items, Escape closes and returns focus to the trigger.</p>
    </Note>
    <Note title="Reduced motion">
      <p>The slide is dropped under <code>prefers-reduced-motion</code>; the panel still opens.</p>
    </Note>
  </NoteList>
</Section>

A note that is a list

The prose tokens sit on the row, not on an inner paragraph — so a note can hold a list without fighting the component for the block element.

Supported keys

Home / End jump to the first and last row
PageUp / PageDown move by a visible page

<NoteList>
  <Note title="Supported keys">
    <ul class="list-disc pl-4">
      <li><code>Home</code> / <code>End</code> jump to the first and last row</li>
      <li><code>PageUp</code> / <code>PageDown</code> move by a visible page</li>
    </ul>
  </Note>
</NoteList>

Flush, inside a surface that already has a border

variant="flush" drops the card chrome and keeps the rules between rows — for a note list nested in a card, an InfoCard or a table cell.

Before you deploy

Environment

Set ORIGIN, or the CSRF check rejects every POST.

Migrations

Run them before the new build takes traffic, not after.

<Card variant="outlined" class="p-6">
  <h3 class="mb-2 font-semibold">Before you deploy</h3>
  <NoteList variant="flush">
    <Note title="Environment">Set <code>ORIGIN</code>, or the CSRF check rejects every POST.</Note>
    <Note title="Migrations">Run them before the new build takes traffic, not after.</Note>
  </NoteList>
</Card>

02 Accessibility

No landmark, no heading of its own

The list renders a plain <div>. The enclosing <Section> is already a named region, and a second nested one would add a landmark that announces nothing new — a screen-reader user would step into it and hear an unnamed region.

Note titles are real headings

A note title renders an <h3> by default, so the notes appear in the document outline under their section heading. Set headingLevel when the list sits deeper than a top-level <Section> — a title styled to look like a heading but emitted as a <div> is invisible to the outline.

Separators are decoration

The rules between rows are borders, not <hr> elements, so they carry no semantics and are not announced. The grouping a reader hears comes from the headings.

03 API Reference

Complete list of component properties and their configurations

7 props

Prop	Type	Default	Description
`children`	`Snippet`	—	The `Note` rows. Anything else renders too, but loses the row padding the separators are calibrated against.
`class`	`string`	—	Extra classes merged onto the root element.
`slotClasses`	`Partial<Record<NoteListSlots, string>>`	—	Per-slot class overrides for internal elements.
`unstyled`	`boolean`	—	Strip all default styles; combine with `slotClasses` to rebuild from scratch.
`variant` variant	cardflush	`card`	Controls the visual style and presentation of the NoteList. Determines the component's visual treatment. Available options: card, flush.
`...HTMLAttributes<HTMLElement>` inherited	`HTMLAttributes`	—	HTML attributes (excluding: 'children')
`...NoteListVariantProps` variant	`VariantProps`	—	Styling variants from NoteListVariantProps

04 Types

Local type definitions used by this component.

6 types

Only referenced

Name	Kind	Category	Used by	Description
NoteListProps	interface	props	0	Props interface for NoteList component
NoteProps	interface	props	0	Props interface for Note component
NoteListVariantProps	type	variant	1	—
NoteListSlots	type	variant	0	Slot names derived from the `tv()` config above — single source of truth for `slotClasses`.
NoteVariantProps	type	variant	0	—
NoteSlots	type	variant	0	Slot names derived from the `tv()` config above — single source of truth for `slotClasses`.

05 Installation

Import

import { NoteList, Note } from '@urbicon-ui/docs';

llm.txt