division-ds 0.1.2 → 0.2.1

package/public/docs/components/breadcrumbs.md

@@ -0,0 +1,112 @@
+# Breadcrumbs
+
+> Shows where this page sits among the pages above it. The last level is the current page, shown as text. Every level above it is a link.
+
+- **Best for:** Showing where a page sits in a hierarchy more than one level deep.
+- **Not for:** Steps in a sequence: use Stepper.
+- Molecule. Source: `src/components/molecules/breadcrumbs/Breadcrumbs.tsx`
+- Rendered docs page: `/components/breadcrumbs`
+
+## Import
+
+```tsx
+import { Breadcrumbs, collapseCrumbs } from 'src/components/molecules/breadcrumbs/Breadcrumbs'
+```
+
+Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `items` | `Crumb[]` |  | { label, href? }. A level with no href shows as plain text. |
+| `maxItems` | `number` |  | Collapse the trail when it has more levels than this. It never goes below 3. |
+| `label` | `string` | `'Breadcrumb'` | The name of the nav landmark. |
+| `className` | `string` |  | Merged onto the nav. |
+| `renderLink` | `(props: LinkRenderProps) => ReactNode` | `a plain anchor` | How each linked level is drawn. Pass your router's link component to move between pages inside the app. |
+| `ref` | `Ref<HTMLElement>` |  | Passed through to the nav DOM element. |
+
+## Types and helpers
+
+Exported beside the component, from the same file. Import a type with `import type { ... }`.
+
+```ts
+export type Crumb = { label: string; href?: string }
+```
+
+```ts
+/** First item, a gap, then the last (maxItems - 1). Three is the floor: below it there is no
+ *  middle left to collapse and the gap would replace the only context the trail gives. */
+export function collapseCrumbs(items: Crumb[], maxItems?: number): (Crumb | 'gap')[]
+```
+
+## Examples
+
+Each is compiled and rendered on the docs page. Imports are omitted; see above.
+
+### Default
+
+```tsx
+const TRAIL = [
+  { label: 'Catalogue', href: '/catalogue' },
+  { label: 'Optics', href: '/catalogue/optics' },
+  { label: 'Holo sights', href: '/catalogue/optics/holo-sights' },
+  { label: 'Prism holo sight' },
+]
+
+<Breadcrumbs items={TRAIL} label="Breadcrumb, default example" />
+```
+
+### Collapsed
+
+```tsx
+const DEPOT_TRAIL = [
+  { label: 'Depot', href: '/depot' },
+  { label: 'Region: North', href: '/depot/north' },
+  { label: 'Site: Fell Beck', href: '/depot/north/fell-beck' },
+  { label: 'Building: Stores', href: '/depot/north/fell-beck/stores' },
+  { label: 'Bay 4', href: '/depot/north/fell-beck/stores/bay-4' },
+  { label: 'Crate 118' },
+]
+
+<Breadcrumbs items={DEPOT_TRAIL} maxItems={3} label="Breadcrumb, collapsed" />
+```
+
+### A level that is not a page
+
+```tsx
+const MID_LEVEL_TRAIL = [
+  { label: 'Catalogue', href: '/catalogue' },
+  { label: 'Optics' },
+  { label: 'Holo sights', href: '/catalogue/optics/holo-sights' },
+]
+
+<Breadcrumbs items={MID_LEVEL_TRAIL} label="Breadcrumb, mid-level example" />
+```
+
+## Keyboard
+
+| Keys | Result |
+|---|---|
+| `Tab` | Moves through the linked levels in order. The current page isn't a stop. |
+
+## Do
+
+- Start from the top of the hierarchy, not from the home page, when the site has one obvious root.
+- Use the page's own heading text as its crumb.
+- Collapse long trails on narrow layouts with maxItems.
+
+## Don't
+
+- Don't use breadcrumbs for a sequence of steps. That's Stepper.
+- Don't make the current page a link.
+- Don't put a breadcrumb trail on a page that's only one level deep.
+
+## Anatomy
+
+- **nav**: A navigation landmark (a region screen readers can jump to) named 'Breadcrumb'.
+- **ol**: An ordered list, because the order is the information.
+- **Level**: A quiet Link.
+- **Current page**: Text with aria-current=page, which tells screen readers it's the page you're on. Never a link to itself.
+- **Separator**: A slash in monospaced type, marked aria-hidden so screen readers skip it.
+- **Gap**: An ellipsis (…) when the middle levels are collapsed, read out as 'more levels' by screen readers. It isn't a button.

package/public/docs/components/button.md

@@ -0,0 +1,204 @@
+# Button
+
+> The main control for taking an action. It comes in five variants (one of them a button that looks like a text link) and four sizes, with optional icons on either side of the label. It also draws its own focus ring, the outline that shows which control the keyboard is on. The component places that ring for you, because the bevel (the cut corners) would clip one placed anywhere else.
+
+- **Best for:** An action on this page, like submit, save or open a dialog.
+- **Not for:** Going somewhere (use Link, or Button asChild around an anchor), or an action with no visible word (use IconButton).
+- Atom. Source: `src/components/atoms/button/Button.tsx`
+- Rendered docs page: `/components/button`
+
+## Import
+
+```tsx
+import { Button, buttonVariants } from 'src/components/atoms/button/Button'
+```
+
+Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `'primary' \| 'secondary' \| 'danger' \| 'ghost' \| 'link'` | `'primary'` | Which fill/border treatment to use. link looks like a Link (signal text, underline, no fill, no bevel, no fixed height) but it's still a button. Use it for an action inside a sentence, not for going to another page. |
+| `size` | `'xs' \| 'sm' \| 'md' \| 'lg'` | `'md'` | 24 / 32 / 40 / 48px (pixels). xs is exactly the 24px minimum target, the smallest area people can reliably click or tap. It isn't a token step (there is no xs control-height token) and it's meant for dense toolbars and table rows. Size has no effect on the link variant, which takes the size of the text around it. |
+| `fullWidth` | `boolean` | `false` | Stretches the wrapper as well as the button. |
+| `loading` | `boolean` | `false` | Sets aria-busy and aria-disabled, blocks the click and the form submit, and shows the spinner. The button stays focusable. |
+| `loadingLabel` | `string` | `'Working'` | Text that's hidden on screen but read aloud while loading. |
+| `iconStart` | `ReactNode` |  | An icon before the label, rendered aria-hidden and sized to the button. The spinner replaces it while loading. It isn't available with asChild: put the icon inside the child element instead. |
+| `iconEnd` | `ReactNode` |  | An icon after the label, rendered aria-hidden. It stays while loading. Not available with asChild. |
+| `asChild` | `boolean` | `false` | Renders the child element with the button's classes. Use it for links that look like buttons. Combining it with disabled, loading or loadingLabel is a type error, so the code won't compile, instead of quietly doing nothing. A link can't really be disabled or made busy, so those props are removed from the types rather than ignored when the page runs. |
+| `wrapperClassName` | `string` |  | Classes for the focus wrapper, not the button. |
+| `className` | `string` |  | Merged with the component's classes. When Tailwind utility classes clash, the later one wins. |
+| `ref` | `Ref<HTMLButtonElement>` |  | Passed through to the button element. |
+| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | A Button never submits a form by accident. Ask for submit on the one that should. |
+| `...rest` | `Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-busy' \| 'children'>` |  | Every native button prop except aria-busy. aria-busy is removed from the types rather than quietly overwritten when the page runs. loading is the only thing that sets it, and a loading button saying aria-busy="false" would be a spinning, aria-disabled control telling assistive tech (screen readers and other tools people with disabilities use) that it's idle. children is its own declared prop above, not part of rest. |
+
+## Types and helpers
+
+Exported beside the component, from the same file. Import a type with `import type { ... }`.
+
+```ts
+export const buttonVariants = cva( …
+```
+
+## Examples
+
+Each is compiled and rendered on the docs page. Imports are omitted; see above.
+
+### Variants
+
+```tsx
+<Button variant="primary">Dispatch team</Button>
+<Button variant="secondary">Save draft</Button>
+<Button variant="danger">Abort</Button>
+<Button variant="ghost">Cancel</Button>
+```
+
+### Sizes
+
+```tsx
+<Button size="xs">Dispatch team</Button>
+<Button size="sm">Dispatch team</Button>
+<Button size="md">Dispatch team</Button>
+<Button size="lg">Dispatch team</Button>
+```
+
+### States
+
+```tsx
+<Button>Dispatch team</Button>
+<Button loading loadingLabel="Dispatching">
+  Dispatch team
+</Button>
+<Button disabled>Dispatch team</Button>
+```
+
+### With icons
+
+```tsx
+<Button iconStart={<Plus />}>Add to loadout</Button>
+<Button variant="secondary" iconEnd={<ArrowRight />}>
+  Continue
+</Button>
+<Button variant="ghost" size="sm" iconStart={<Download />}>
+  Export
+</Button>
+<Button loading loadingLabel="Adding" iconStart={<Plus />}>
+  Add to loadout
+</Button>
+```
+
+### Link variant
+
+```tsx
+<p className="text-sm text-[var(--color-text-secondary)] max-w-md">
+  No replicas match these filters.{' '}
+  <Button variant="link">
+    Reset filters
+  </Button>{' '}
+  to see the full catalogue.
+</p>
+```
+
+### Full width
+
+```tsx
+<div className="w-80">
+  <Button fullWidth>Dispatch team</Button>
+</div>
+```
+
+### As a link
+
+```tsx
+<Button asChild>
+  <a href="/kits">Browse kits</a>
+</Button>
+```
+
+### Focus ring is never clipped
+
+```tsx
+<div className="flex flex-col gap-4">
+  <p className="text-sm text-[var(--color-text-secondary)] max-w-md">
+    Press Tab to focus the button below, in either theme. The focus ring (the outline
+    that shows which element the keyboard is on) draws a clean rectangle around the whole
+    bevelled shape. You'll never see it cut off, because the component draws it on the
+    outer wrapper, which isn't clipped, and not on the bevelled button itself.
+  </p>
+  <Button variant="primary">Dispatch team</Button>
+</div>
+```
+
+## Keyboard
+
+| Keys | Result |
+|---|---|
+| `Tab` | Moves focus to the button. The ring appears on the wrapper. |
+| `Enter` | Activates it. While loading it does nothing, and the caller's onClick doesn't run. |
+| `Space` | Activates it. While loading it does nothing, and the caller's onClick doesn't run. |
+
+## Do
+
+- One primary button per view. The signal colour only means something if it's rare.
+- Use asChild for a link that should look like a button, so it stays a real link.
+- Say what the button does: ‘Dispatch team’, not ‘Submit’.
+- Use loading instead of disabling the button and swapping the label yourself.
+- Use loading on a submit button. It keeps focus while the form works, so a keyboard user is never thrown back to the top of the page.
+- Pass icons through iconStart and iconEnd, not as children. That way they stay hidden from assistive tech and get sized with the button.
+- Use the link variant for an action that sits in running text or next to a heading (‘Reset filters’). Use Link for anything that goes somewhere.
+
+## Don't
+
+- Don't add bevel-* or an outline class yourself. You'll clip the ring off.
+- Don't use danger for anything that can be undone.
+- Don't put a ghost button next to a secondary one. People can't tell which matters more any more.
+- Don't disable a button without saying somewhere why it's disabled.
+- Don't use the link variant to go to another page. A control that goes somewhere is a Link, or a Button with asChild around an anchor.
+- Don't make an icon-only button by passing iconStart with no label. That's IconButton, which requires a name.
+- Don't use xs for a page's main actions. It's the minimum target size, for dense rows only.
+- Don't try to disable a link (asChild) or give it a loading state. Render the state you want directly instead (a plain span, or a real disabled button) rather than fighting the type error.
+
+## Common mistakes
+
+Wrong:
+
+```tsx
+<div>
+  <Button variant="secondary">Cancel</Button>
+  <Button>Save</Button>
+</div>
+```
+
+Right:
+
+```tsx
+<div className="flex flex-wrap gap-3">
+  <Button variant="secondary">Cancel</Button>
+  <Button>Save</Button>
+</div>
+```
+
+Buttons render inline-flex, and JSX (the HTML-like syntax React components are written in) drops the whitespace between them, so buttons placed side by side touch. The parent sets the gap. npm run check:button-spacing fails if there isn't one.
+
+Wrong:
+
+```tsx
+<Button disabled={saving}>Save</Button>
+```
+
+Right:
+
+```tsx
+<Button loading={saving}>Save</Button>
+```
+
+A busy button stays focusable and tells people it's busy through loading. Native disabled is for an action that isn't available, and it takes the button out of the tab order, so the Tab key skips it.
+
+## Anatomy
+
+- **Focus wrapper**: A span that isn't clipped, carrying .bevel-focus-wrap. It draws the ring on :has(:focus-visible), so a mouse click doesn't show it, plus the reticle brackets (corner marks like a targeting sight) that close in on hover. It's always there and never optional.
+- **Button**: The clipped, bevelled control. It never carries its own outline.
+- **Spinner**: Decoration only, shown while loading. The hidden label is what screen readers announce.
+- **Label**: Oxanium semibold, uppercase: the display type role. The link variant switches to the body role, in the signal text colour, underlined.
+- **Icons**: Optional, before and after the label. Each sits in an aria-hidden slot sized to the button (14px at xs and sm, 16px at md, 20px at lg). aria-hidden is an ARIA attribute (Accessible Rich Internet Applications, the labels that tell screen readers what things are) that hides the icon from screen readers. While loading, the spinner takes the leading slot.

package/public/docs/components/card.md

@@ -0,0 +1,257 @@
+# Card
+
+> A surface that groups related content. It gets the crosshair corners, the visual mark this system uses for a frame around several things. It never gets the cut corner, because cards hold buttons.
+
+- **Best for:** Grouping related content on one surface, or one item in a grid whose whole surface is one link.
+- **Not for:** A card inside another card: cards don't nest.
+- Molecule. Source: `src/components/molecules/card/Card.tsx`
+- Rendered docs page: `/components/card`
+
+## Import
+
+```tsx
+import { Card, CardActions, CardBody, CardDescription, CardFooter, CardHeader, CardMedia, CardTitle, cardLinkClass } from 'src/components/molecules/card/Card'
+```
+
+Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `as` | `'article' \| 'section' \| 'div'` | `'article'` | article for an item that stands on its own, section for a group inside a page, div for neither. |
+| `interactive` | `boolean` | `false` | Says the whole card is one click target, through a link or button stretched over it. Adds the hover and focus border and a 4px lift. It adds no role and no Tab stop: the link inside is still the control. |
+| `level (CardTitle)` | `2 \| 3 \| 4` | `3` | The heading level, set on CardTitle only. Card itself takes no level. The page decides its own outline. |
+| `src (CardMedia)` | `string` |  | The picture, drawn with object-cover (it fills the box and crops the overflow) and loaded lazily (only when it's about to scroll into view). Leave it out to show CardMedia's children instead, such as a placeholder. |
+| `alt (CardMedia)` | `string` | `''` | The alt text screen readers read for the picture. Empty by default: the picture is decorative because the card title already names it. Write real text only when the picture says something the title doesn't. |
+| `aspect (CardMedia)` | `'16/9' \| '4/3' \| '1/1'` | `'16/9'` | The shape of the box the picture is cropped to. |
+| `className` | `string` |  | Merged onto any part. |
+| `...rest` | `HTMLAttributes<...>` |  | Standard HTML attributes on every part, except aria-labelledby on Card: the Card points that at its CardTitle itself, and the types won't accept one passed in. Give CardTitle an id only if something else needs it. |
+| `ref` | `Ref<HTMLElement>` |  | Passed through to the Card root DOM element. |
+
+## Types and helpers
+
+Exported beside the component, from the same file. Import a type with `import type { ... }`.
+
+```ts
+/** The stretched link an interactive card needs, for the `a` (or button) in its title: the link
+ *  is the name's own, its `::after` covers the card, and the focus ring is drawn there, around the
+ *  whole card. The shape ProductCard uses. Exported so a consumer never copies the string. */
+export const cardLinkClass =
+  "outline-none hover:underline underline-offset-2 after:absolute after:inset-0 after:content-[''] focus-visible:after:outline-2 focus-visible:after:outline-offset-2 focus-visible:after:outline-[var(--color-focus-ring)]"
+```
+
+## Examples
+
+Each is compiled and rendered on the docs page. Imports are omitted; see above.
+
+### Depot
+
+```tsx
+function Depot({ title = 'North field depot' }: { title?: string }) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>Open until 18:00.</CardDescription>
+      </CardHeader>
+      <CardBody>Twelve kits ready for collection.</CardBody>
+      <CardFooter>
+        <Button size="sm" variant="ghost">
+          Details
+        </Button>
+        <Button size="sm">Collect</Button>
+      </CardFooter>
+    </Card>
+  )
+}
+
+<div className="max-w-sm w-full">
+  <Depot />
+</div>
+```
+
+### With an image: edge to edge, no padding around it. The title already names the picture, so its alt text (the description a screen reader reads out) is empty
+
+```tsx
+<div className="max-w-sm w-full">
+  <Card>
+    <CardMedia src="/media/hero-poster-960.webp" aspect="16/9" />
+    <CardHeader className="pt-5">
+      <CardTitle>Range hall depot</CardTitle>
+      <CardDescription>Open until 18:00.</CardDescription>
+    </CardHeader>
+    <CardBody>Twelve kits ready for collection.</CardBody>
+  </Card>
+</div>
+```
+
+### A row of three
+
+```tsx
+function Depot({ title = 'North field depot' }: { title?: string }) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>Open until 18:00.</CardDescription>
+      </CardHeader>
+      <CardBody>Twelve kits ready for collection.</CardBody>
+      <CardFooter>
+        <Button size="sm" variant="ghost">
+          Details
+        </Button>
+        <Button size="sm">Collect</Button>
+      </CardFooter>
+    </Card>
+  )
+}
+
+<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 w-full">
+  <Depot title="West site depot" />
+  <Card>
+    <CardHeader>
+      <CardTitle>South gate depot</CardTitle>
+      <CardDescription>Open until 20:00.</CardDescription>
+    </CardHeader>
+    <CardBody>Four kits ready for collection, three on order.</CardBody>
+    <CardFooter>
+      <Button size="sm" variant="ghost">
+        Details
+      </Button>
+      <Button size="sm">Collect</Button>
+    </CardFooter>
+  </Card>
+  <Card>
+    <CardHeader>
+      <CardTitle>Harbour depot</CardTitle>
+      <CardDescription>Closed today.</CardDescription>
+    </CardHeader>
+    <CardBody>Nothing ready. Next opening tomorrow, 08:00.</CardBody>
+    <CardFooter>
+      <Button size="sm" variant="secondary">
+        Notify me
+      </Button>
+    </CardFooter>
+  </Card>
+</div>
+```
+
+### Actions inside the content, no action bar: left-aligned, primary first, secondary after
+
+```tsx
+<div className="max-w-sm w-full">
+  <Card>
+    <CardHeader>
+      <CardTitle>Marsh depot</CardTitle>
+      <CardDescription>Open until 17:00.</CardDescription>
+    </CardHeader>
+    <CardBody>
+      Twelve kits ready for collection. Bring your booking number.
+      <CardActions>
+        <Button size="sm">Collect</Button>
+        <Button size="sm" variant="secondary">
+          Details
+        </Button>
+      </CardActions>
+    </CardBody>
+  </Card>
+</div>
+```
+
+### Interactive: the whole card is one link. Hover over it, or press Tab to reach it
+
+```tsx
+function DepotLink({ title, note, href }: { title: string; note: string; href: string }) {
+  return (
+    <Card interactive className="h-full">
+      <CardBody className="flex flex-col gap-1">
+        <CardTitle>
+          <a href={href} className={cardLinkClass}>
+            {title}
+          </a>
+        </CardTitle>
+        <CardDescription>{note}</CardDescription>
+      </CardBody>
+    </Card>
+  )
+}
+
+<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 w-full">
+  <DepotLink title="Ridge depot" note="Open until 18:00. Twelve kits ready." href="#ridge-depot" />
+  <DepotLink title="Quarry depot" note="Open until 20:00. Four kits ready." href="#quarry-depot" />
+  <DepotLink title="Mill depot" note="Closed today. Opens tomorrow, 08:00." href="#mill-depot" />
+</div>
+```
+
+### As a section
+
+```tsx
+<div className="max-w-sm w-full">
+  <Card as="section">
+    <CardHeader>
+      <CardTitle level={2}>Totals</CardTitle>
+      <CardDescription>This week, all depots.</CardDescription>
+    </CardHeader>
+    <CardBody>128 kits collected, 6 outstanding.</CardBody>
+  </Card>
+</div>
+```
+
+## Keyboard
+
+| Keys | Result |
+|---|---|
+| `Tab` | Moves through the card's own buttons and links. The card itself isn't a stop, interactive or not. Focus on anything inside an interactive card lights its border and lifts it 4px. |
+
+## Do
+
+- Put actions in CardFooter when the card ends in an action bar. It's a right-aligned row with the gap between buttons already set and the primary last. A fullWidth button fills it.
+- Put actions in CardActions, inside CardBody, when the button belongs to the text above it and there should be no bar. Primary first, then the secondary.
+- Wherever a card has a primary button, put a secondary or ghost button beside it (Details, Cancel), unless the card really has only one action.
+- Give every card a title, even a short one. It names the card for screen readers.
+- Put CardMedia first in the card, and give a row of cards the same aspect, so the titles line up.
+- Give every card in a row the same parts, so they line up.
+- Use section for a group inside a page and article for an item that stands on its own.
+- Set interactive on a card whose whole surface is one link, and only on those: a product, a category tile.
+- Make the click target a real link stretched over the card from its title, so the name, the focus ring and middle-click all belong to the link.
+
+## Don't
+
+- Don't make the whole card a link by wrapping it in an a element. That puts clickable things inside a clickable thing. Stretch the title's link over the card and set interactive.
+- Don't set interactive on a card that only holds a button or a link somewhere inside it. The lit border promises that a click anywhere does something.
+- Don't add your own hover border, lift or glow to a card. There's one prop and one treatment, so every clickable card responds the same way.
+- Don't clip an interactive card: it lifts 4px and its crosshair arms reach 5px outside it. Carousel leaves that room by itself.
+- Don't put CardActions and CardFooter in the same card. Two places to act, with opposite alignment and order, read as two different decisions.
+- Don't right-align CardActions or put the primary last in it. The two parts differ on purpose: the bar is on the right with the primary last, the inline row is on the left with the primary first.
+- Don't pad around a picture to fake CardMedia, or wrap it in CardBody. The picture runs edge to edge, so it goes directly in the Card.
+- Don't bevel a card.
+- Don't nest cards.
+
+## Common mistakes
+
+Wrong:
+
+```tsx
+<Card className="border-2 border-[var(--color-accent-signal-fill)]">
+```
+
+Right:
+
+```tsx
+<Card style={{ border: '2px solid var(--color-accent-signal-fill)' }}>
+```
+
+The panel sets its own border outside any CSS cascade layer, so a border utility class never wins. To highlight or select a card, set the border inline, using a token (one of the system's named design values).
+
+## Anatomy
+
+- **Card**: The root. An article element by default, named by its title. Uses the .panel and .crosshair classes.
+- **Interactive state**: Only with interactive. On hover, and while anything inside has keyboard focus, the thin border turns accent.signal.fill and the whole card slides up 4px (four pixels). It slides back down when the pointer leaves or focus moves on. It's a CSS transform, so nothing around it moves. When someone has turned on reduced motion (prefers-reduced-motion), the border still changes but the card doesn't move.
+- **CardMedia**: A picture across the full width of the card, flush with the top and side edges inside the border, cropped to an aspect ratio. It's the first child, before CardHeader or CardBody. Without a src, its children fill the box instead (a placeholder).
+- **CardHeader**: Groups the title and description.
+- **CardTitle**: A heading at whatever level the page needs, 3 by default.
+- **CardDescription**: A short secondary line under the title.
+- **CardBody**: Grows to fill the space, so the footers in a row of cards line up.
+- **CardFooter**: The action bar: right-aligned, with the primary button last (rightmost), above a thin line that runs edge to edge. It's where a task ends, the same position as DialogFooter.
+- **CardActions**: Actions inside the content, placed in CardBody after the text. A row that wraps, left-aligned, primary first and secondary after it, with no line and no bar. It's on the left because people read a body down its left edge, so the button stays next to the text it acts on at any card width.