Card Group | Base Design System

The grid a section's Cards sit in, with two or three columns and room for a tall or wide card.

Card Group is the grid a section's Cards sit in: a 16px gap, two or three equal columns from md, and one column below. It ships with Card, as Card.Group and the named export CardGroup; use the named export in a React Server Component.

import { Card } from '@base-org/bds-web/product/card';

<Card.Group>
  <Card>...</Card>
  <Card>...</Card>
  <Card>...</Card>
</Card.Group>;

Columns and rows

columns is 3 by default; set columns={2} for a two-up section. Spans stay on the cards: give a card md:row-span-2 or md:col-span-2 for the tall or wide cell, and set rows={2} on the group so the grid has the rows to span.

Layouts

Numbered tiles

A card spanning two rows leaves the gap between the number and the text.

Deposit

Customers deposit stablecoins in your app.

Earn

Deposits earn a variable rate from borrowers.

Withdraw

Withdraw anytime, with the yield earned.

Repay anytime

No schedule and no deadlines.

<Card.Group rows={2}>
<Card className="md:row-span-2">
  <Card.Number>01</Card.Number>
  <Card.Title>Deposit</Card.Title>
  <Card.Description>Customers deposit stablecoins in your app.</Card.Description>
</Card>
<Card>
  <Card.Number>02</Card.Number>
  <Card.Title>Earn</Card.Title>
  <Card.Description>Deposits earn a variable rate from borrowers.</Card.Description>
</Card>
<Card>
  <Card.Number>03</Card.Number>
  <Card.Title>Withdraw</Card.Title>
  <Card.Description>Withdraw anytime, with the yield earned.</Card.Description>
</Card>
<Card className="md:col-span-2">
  <Card.Number>04</Card.Number>
  <Card.Title>Repay anytime</Card.Title>
  <Card.Description>No schedule and no deadlines.</Card.Description>
</Card>
</Card.Group>

Illustrated tiles

A two-up row with columns={2}, so each card has room for its illustration and copy.

Grow and retain assets

Give customers more to do with the balances they hold.

Scale your business

Earn from stablecoin balances and loan fees.

<Card.Group columns={2}>
<Card>
  <Card.Icon><GenerateRevenueIcon /></Card.Icon>
  <Card.Title>Grow and retain assets</Card.Title>
  <Card.Description>Give customers more to do with the balances they hold.</Card.Description>
</Card>
<Card>
  <Card.Icon><LiquidityIcon /></Card.Icon>
  <Card.Title>Scale your business</Card.Title>
  <Card.Description>Earn from stablecoin balances and loan fees.</Card.Description>
</Card>
</Card.Group>

Large card with tiles

A Why Base section: the large card in one column and two tiles stacked in the other.

Built on the trust of Coinbase

Base is built by Coinbase, with the security and compliance practices of a public company.

Deep liquidity

Lending markets on Base hold billions in supplied assets.

A growing ecosystem

Thousands of apps and the builders behind them.

<Card.Group columns={2}>
<Card size="lg">
  <Card.Title highlight="Coinbase">Built on the trust of Coinbase</Card.Title>
  <Card.Description>Base is built by Coinbase, with the security and compliance practices of a public company.</Card.Description>
  <Card.Icon><CoinbaseTrustIcon /></Card.Icon>
</Card>
<div className="flex flex-col gap-4">
  <Card>
    <Card.Icon><LiquidityIcon /></Card.Icon>
    <Card.Title>Deep liquidity</Card.Title>
    <Card.Description>Lending markets on Base hold billions in supplied assets.</Card.Description>
  </Card>
  <Card>
    <Card.Icon><EcosystemIcon /></Card.Icon>
    <Card.Title>A growing ecosystem</Card.Title>
    <Card.Description>Thousands of apps and the builders behind them.</Card.Description>
  </Card>
</div>
</Card.Group>

When to use

Use Card Group for a row or grid of Cards, on a product surface or in a base.org section.

Use something else when:

The items are an ordered sequence a reader follows top to bottom. Render them as a list.
The items have no surface, such as bare Stats in a hero. Use a plain grid.

Usage

Keep the cards in one group the same kind: all numbered, all illustrated, or a large card with tiles.

Don't

Set heights on the cards to line them up. The grid stretches each card to its cell; use md:row-span-2 for a tall one.

Props

Prop	Type	Default
`columns` Columns from the `md` breakpoint; one column below it. Defaults to 3.	Type`2 \| 3 \| null`	Default`3`
`rows` Explicit rows from `md`, so a card with `md:row-span-2` can stretch over	Type`2 \| 1 \| null`	Default`1`

Accessibility

Card Group is a plain div with no role. When the order of the cards matters, as with numbered cards, give the group role="list" and each card role="listitem" so assistive technology announces the count and position; then add aria-hidden to each Card.Number, since the list already conveys it.