{ "name": "Card", "source": "src/components/Card.tsx", "propsType": "CardProps", "description": "Card — a bordered surface that groups one part of a page.\n\nPromoted from the demo app, where the same surface was hand-written as\n`.demo-panel` in nine screens: a settings group, a chart panel, a runs log,\nthe danger zone. For a feature row with media use FullCard; for one\nheadline figure use StatTile.\n\nTHE TITLE DECIDES THE ELEMENT\n\nA titled card is a `
` — a named region, so a\nscreen reader user can jump between cards the way a sighted one scans\nthem. An untitled card is a `
`: a `
` with no name is not a\nlandmark at all, and pretending otherwise only adds noise.\n\nNo `'use client'`: `useId` resolves on the server, and nothing here is\ninteractive. Interactive parts arrive through `action` and `children`.", "import": "import { Card } from 'ionbase-ui';", "status": "stable", "since": "0.77.0", "summary": "A bordered surface that groups one part of a page, with an optional title row. A titled card is a named region; an untitled one is a plain surface.", "useWhen": [ "a page is several distinct groups — settings sections, dashboard panels, a log beside a chart", "a group needs a title, a one-line description or a single action like \"All runs\"", "a loading placeholder needs the same frame as the content it stands in for" ], "useInstead": [ { "when": "it is a feature row with a headline, text and a media panel", "use": "FullCard" }, { "when": "it is one headline figure and how it moved", "use": "StatTile" }, { "when": "the content is a list of settings, each with a label and a control", "use": "SettingRow" }, { "when": "the message needs the user's attention now rather than a place on the page", "use": "Alert" } ], "composition": { "note": "The title row is built from props — `title`, `description`, `action` — so every card lays it out the same way. The body is `children`, spaced 12 apart by the card's grid.", "example": "All runs}>…
" }, "variants": { "intent": { "default": { "use": "every card that is not a danger zone" }, "danger": { "use": "a card of irreversible actions — delete the workspace, transfer ownership. The rule turns red; the title must still say what is at stake" } } }, "a11y": { "guarantees": [ "a titled card renders a
named by its heading, so it is a landmark a screen reader can jump to", "an untitled card renders a
, never an unnamed
", "the danger intent is a border colour only, so the meaning stays in the words" ], "requires": [ "the right `headingLevel` for where the card sits in the page outline", "`isRegion={false}` when the card's only content is a landmark named by the same words, such as a Table labelled by the card's title" ], "notes": [ "`headingLevel` takes 2-6 and defaults to 2. It is a number rather than a variant because it is an outline decision, not a visual one: the title looks the same at every level.", "`description` renders only under a `title`. An untitled card has no title row to put it in." ] }, "antiPatterns": [ { "dont": "a heading passed in `children` instead of `title`", "why": "the card does not become a named region, and the title row loses its layout for `description` and `action`" }, { "dont": "several buttons in `action`", "why": "the title row wraps and the card reads as a toolbar; `action` is for one control — put the rest in the body" }, { "dont": "relying on `intent=\"danger\"` alone to warn", "why": "a red border is not read aloud and is easy to miss; the title and the button labels must say what cannot be undone" }, { "dont": "cards nested inside cards", "why": "border inside border reads as a mistake; group the inner content with a heading or a Divider instead" } ], "stylesheet": "src/styles/card.css", "tokens": [ "--border-error-subtle", "--border-subtle", "--border-width-default", "--font-family-sans", "--font-weight-semibold", "--radius-lg", "--spacing-12", "--spacing-16", "--spacing-2", "--spacing-8", "--surface-default", "--text-default", "--text-secondary", "--type-body-sm", "--type-body-sm-line-height", "--type-h6", "--type-h6-line-height" ], "props": { "title": { "type": "React.ReactNode", "required": false, "origin": "own", "description": "The card's heading. With a title the card is a `
` named by it;\nwithout one it is a plain surface — a `
`, for skeletons and for\ncontent that already has its own heading." }, "headingLevel": { "type": "CardHeadingLevel | undefined", "required": false, "origin": "own", "description": "Heading element for the title. Defaults to `h2`: most cards are the\nfirst level of section under the page's `h1`. The outline is the page's\ndecision, so it is a prop, not a constant." }, "description": { "type": "React.ReactNode", "required": false, "origin": "own", "description": "One line under the title — what the card holds or when changes apply." }, "action": { "type": "React.ReactNode", "required": false, "origin": "own", "description": "One control at the end of the title row: a standalone Link (\"All runs\")\nor a small Button. More than one belongs in the body." }, "intent": { "type": "CardIntent | undefined", "required": false, "origin": "own", "description": "`danger` for a card of irreversible actions — the danger zone.", "values": [ "default", "danger" ] }, "isRegion": { "type": "boolean | undefined", "required": false, "origin": "own", "description": "Whether a titled card is a landmark. Defaults to `true`. Set `false`\nwhen the card's only content is itself a landmark named by the same\nwords — a Table's scroll region — or the page gets two regions with one\nname. The heading still renders; only the `
` becomes a `
`." }, "children": { "type": "React.ReactNode", "required": false, "origin": "own" } }, "propCounts": { "own": 7, "aria": 0, "dom": 276, "other": 0 } }