Card

Cards group related product information without creating nested or decorative panels.

Overview and decision boundary

Use Card to group a single related object or repeated item without turning page sections into nested panels.

Do not put cards inside cards or wrap entire page sections as decorative cards.

Curved architectural forms illuminated by soft light

Design system rollout

Bring components, owners, and release milestones into one shared workspace.

Track implementation progress and keep the team aligned through every release stage.

1import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardVisual } from '@nerio-ui/ui';2import { Button } from '@nerio-ui/ui/client';34<Card as="div">5  <CardVisual placement="bleed">6    <img src="/card/abstract-architecture.jpg" alt="Curved architectural forms illuminated by soft light" />7  </CardVisual>8  <CardHeader>9    <CardTitle>Design system rollout</CardTitle>10    <CardDescription>Bring components, owners, and release milestones into one shared workspace.</CardDescription>11  </CardHeader>12  <CardContent>Track implementation progress and keep the team aligned through every release stage.</CardContent>13  <CardFooter>14    <Button>Open workspace</Button>15  </CardFooter>16</Card>

Installation and imports

Install the editable registry source, or use the matching package entrypoint when the product keeps Nerio as a workspace dependency.

1pnpm exec nerio add card23import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardVisual } from '@nerio-ui/ui';4import { Button } from '@nerio-ui/ui/client';

Usage

1import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardVisual } from '@nerio-ui/ui';2import { Button } from '@nerio-ui/ui/client';34<Card as="div">5  <CardVisual placement="bleed">6    <img src="/card/abstract-architecture.jpg" alt="Curved architectural forms illuminated by soft light" />7  </CardVisual>8  <CardHeader>9    <CardTitle>Design system rollout</CardTitle>10    <CardDescription>Bring components, owners, and release milestones into one shared workspace.</CardDescription>11  </CardHeader>12  <CardContent>Track implementation progress and keep the team aligned through every release stage.</CardContent>13  <CardFooter>14    <Button>Open workspace</Button>15  </CardFooter>16</Card>

Variants

Variant	Purpose
`default`	Default variant using semantic Nerio tokens.
`secondary`	Supporting action with a visible control boundary.

Anatomy

Slot	Purpose
`card`	Borderless surface container with radius, spacing, and soft elevation tokens.
`card-visual`	Optional generic visual slot for icons, avatars, logos, previews, or media; inset by default and edge-to-edge when placement is bleed.
`card-header`	Optional title area for primary and supporting copy.
`card-title`	Concise surface title that renders neutral text by default and supports an explicit heading element when document structure requires one.
`card-description`	Secondary explanatory text.
`card-action`	Optional compact control or status aligned at the top end of the header.
`card-content`	Product content such as object title, metadata, and actions.
`card-footer`	Actions or metadata aligned after the content.

States

State	Purpose
`Static`	Groups content without becoming clickable.
`Inset visual`	Uses CardVisual for an icon, avatar, logo, or compact preview.
`Bleed visual`	Uses CardVisual placement=bleed for edge-to-edge visual content.
`Linked`	href renders a native anchor with hover and visible focus feedback.

Motion

Card has no default motion because grouped content should stay calm.
Linked Cards use a restrained surface transition and the shared focus ring.

Accessibility

Use Card to group related content, not to decorate every section.
CardTitle renders a neutral div by default. Choose an explicit h2-h6 only when the card participates in the document outline, and preserve heading order.
Use CardVisual for icons, avatars, logos, previews, and media; only bleed placement reaches the card edge.
Use CardAction only in a surface Card. Linked Cards cannot contain interactive descendants.
Avoid nesting cards inside cards.
Use href for a whole-card destination; it renders a native anchor with hover and focus feedback. Do not place interactive descendants inside a linked Card.

Review the shared responsibility and evidence boundaries in the Accessibility foundation alongside this component-specific contract. Use the Spacing & layout foundation for shared density, wrapping, overflow, reflow, and component-versus-product ownership guidance. The Color foundation, Typography foundation, and Localization foundation define the shared visual-role, text-resilience, direction, and locale boundaries used by component examples.

API

Prop	Purpose
`as`	section, article, or div semantic wrapper.
`href`	Turns the entire Card into a native anchor destination.
`variant`	default or secondary; secondary is a muted, flat surface.
`CardVisual`	Generic visual slot with inset or bleed placement; child elements own image alt text and other media semantics.
`CardAction`	Optional header-end slot for compact non-primary status or controls.
`CardHeader / CardContent / CardFooter`	Optional layout slots for predictable anatomy.
`CardTitle / CardDescription`	Primary and secondary text slots. CardTitle defaults to div and CardDescription uses the standard 14 px body size.

Implementation contract

Contract	Value
`Registry item`	card installs 5 source files into the configured components directory.
`Base UI`	No interactive primitive required.
`Registry dependencies`	None.
`Package dependencies`	clsx, react, tailwind-merge, tailwindcss

Styling contract

Contract	Value
`Authoring`	`Complete, statically detectable Tailwind CSS v4 recipes own component visuals.`
`Values`	`Semantic and component --n-* variables remain the canonical customization layer.`
`Overrides`	`Customizable slots merge consumer className values with tailwindCn so conflicting utilities resolve deterministically.`
`Residual CSS`	`Only shared keyframes and scoped no-Preflight compatibility rules remain; there is no parallel visual selector layer.`

Design notes

Use Card for truly related content, not as a default wrapper for every section.
Use typography and spacing first; every Card keeps a subtle mode-aware border, the default surface adds soft elevation, and secondary grouping stays flat and muted.
Keep the gap between visual, header, content, and footer larger than the internal title-description and action gaps.

Do / do not

Use for repeated summaries, project cards, or compact object groups.

Do not