Avala Design
← Components/patterns

StructuredList

Carbon-spec structured list. A row+cell list-like structure used for key-value or comparison lists. Lighter than DataTable (no sort, no filter, no virtualization). Supports optional radio selection mode.

patternsstablea11y: untested3/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { StructuredList, StructuredListBody, StructuredListCell, StructuredListHead } from "@avala/design";

<StructuredList>
  <StructuredListBody />
  <StructuredListCell />
  <StructuredListHead />
</StructuredList>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

patterns-structuredlist--defaultOpen in Storybook →

When to use

  • Two-column key-value rendering (Project / Owner / Created / Status).
  • Comparison lists where each row aligns by column but the data is small enough not to need DataTable.
  • Single-radio pickers over a small set of rows (Carbon's selectable variant).
  • Settings summaries — what your account currently shows, with no in-line editing.

When not to use