# Card

A React component in [Beamline](https://beamline.io/)'s [Layout](https://beamline.io/components/layout) category. Live demo: https://beamline.io/components/card

A record or a small group of related content and actions: optional media, avatar, title, status, action, meta, free content and a Details toggle; plain or double-bezel frame.

## Use it for

- Grouping a record or a small set of related content and actions.
- A chart, table or list with a title: the card is its one frame; put the content straight in, never another card.

## Not for

- Dense lists of records ([table](https://beamline.io/components/table), data grid or [item](https://beamline.io/components/item)).
- Page sections (use layout, not boxes).
- A box inside a card: use a seam (footer, Separator) or a Bezel's inset panel instead.

## Anatomy

- frame (one m-surface rim, or a bezel shell)
- media (flush to the frame)
- avatar
- title
- description
- meta
- status (Badge)
- action
- content
- details toggle and panel
- footer (behind a line-soft seam, same frame; nesting input for its controls)

## Variants

- **frame**: plain, bezel

## States

- details closed
- details open
- working (aria-busy; the frame stays and the body holds a skeleton of the real shape)

## Keyboard

- The Details toggle is a button

## Motion

Details open by height (collapsible).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `frame` | `"plain" \| "bezel"` | `"plain"` |  |
| `title / description / media / avatar / action / meta` | `ReactNode` | — |  |
| `status` | `string \| { label, tone? }` | — |  |
| `details / detailsLabel` | `ReactNode / string` | — |  |
| `open / defaultOpen / onOpenChange` | `boolean` | — |  |
| `footer` | `ReactNode` | — | Actions or a summary line at the bottom, set off by a line-soft seam inside the same frame. |
| `headingLevel` | `2 \| 3 \| 4 \| 5 \| 6` | — | The title heading level (default 3), so cards nest under the page headings: 2 directly under a page title. |
| `style / ref` | `CSSProperties / native Ref` | — | native article |
| `classNames` | `CardClassNames` | — |  |

## Dependencies

`lucide-react`

## Import

```tsx
import { Card } from "@/components/card/card";
```

## Get it

Card is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Layout

- [Accordion](https://beamline.io/components/accordion): Topics that open in place, one at a time or several: FAQs and settings sections; each header is a button and the panel's height follows its content.
- [Aspect ratio](https://beamline.io/components/aspect-ratio): Holds media, video and embeds at a fixed width-to-height ratio while the layout resizes.
- [Bezel](https://beamline.io/components/bezel): A double-bezel frame: an outer shell with a hairline, a small gap, and an inset panel with its own edge, so a preview, chart or media reads as set into…
- [Carousel](https://beamline.io/components/carousel): A row of slides that snap into place: swipe on touch, drag or the arrows with a mouse, ← → when focused, or the dots; optional autoplay that pauses and…
- [Collapsible](https://beamline.io/components/collapsible): One region that opens and closes in place from its trigger, its height animating to the content.
- [Direction](https://beamline.io/components/direction): Sets left-to-right or right-to-left for everything inside: text and logical spacing flip, and Radix parts read the direction for keys and placement.
- [Expandable card](https://beamline.io/components/expandable-card): A dense card that grows in place when asked: the frame resizes and the clamped preview opens into the full text.
- [Resizable panels](https://beamline.io/components/resizable-panels): Panes that trade space across draggable dividers; each divider is a focusable separator with arrow keys, limits, folding for collapsible panes and…
- [Scroll area](https://beamline.io/components/scroll-area): A native scroll region with thin overlay thumbs and edge fades that show only where more content waits; thumbs can be dragged or clicked.
- [Separator](https://beamline.io/components/separator): A hairline between groups, horizontal or vertical; hidden from screen readers unless it carries meaning.
- [UI root](https://beamline.io/components/ui-root): Makes a region of any app a Beamline root: theme, brand and direction for everything inside, and a matching layer at page level where its menus, dialogs…