Content & statusBrick 0.1.2

List

List presents related static content through native unordered or ordered list semantics, finished markers and boundaries, and optional structured row anatomy. Atom owns list semantics; Brick owns visual presentation.

Live example

Built from the published package

Interactive

Package build
Browser checks
Release notes

Choose with confidence

Know when List is the right part

Use it when

Use List for features, requirements, release steps, people, files, statuses, and passive rows with independently focusable trailing actions. Use ordered when changing item order would change meaning.

Choose another path when

Use Nav List for destinations, Listbox or selection controls for choices, Grid/Stack for repetition without list meaning, and a future Data List for name/value records. List does not provide row activation, selection, routing, reordering, virtualization, or feed behavior.

Installation and imports

tsx

import { List } from "@flowstack-ui/brick";
// or
import { List } from "@flowstack-ui/brick/list";
import "@flowstack-ui/brick/styles.css";

The complete stylesheet above is the recommended default. For a measured route-aware build, replace it with the shared foundation and this component's stylesheet:

tsx

import "@flowstack-ui/brick/styles/core.css"; // once at the application root
import "@flowstack-ui/brick/styles/list.css";

Add the modular stylesheet for every other Brick component the route renders. Do not combine modular styles with styles.css or tokens.css.

Public exports include List, ListRootProps, ListItemProps, ListLeadingProps, ListContentProps, ListTitleProps, ListDescriptionProps, ListTrailingProps, ListVariant, ListSize, ListDensity, and ListMarker.

Quick start

tsx

<List.Root>
  <List.Item>Package build</List.Item>
  <List.Item>Browser checks</List.Item>
  <List.Item>Release notes</List.Item>
</List.Root>

Visual recipes and states

Plain has no component border. Divided adds boundaries between peer Items. Bordered adds an outer rounded boundary and peer dividers. Size changes shared typography and leading metrics. Density changes only vertical row space. Marker changes only marker presentation.

Items support simple direct content or a three-column structured row. Long Title and Description content wraps rather than truncates. Disabled changes opacity only; List has no hover, active, selected, loading, validation, focus, or motion state.

Examples

Ordered release steps

tsx

<List.Root ordered start={3}>
  <List.Item>Build the package</List.Item>
  <List.Item>Verify the archive</List.Item>
  <List.Item>Publish the release</List.Item>
</List.Root>

Structured status rows

tsx

<List.Root marker="none" variant="divided">
  <List.Item>
    <List.Leading><Icon aria-hidden="true">{/* SVG */}</Icon></List.Leading>
    <List.Content>
      <List.Title>Browser checks</List.Title>
      <List.Description>Desktop and mobile checks passed.</List.Description>
    </List.Content>
    <List.Trailing><Badge>Ready</Badge></List.Trailing>
  </List.Item>
</List.Root>

Nested requirements

tsx

<List.Root ordered>
  <List.Item>
    Prepare package
    <List.Root marker="circle">
      <List.Item>Run unit checks</List.Item>
      <List.Item>Inspect browser output</List.Item>
    </List.Root>
  </List.Item>
</List.Root>

Public contract

API

Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.

Root

Prop	Values	Default
`ordered`	boolean	`false`
`variant`	`plain`, `divided`, `bordered`	`plain`
`size`	`sm`, `md`, `lg`	`md`
`density`	`compact`, `comfortable`	`comfortable`
`marker`	`auto`, `disc`, `circle`, `square`, `decimal`, `lower-alpha`, `upper-alpha`, `lower-roman`, `upper-roman`, `none`	`auto`

Root preserves Atom render, asChild, slots, refs, and native attributes. Native ordered-list start, reversed, and type pass through. auto uses disc for unordered and decimal for ordered roots.

Item and structured parts

Item preserves Atom disabled, render, asChild, native item attributes including value, and its ref. Disabled adds aria-disabled and data-disabled but does not suppress events. Passive parts forward their native attributes, data/ARIA attributes, classes, styles, slots, and refs.

Shared responsibility

Accessibility

Native ul, ol, and li expose relationship, item count, and sequence. Use ordered only when sequence matters. Because marker-free CSS can hide list semantics from WebKit's accessibility tree, marker="none" supplies role="list" when the consumer did not author another role.

List adds no keyboard or focus behavior. A trailing control needs its own accessible name and state. Disabled Item is descriptive only: explicitly disable every interactive descendant separately. Forced colors retains readable markers, supporting text, and divided/bordered boundaries.

Responsive behavior

List defines no breakpoint. Logical padding and columns follow direction. Structured Content uses the remaining width while Leading and Trailing remain contained. Text wraps at narrow widths and nested lists use logical indentation. Surround List with Container, Grid, or Stack for page layout.

Stable visual contract

Styling and tokens

Customization

Prefer recipes, then public variables for a deliberate exception:

tsx

<List.Root
  variant="bordered"
  style={{
    "--brick-list-border-color": "var(--brick-color-accent-border)",
    "--brick-list-marker-color": "var(--brick-color-accent-solid)",
  }}
>
  <List.Item>Package build</List.Item>
</List.Root>

Tokens and CSS hooks

Stable classes are .brick-list, .brick-list__item, .brick-list__leading, .brick-list__content, .brick-list__title, .brick-list__description, and .brick-list__trailing. Slots use the matching list, list-item, list-leading, list-content, list-title, list-description, and list-trailing names.

Root exposes data-variant, data-size, data-density, data-marker, and Atom data-ordered. Every part exposes data-slot; Item exposes Atom data-disabled when applicable.

Public variables:

--brick-list-row-gap
--brick-list-row-padding-inline
--brick-list-row-padding-block
--brick-list-item-column-gap
--brick-list-marker-style
--brick-list-marker-color
--brick-list-marker-gap
--brick-list-border-color
--brick-list-border-width
--brick-list-radius
--brick-list-title-color
--brick-list-description-color
--brick-list-leading-color
--brick-list-disabled-opacity
--brick-list-nested-inset
--brick-list-part-align
--brick-list-title-font-size
--brick-list-title-line-height
--brick-list-description-font-size
--brick-list-description-line-height

Advanced reference

Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.

Maintainer resources

Tests, playground evidence, source notes, and release history remain available without crowding the plug-and-play guide.

Source docs Changelog Playground