Card
A flexible, extensible content container. Card provides the bordered shell;
compose it with the sub-parts — CardBody, CardTitle,
CardSubtitle, CardText, CardHeader, and
CardFooter — to build the layout you need.
Import
import {
Card,
CardBody,
CardTitle,
CardSubtitle,
CardText,
CardHeader,
CardFooter,
} from '@metatoy/bootstrap-styled';Basic
The simplest card is a Card wrapping a CardBody. Put a CardTitle, CardText, and
any controls inside the body. Cards have no fixed width — size them with your layout or a
style.
Titles, subtitles & links
CardTitle renders an <h5> and CardSubtitle an <h6> (muted). Links inside the body
sit inline.
Header & footer
Add a CardHeader and/or CardFooter for capped sections. They get the subtle cap
background and inherit the card’s rounded corners.
Props
Card and every sub-part are polymorphic styled components: they accept all native
attributes for their element (Card, CardBody, CardHeader, CardFooter → <div>;
CardTitle → <h5>; CardSubtitle → <h6>; CardText → <p>) plus an as prop to
render as a different element.
Theming
Card reads --bs-body-color and --bs-body-bg for its surface, and
--bs-border-color-translucent + --bs-border-radius for the border and corners.
CardHeader / CardFooter fill with --bs-card-cap-bg (a translucent tint derived from
--bs-body-color-rgb), and CardSubtitle uses --bs-secondary-color for its muted text.
Accessibility
Card is a purely presentational container with no implied semantics — the meaning comes
from the content you place inside it. Use real heading elements (via CardTitle /
CardSubtitle, or as to set the level) so the document outline stays correct, and give
any interactive content its own accessible name.
Explore in Ladle
The library doesn’t ship a dedicated Card story yet — browse the component gallery: Open in Ladle.