Skip to main content
MD3 React

Card

A bare, unopinionated container — you own the layout inside it.
import { Card, CardMedia, ActionableCard } from "@brijbyte/md3-react/card";
@import "@brijbyte/md3-react/ripple.css"; /* For ActionableCard */
@import "@brijbyte/md3-react/card.css";

Variants

Pick elevated (the default), filled, or outlined and get the right shadow, fill, and border for free. The card itself stays a bare container — a flex column with no padding — so you control layout and spacing instead of fighting preset ones.

elevated

Rests at level 1 on a low surface container.

filled

Flat, on the highest surface container.

outlined

Flat surface with an outline-variant border.

Composing content

A card's contents vary too much for a fixed set of sub-components to cover without getting in the way, so there's no CardHeader / CardContent / CardFooter — MD3 treats card anatomy as guidance, not API. Compose it from Typography, buttons, and your own markup. The spec's numbered anatomy maps directly:

  1. Container — Card, with variant picking elevated / filled / outlined
  2. Media — CardMedia
  3. Buttons — Button, right-aligned in a padded row
  4. Supporting text — Typography body-medium in on-surface-variant
  5. Subhead — Typography, e.g. body-medium or title-medium
  6. Headline — Typography, e.g. title-large

Edge-to-edge images need clipping and corner-rounding that the card itself skips, so that work lives in CardMedia instead: it clips its content and rounds whichever corners touch the card's edge — the top pair as the first child, the bottom pair as the last. A child <img> or <video> fills it edge-to-edge with object-fit: cover.

Alpine loop trail

12 km · moderate · open year-round

A steady climb through larch forest to a ridge with views over both valleys. Best light in the early morning.

Actionable

When the whole card should be clickable, ActionableCard gets you there without hand-rolling hover, focus, and press states — the same three variants, plus the spec's interaction states: a state layer with ripple, an elevation raise on hover, the focus ring (outlined cards also flip their border to on-surface), and disabled. By default it renders a div with role="button" and keyboard activation, not a native <button>, since cards often need headings and other content a <button> can't legally contain. Pass render (e.g. <a href>) to navigate instead.

Keep a card's primary action singular — nested buttons inside it would fire their own click and the card's at once. For drag interactions, style off a data-dragged attribute you set from your own drag state.

elevated

Hover, focus, and press me.

filled

Hover, focus, and press me.

outlined

Hover, focus, and press me.

Disabled

Not interactive.

Cards clicked: 0