Card

A composable container surface for grouping related content and actions.

When to use

Content grouping — a distinct section of a page (settings panel, profile summary).
List items — repeated items in a grid or feed.
Forms — wrapping a form with a header and action footer.

When NOT to use

For full-width page sections — use a plain <section> with spacing.
For modals — use Dialog.

Import

import {
  Card, CardHeader, CardTitle, CardDescription,
  CardContent, CardFooter,
} from '@mihcm/ui/Card';

Basic usage

<Card>
  <CardHeader>
    <CardTitle>Team settings</CardTitle>
    <CardDescription>Manage your team preferences.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Content goes here.</p>
  </CardContent>
  <CardFooter>
    <Button>Save</Button>
  </CardFooter>
</Card>

Sub-components

Part	Element	Purpose
`Card`	`<div>`	Outer container with border and shadow.
`CardHeader`	`<div>`	Top section with vertical gap.
`CardTitle`	`<h3>`	Card heading.
`CardDescription`	`<p>`	Muted subtitle below the title.
`CardContent`	`<div>`	Main body area.
`CardFooter`	`<div>`	Bottom row for actions, aligned horizontally.

Composition

CardHeader + CardContent + CardFooter is the standard layout. All three are optional.
Use Separator between content sections inside a card.
Nest AspectRatio inside CardContent for consistent image thumbnails.
For clickable cards, wrap the entire Card in an <a> or make it a <button> with a focus ring.

Alert — inline message, not a container.
Separator — divide sections within a card.
StatCard — specialized card for single metrics.