Card

A plain rounded, bordered surface with CardHeader/CardTitle/CardDescription/CardContent/ CardFooter slots. Most composed patterns in the DS (SectionCard, KpiCard, DetailSummaryCard, ...) build on top of this — reach for one of those first if it fits, and drop to Card directly only when none of them do.

Props

Card and every slot forward all native <div> props — CardProps above is really "what a div takes," since none of them add anything beyond className.

Accessibility

• Card itself carries no semantics — it's a styled <div>, not a <section> or role="group". If the card is a distinct, nameable region (not just a visual container in a grid), wrap it or label it accordingly yourself.
• CardTitle is a <div>, not a heading element — if the content needs a heading in the document outline, render your own <h2>/<h3> inside it (or in title for the composed patterns that take one).

Do / Don't

• Do reach for a composed pattern (SectionCard, KpiCard, ...) before hand-assembling Card + slots — they already encode the header-row layout and spacing correctly.
• Don't nest interactive elements (buttons, links) so deep inside CardContent that the card's own click target (if it has one) and the inner control's click target overlap — keep exactly one thing clickable per region.