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.
Preview
Launch workspace
Assets, owners, and milestones.
12 active tasks across three owners.
Product update
Weekly report
Shared with the workspace.
Card guidance
One clear destination.
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle, CardVisual } from '@nerio-ui/ui';<Card as="article"> <CardVisual>...</CardVisual> <CardHeader> <div> <CardTitle as="h2">Launch workspace</CardTitle> <CardDescription>Plan assets, owners, and milestones in one focused surface.</CardDescription> </div> <CardAction>...</CardAction> </CardHeader> <CardContent>12 active tasks</CardContent></Card>Installation and imports
Install the editable registry source, or use the matching package entrypoint when the product keeps Nerio as a workspace dependency.
pnpm dlx nerio add cardimport { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle, CardVisual } from '@nerio-ui/ui';Usage
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle, CardVisual } from '@nerio-ui/ui';<Card as="article"> <CardVisual>...</CardVisual> <CardHeader> <div> <CardTitle as="h2">Launch workspace</CardTitle> <CardDescription>Plan assets, owners, and milestones in one focused surface.</CardDescription> </div> <CardAction>...</CardAction> </CardHeader> <CardContent>12 active tasks</CardContent></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 heading area for title and supporting copy. |
card-title | Semantic title slot for concise surface headings. |
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.
- Provide semantic headings inside cards when the content needs structure.
- 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.
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 borderless 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 | Heading and secondary text slots for documentation and registry examples. |
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; the default white or black surface carries only a soft elevation shadow, while secondary grouping stays flat and muted.
Do / do not
Do
Use for repeated summaries, project cards, or compact object groups.
Do not
Do not put cards inside cards or wrap entire page sections as decorative cards.
Related components
Tokens
These are the primary customization points. Override semantic or component tokens instead of changing component source.
| Token | Purpose |
|---|---|
--n-card-padding | Public customization point for this component contract. |
--n-card-padding-inline | Public customization point for this component contract. |
--n-card-padding-block | Public customization point for this component contract. |
--n-card-gap | Public customization point for this component contract. |
--n-card-radius | Public customization point for this component contract. |
--n-card-background | Public customization point for this component contract. |
--n-card-background-interactive-hover | Public customization point for this component contract. |
--n-card-background-secondary | Public customization point for this component contract. |
--n-card-background-secondary-hover | Public customization point for this component contract. |
--n-card-border-secondary | Public customization point for this component contract. |
--n-card-border-interactive | Public customization point for this component contract. |
--n-card-shadow | Public customization point for this component contract. |
--n-card-shadow-secondary | Public customization point for this component contract. |
--n-motion-hover-duration | Public customization point for this component contract. |
--n-motion-hover-easing | Public customization point for this component contract. |
--n-motion-focus-duration | Public customization point for this component contract. |
--n-motion-focus-easing | Public customization point for this component contract. |
--n-focus-ring | Public customization point for this component contract. |