AppGridList
Grid variant of app-stacked-list — same item shape rendered as cards in a 2- or 3-column grid. Each card: optional leading media + title + meta + description + actions. Cards become a single linked surface when href is set. Presentational and theme-driven.
Installation
pnpm dlx @hex-core/cli add app-grid-listUsage
import { AppGridList } from "@/components/ui/app-grid-list"Projects grid
Three cards with leading icon, title, meta, description, and an action.
import { AppGridList, Button } from "@hex-core/components";
<AppGridList
title="Projects"
items={[
{
title: "Customer dashboard",
meta: "Updated 2h ago",
description: "Internal analytics for the sales team.",
href: "/projects/customer-dashboard",
},
]}
/>Variant values
columnsCards per row on desktop.| Value | Description |
|---|---|
threedefault | Three across. |
two | Two across. |
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | object | — | ReadonlyArray<{ title; description?; meta?; leading?: ReactNode; actions?: ReactNode; href? }>. Set href to make the whole card a single linked anchor. |
eyebrow | ReactNode | — | Section eyebrow above the title. |
title | ReactNode | — | Section heading. |
description | ReactNode | — | Section subcopy below the heading. |
columns | enum | three | Cards per row on ≥lg: 'two' or 'three'. |
className | string | — | Additional classes applied to the root wrapper. |
AI Guidance
When to use
Use for browsing entities (projects, dashboards, files) where a card preview reads better than a row. Pair href on each card to navigate to the entity's detail page. For columnar data, use app-data-table; for compact row lists, use app-stacked-list.
When not to use
Don't use for tabular data (use app-data-table) or feed-style activity (use app-feed). Don't mix card sizes — let the grid stay uniform.
Common mistakes
- Putting actions inside a linked card — nested interactive elements; either drop href or move actions off the card.
- Mixing very short descriptions with very long ones — cards line up by max content; truncate or normalize.
- Forgetting an empty-state — render <Empty> when items is [].
Accessibility
When href is set the card is a single anchor with an accessible name from the title. Focus ring is visible (not inset). Unlinked cards render as <article>.
Related components
Token budget: 982
Verified against @hex-core/components@1.14.0