Surface

Card API

Card is the core Foundry surface primitive for panels, docs blocks, dashboard modules, and CMS containers.

Preview components

Open the component docs to see examples, combinations, and usage patterns built on top of this API.

CardSurface examples, forged cards, and layout combinations.

Preview

Import

import { Card } from "@axonyx/react";

Props

Prop	Type	Default	Description
surface	"default" \| "forged" \| "brushed" \| "inset"	"default"	Controls the panel surface treatment.
border	"forged"	undefined	Adds reinforced frame and corner rivets.
recipe	"hero-card" \| "feature-section" \| "page-header" \| "docs-section" \| "docs-callout" \| "docs-nav" \| "docs-code-block" \| "command-list"	undefined	Optional recipe hook for pre-authored Foundry layout treatments.
brush	"horizontal" \| "vertical" \| "diagonal" \| "reverse-diagonal"	undefined	Directional brushed-metal treatment used with `surface="brushed"`.
className	string	undefined	Escape hatch for app-level composition.

Prop	Type	Default	Description
CardHeader	div slot	-	Header row for title, eyebrow, badges, and trailing actions.
CardEyebrow	p slot	-	Upper label for section, product area, or state.
CardTitle	heading slot	as="h3"	Semantic title primitive for card headings.
CardDescription	p slot	-	Muted secondary copy under the title.
CardActions	div slot	-	Flexible action row for buttons, chips, or links.

CSS contract

.ax-card
[data-brush]
[data-surface]
[data-border]
.ax-card__header
.ax-card__eyebrow
.ax-card__title
.ax-card__description
.ax-card__media
.ax-card__content
.ax-card__actions
[data-recipe]

Foundry notes

Surface first, decoration second

Use `surface="inset"` for wells, logs, and preview zones. Use `surface="forged"` for panels that should feel important or machine-like.

Cards also host empty workflows

This is useful for CMS modules, dashboard panels, and scaffold-first product UI.