Skip to content
Components

Card

Card container with optional border and variant-based background.

Calacatta Oro

Natural marble field tile, polished, with warm gold veining.

In stock

Usage

import { Card, CardAction, cardAnatomy, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@instruments/materia-ui/components/card";

Best practices

  • Compose structure with CardHeader/CardContent/CardFooter rather than raw padded divs - the root supplies the gap rhythm and drops its bottom padding when a footer is present, via data-slot selectors.

  • Set inset on the Card (not on its parts) to change the padding around header and content; inset="none" gives a card with no padding or gaps for a Table or code block. "Flush" covers header and content only: CardFooter keeps its own 16px padding whatever the inset.

  • Pass shadow={false} when stacking cards on a muted/shaded canvas - colour contrast separates them and per-card shadows read as noise.

  • For a full-bleed media/CTA panel use an editorial composite (EditorialCard), not Card - Card is a neutral padded container, not a marketing surface.

Props

Card

PropTypeDefaultDescription
borderBorderStyle
inset"none" | LayoutResponsiveValue<"base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl">"xl" (24px)

Padding around the card's CardHeader and CardContent, and the gap between its parts. Parts pick it up from the root, so they need no matching prop. CardFooter is not affected: it keeps its own 16px padding. "none" removes the padding and the gaps, so header and content run to the card's edges, for tables and code blocks. Accepts a per-breakpoint responsive object; an object without base falls back to the default rather than inheriting an ancestor card's inset.

responsiveModeResponsiveMode"screen"

Whether responsive values resolve against the viewport ("screen") or nearest container ("container").

shadowboolean

Whether the card casts a shadow. Defaults to true (each variant's own shadow). Set to false for flat cards on a shaded canvas - e.g. several cards stacked on a muted-background page/panel, where the colour contrast alone separates them and a shadow on every one would be redundant.

testIdstring
variant"muted" | "ghost" | "accent" | "card" | null | undefined

CardHeader

PropTypeDefaultDescription
borderboolean

Render a bottom border

Also exports

  • componentCardAction
  • constcardAnatomy
  • componentCardContent
  • componentCardDescription
  • componentCardFooter
  • componentCardTitle

Anatomy

Card

card

Container for grouped content

CardHeader

card-header

Header area with title and optional action

CardTitle

card-title

Main heading

CardDescription

card-description

Subheading or summary

CardAction

card-action

Action button or link

CardContent

card-content

Main content area

CardFooter

card-footer

Footer with actions or metadata

Composition

Builds on

Flex

Used by

AttributeCard, Empty, SettingsCard