Cards
The card parts
Section titled “The card parts”Card is a Surface with no padding of its own. The padding belongs to the
parts, which is what lets CardMedia reach the edge of the same card. Every
part is optional and the order is yours: the card stacks what it is handed, and
wherever two padded parts meet, in either order, it drops the doubled gap. Set
padding="none" on a part and it owns its gaps from then on.
Write a title or a label on the same line as its tag, or wrap it in a <span>.
MDX reads children that start on a new line as flow content and wraps the text
in a paragraph; children on the opening line stay phrasing.
Nothing here knows what a product, a demo or a status is. The title, the metadata and the actions are children, so a card never decides where it links.
The card itself is never an anchor. A whole-card link is href on CardHeader:
the title carries the link and the recipe stretches it over the card, which
leaves the actions and the metadata clickable in their own right.
A card with every part
Section titled “A card with every part”A path from a trained model to an application running on the device, with the checks that matter at each step.
Without media
Section titled “Without media”A header and a body, and a whole-card link instead of an action. interactive
adds the shared hover background, and the card takes the focus ring when the
stretched header link is focused.
Concept
Choose a deployment path
When to compile ahead of time and when to stay on the runtime.
Supported hardware
A muted card recedes when it sits inside another surface.
Actions only
Section titled “Actions only”CardActions is a flex row around whatever you pass it. align is start,
end, or between.
Media ratios
Section titled “Media ratios”CardMedia owns the frame; the media it receives fills it. fit="contain"
keeps a logo or a diagram whole instead of cropping it.
Six tones and an optional leading dot. The tones are semantic, not a status vocabulary: map your own statuses onto them in the composition that knows what they mean.
The label is required: the dot is decorative and hidden from assistive technology, so a badge with no label renders nothing.
The artwork in these examples comes from Media, which has a page of its
own under Media.