Card

import { Badge } from "@hel/ui/badge"
import { Button } from "@hel/ui/button"
import {

When to use it#

Use a card to group one self-contained thing: a project in a list, a figure on a dashboard, a plan with a button to change it. A card says "these belong together", and lets you place several of them side by side.

Do not wrap a whole page, or every section of it, in cards. If the content is just a section of a page, a Heading and some space are enough. When people must answer something, use a Dialog.

Import#

Copyimport {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardAction,
  CardContent,
  CardFooter,
} from "@hel/ui/card"

Anatomy#

Every part is optional. A card can be just a title and a line of text, or it can have all of them.

Copy<Card>
  <CardHeader>
    <CardTitle>Pro plan</CardTitle>
    <CardDescription>Billed yearly, renews on 14 March.</CardDescription>
    <CardAction>
      <Badge variant="success">Active</Badge>
    </CardAction>
  </CardHeader>
  <CardContent>...</CardContent>
  <CardFooter>
    <Button variant="outline">Manage plan</Button>
  </CardFooter>
</Card>

CardAction sits in the top corner of the header, next to the title and description, so a badge or a small button stays beside the heading. The header only makes room for it when it is there.

A card is a plain box and not a link. If the whole card should open something, put a link or a button inside it.

Examples#

Figures in a grid#

Cards line up well in a Grid. minItemSize makes the grid fit as many as the width allows, so three figures sit in a row on a wide screen and stack on a narrow one. Here the title holds a large number.

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@hel/ui/card"
import { Grid } from "@hel/ui/grid"
import { Heading } from "@hel/ui/heading"

Padding#

padding is a step of the spacing scale, and the default is xl. Use a smaller step for cards in a dense list, and a larger one for a card that stands alone. The space between the parts inside comes from gap, which you can change with className.

import { Card, CardDescription, CardTitle } from "@hel/ui/card"
import { Flex } from "@hel/ui/flex"

Props#

Card#

The other parts take the props of a div. CardTitle and CardDescription set the text style, CardContent stacks its children, and CardFooter adds space above itself.