Card

A surface container with configurable padding and an optional header (icon + title + an action slot).

Usage

1import { Card } from "@behivetech/atoms.card";
2
3function Example() {
4  const onClose = () => alert("closed");
5  return (
6    <>
7      <Card padding="md">Content</Card>
8
9      <Card title="Settings" padding="md">
10        Content
11      </Card>
12
13      <Card
14        icon="🧩"
15        title="Block"
16        action={<button onClick={onClose}>✕</button>}
17        padding="md"
18      >
19        Content
20      </Card>
21    </>
22  );
23}

The action slot is freeform — pass a close button, a menu, multiple buttons, or nothing. If icon, title, and action are all omitted, no header is rendered and children render directly in the card (unchanged from a plain Card). When a header is present, padding applies to the body instead of the whole card, so the header can span edge-to-edge with its own fixed padding.

Heading level

title renders inside an h1–h6 tag (not a span) so it takes its correct place in the page's heading outline — set via headingLevel, which defaults to 3. The default assumes the common case: a page's own h1, sections within it titled h2, and a Card nested inside one of those sections landing at h3. Override it when a card sits at a different depth — e.g. headingLevel={2} for a card used directly under a page's h1 with no intervening section:

1<Card title="Settings" headingLevel={2} padding="md">
2  Content
3</Card>

Root element

The root renders as a <section>, labelled by title via aria-labelledby, whenever a title is given — an HTML5 <section> should have an accessible heading, and title is exactly that. With no title (a bare surface, or a header made up of just icon/action), the root stays a plain <div>, since an unlabelled <section> isn't a meaningful landmark.

Interactive (clickable) cards

Pass onSelect to turn the body into a real <button> — hover/focus affordance plus a centered, stacked content layout — for tile/action-card patterns like a component picker grid:

1import { Card } from "@behivetech/atoms.card";
2import { Icon } from "@behivetech/atoms.icon";
3
4function Example() {
5  const item = { name: "Hero banner" };
6  const handleSelect = (selected) => alert(selected.name);
7  return (
8    <Card padding="md" onSelect={() => handleSelect(item)}>
9      <Icon name="box" size="lg" />
10      <span>{item.name}</span>
11    </Card>
12  );
13}

This is the same job MUI's CardActionArea does, folded into Card itself rather than a separate component — children must stay to phrasing content (text, spans, icons), since a native <button> can't contain block-level elements like <div>. onSelect is deliberately distinct from onClick: onClick is the plain pass-through to the root element (e.g. to stop click propagation on a whole panel), while onSelect specifically drives the interactive-body behavior described here.

Overriding surface styling

background/border/border-radius read from --card-background/--card-border/--card-radius custom properties (falling back to the design tokens above). A consumer embedding a Card for a different context — a docked panel with no elevation, a modal with a larger radius — can set these on its own wrapping class instead of fighting CSS-module specificity:

1.my-docked-panel {
2  --card-border: none;
3  --card-radius: 0;
4}