Design System/Molecules/Grid List

Grid List

A responsive grid of cards. Supports simple content cards, accent-strip cards with initials, and custom contact card layouts.

Molecule

Card · Badge · Avatar

When To Use

  • Use Grid 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, columns, gap, className, title, description

Key exports

GridList, GridListCard, GridListAccentCard

Example Code

import { GridList, GridListCard } from "@hilum/ui"

<GridList columns={3}>
  {projects.map((p) => (
    <GridListCard
      key={p.title}
      title={p.title}
      description={p.description}
      meta={p.meta}
      href={p.href}
    />
  ))}
</GridList>

Grid List · Simple cards

3-column cards

Title, description, and meta

Grid List · Accent cards

Colored accent strip

Initials + title + member count

Grid List · Contact cards

People cards with actions

Photo, role, and contact buttons