CardGrid

A responsive grid of cards or tiles.

Overview

Several cards or StatTiles of the same weight that should sit side by side on a wide screen.

Tiles

Do

Open

12

Won

8

Lost

3

import { CardGrid, StatTile } from "@hackcove/ui";

<CardGrid columns={3}>
  <StatTile label="Open" value="12" />
  <StatTile label="Won" value="8" tone="positive" />
  <StatTile label="Lost" value="3" tone="negative" />
</CardGrid>
Tiles go in a CardGrid: one column on a phone, two from sm, columns from lg.
Don't

Open

12

Won

8

Lost

3

import { Stack, StatTile } from "@hackcove/ui";

<Stack>
  <StatTile label="Open" value="12" />
  <StatTile label="Won" value="8" tone="positive" />
  <StatTile label="Lost" value="3" tone="negative" />
</Stack>
A Stack is one column, so the tiles never sit side by side and the page runs long. Use a CardGrid.

Auto

Do

Dashboard

Quotes and renewals this week.

Billing

Invoices and payments.

Members

Who can sign in.

import { Body, Card, CardGrid } from "@hackcove/ui";

<CardGrid columns="auto" minWidth="sm" align="start">
  <Card title="Dashboard">
    <Body as="p">Quotes and renewals this week.</Body>
  </Card>
  <Card title="Billing">
    <Body as="p">Invoices and payments.</Body>
  </Card>
  <Card title="Members">
    <Body as="p">Who can sign in.</Body>
  </Card>
</CardGrid>
For cards of any count, columns="auto" fits as many per row as the width allows.

Full page

Hack Cove

Business

This month at a glance.

Open

12

Won

8

Lost

3

import { AppShell, CardGrid, NavTabs, PageHeader, Stack, StatTile } from "@hackcove/ui";

<AppShell
  brand={<a href="#">Hack Cove</a>}
  nav={
    <NavTabs
      label="Main"
      items={[
        { label: "Quotes", href: "#quotes", active: true },
        { label: "Clients", href: "#clients" },
      ]}
    />
  }
>
  <Stack gap="section">
    <PageHeader title="Business" subtitle="This month at a glance." />
    <CardGrid columns={3}>
      <StatTile label="Open" value="12" />
      <StatTile label="Won" value="8" tone="positive" />
      <StatTile label="Lost" value="3" tone="negative" />
    </CardGrid>
  </Stack>
</AppShell>
A whole dashboard page: the shell with its brand and nav, then a PageHeader and a CardGrid of tiles.

Usage

  • Use columns 2, 3 or 4 when you know how many; it is one column on a phone, two from sm and columns from lg.
  • Use columns="auto" when the count varies: it fits as many per row as the width allows, none narrower than minWidth (md, the default, or sm).
  • align="start" keeps each card its own height; by default every card stretches to the tallest in its row.
  • CardGrid goes inside a page layout; it sets no page width of its own.
  • A single column of blocks is a Stack, not a one-column CardGrid.

Accessibility

  • The grid is a plain div with no role: the cards keep their own order and semantics.
  • The order is the DOM order, so the tab order follows the reading order.

API

CardGrid

A responsive grid of tiles: one column on a phone, two from sm, columns from lg. columns="auto" instead fits as many per row as the width allows, each at least minWidth wide: md (17rem, the default) or sm (12rem). align="start" keeps each card its own height instead of stretching it to the tallest in its row.

align

start keeps each card its own height; the default stretches every card to the tallest in its row.

Type
"start" | "stretch"
Default
stretch
columns
Type
"auto" | 2 | 3 | 4
Default
3
minWidth
Type
"sm" | "md"
Default
md