Stacked List

A vertically stacked list of rows, each with consistent padding and optional hover/link behavior. The composition of StackedList and StackedListItem.

Molecule

Badge · Avatar

When To Use

Use Stacked List when information needs to be scanned quickly and compared across multiple rows, cards, or values.
Choose the example that best matches whether the user is browsing, monitoring, or drilling into structured data.
Lean on these patterns when you want consistent spacing and hierarchy before tuning the visual treatment.

When Not To Use

Do not use a dense data pattern when the primary task is storytelling, onboarding, or one-off explanation.
Do not flatten nuanced data into a compact summary card if the user still needs the underlying structure to make a decision.

Accessibility Notes

Preserve table semantics for tabular data and avoid flattening structured information into generic divs.
Use clear headings, summaries, and labels so assistive technologies can announce the data in context.
Do not rely on color alone to communicate trend, status, or state in charts and metric cards.

Key Props / API

Props

children, divided, bordered, className, href, onClick

Key exports

StackedList, StackedListItem

Example Code

import { StackedList, StackedListItem } from "@hilum/ui"

<StackedList>
  <StackedListItem href="#">
    <p className="body font-medium text-ground-900">Ricardo Cooper</p>
    <p className="caption text-ground-400">Backend Developer</p>
  </StackedListItem>
  <StackedListItem href="#">
    <p className="body font-medium text-ground-900">Kristen Ramos</p>
    <p className="caption text-ground-400">Product Manager</p>
  </StackedListItem>
</StackedList>

Stacked List · Basic

Simple rows

Name and description per row

Stacked List · With avatar

Avatar + name + email

Each row has an inline avatar and meta

Stacked List · Two column

Content + meta on right

Dates, badges, or statuses on the right side