What is Card?

A card is a surface that holds one thing: a product with its image and price, a metric with its trend, a blog post with its cover and excerpt, a plan with its features and a button. The border, shadow or background separates it from the page and from other cards, so a grid of cards reads as a set of comparable items. Cards are everywhere because the mental model is simple, and they are also overused, because almost anything can be put in a box.

Anatomy

• Media (optional): an image or chart at the top, bleeding to the card's edges.
• Header: a title, an optional description, and an optional action such as a menu in the corner.
• Content: the body, kept short. A card is a summary; the full thing lives on its own page.
• Footer: actions or metadata, aligned to one edge.

Inner and outer radii should agree: an element inset by 16px inside a card with a 16px radius wants a radius near zero, and an image flush with the edge uses the card's own radius. Keep padding consistent across all cards on a page, and one card size per grid, so the layout does not look ragged.

When not to use one

• Lists of similar rows. A table or a plain list is denser and easier to scan than a grid of identical cards.
• Cards inside cards. Nested borders and shadows turn into noise. Use spacing and headings inside a card instead.
• Long text. Cards invite skimming; an article wants a wide column of prose.

Accessibility

Give each card a heading at the right level so screen reader users can jump between cards. When the whole card should be clickable, put the link on the heading and extend its hit area over the card with an absolutely positioned pseudo-element; wrapping the entire card in one anchor makes its whole content the link's name. Any other control inside, like a menu or a Like button, must sit above that pseudo-element and stay separately focusable. Decorative hairlines can stay subtle, but a card that is itself a control needs a 3:1 boundary against the page.

How to build one in React

MiniDev's Card is a set of compound components that share one spacing variable, so the header, content and footer line up without manual padding:

import { Button } from "@/components/ui/button"
import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"

export function PlanCard() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>Scale</CardTitle>
        <CardDescription>For teams shipping every day.</CardDescription>
        <CardAction>
          <span className="text-sm font-medium">$49/mo</span>
        </CardAction>
      </CardHeader>
      <CardContent>Unlimited projects, 10 seats, priority support.</CardContent>
      <CardFooter>
        <Button className="w-full">Choose Scale</Button>
      </CardFooter>
    </Card>
  )
}

The size="sm" variant tightens the spacing for dense dashboards, and the header is declared a container query container so its parts can be rearranged at narrow widths. Ready-made cards include StatCard, ProductCard, BlogCard and PlanCard. For a layout of cards in varied sizes, see the bento grid.