Card

Stable

Content container with four variants, configurable padding, and optional interactive states. Sub-components Card.Header, Card.Body, Card.Footer, and Card.Image provide semantic layout slots.

DisplayCompoundVhyxSeal

Type: display
Intent: display-content
Safety: low
Confirm: not needed
Undo: one-way

Interactive example

Pro planPopular

$12/mo

Everything in Starter, plus advanced features and priority support.

Import

tsx

import { Card } from '@vhyxui/react'

// Sub-components
// Card.Header — top slot (title, badge, actions)
// Card.Body   — main content area
// Card.Footer — bottom slot (buttons, metadata)
// Card.Image  — full-width image at top or bottom

Variants

default

outline

ghost

elevated

Clickable card

Hover for shadow. Click for scale.

Padding

padding="none"

padding="sm"

padding="md"

padding="lg"

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'outline' \| 'ghost' \| 'elevated'`	`'default'`	Visual style of the card.
`padding`	`'none' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Internal padding of the card.
`interactive`	`boolean`	`false`	Adds hover shadow and active scale for clickable cards.
`contract`	`Partial<ComponentContract>`	—	VhyxSeal contract override.
`className`	`string`	—	Additional CSS classes.

Also accepts all standard HTMLDivElement attributes.

Accessibility

Agent contract

Default VhyxSeal contract shipped with every Card.

Default contract

{
  "type": "display",
  "intent": "display-content",
  "description": "Displays grouped content in a visually distinct container",
  "requires": [],
  "requiredPermissions": [],
  "consequence": "None — display only.",
  "affects": [],
  "reversible": false,
  "safetyLevel": "low",
  "requiresConfirmation": false,
  "destructive": false,
  "contractVersion": "0.0.1",
  "fingerprint": "vhyxs_6ecd14a9"
}

Theming

Override these CSS tokens to theme Card.

--vhyx-color-surfaceCard background

--vhyx-color-borderOutline variant border

--vhyx-radius-lgCard border radius

--vhyx-shadow-xsDefault variant shadow

--vhyx-shadow-smElevated variant shadow

--vhyx-shadow-mdInteractive hover shadow

--vhyx-duration-fastInteractive transition duration

Examples

Feature grid

Fast

Zero runtime overhead.

Accessible

WCAG 2.1 AA by default.

Themeable

CSS tokens throughout.

User profile card

Jane Smith

@janesmith