Item List

Vertical list for Section Card bodies. Rows keep the same padding whether static or interactive so text aligns across cards. Pass onSelect for hover, focus, and keyboard select. Use ItemListSkeleton while rows are fetching — same flush padding with one pulse bar per row.

For muted-label / medium-value stacks, use Key Value instead — it wraps an Item List internally.

You might be looking for:

• Key Value

  A muted label beside a medium value.

• Table

  Dense columnar data — styled table or Slick Data Table.

Usage

import {
  ItemList,
  ItemListItem,
  ItemListSkeleton,
  SectionCard,
} from "@sophic/portal-ui";
import { CardContent } from "@sophic/portal-ui/components/ui/card";

<SectionCard title="Pending orders" count={3}>
  <CardContent className="px-0 py-0">
    <ItemList>
      <ItemListItem onSelect={() => {}}>
        {/* leading · body · trailing */}
      </ItemListItem>
      <ItemListItem>{/* static — same padding */}</ItemListItem>
    </ItemList>
  </CardContent>
</SectionCard>;

<SectionCard title="Pending orders">
  <ItemListSkeleton rows={3} />
</SectionCard>;

Put px-0 py-0 on CardContent so the row hover fill reaches both card edges. ItemList assigns first / last edge radius from child order so flush lists follow the card shell. ItemListSkeleton includes that flush CardContent — pass it as SectionCard children. Pass rows when you know the expected count (query limit, fixed field set); default is three (max eight).

Props

ItemListSkeletonProps

Changelog

• 24 September 2026 — Row hover is neutral-100. Full notes
• 8 September 2026 — Section Card titles sit inside the card; list bodies are unchanged. Full notes
• 19 August 2026 — “You might be looking for” map to Table. Full notes
• 3 August 2026 — ItemListSkeleton for loading Section Card lists. Full notes
• 24 July 2026 — Added for selectable Section Card rows. Full notes