Skip to main content

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

Interactive example

Pro planPopular

$12/mo

Everything in Starter, plus advanced features and priority support.

Pricing card with header, body, and footer

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

All 4 variants

Clickable card

Hover for shadow. Click for scale.

Interactive card — hover for shadow, click for scale

Padding

padding="none"

padding="sm"

padding="md"

padding="lg"

none, sm, md, lg

Props

PropTypeDefaultDescription
variant'default' | 'outline' | 'ghost' | 'elevated''default'Visual style of the card.
padding'none' | 'sm' | 'md' | 'lg''md'Internal padding of the card.
interactivebooleanfalseAdds hover shadow and active scale for clickable cards.
contractPartial<ComponentContract>—VhyxSeal contract override.
classNamestring—Additional CSS classes.

Also accepts all standard HTMLDivElement attributes.

Accessibility

  • ✓ Card renders as a <div> — not interactive by default, no implicit ARIA role.
  • ✓ For clickable cards, wrap with <a> or <button> as the root element.
  • ✓ Card.Image should always have a meaningful alt attribute.
  • ✓ Group related cards in a <ul> list when they represent a collection.

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.

3-column feature cards

User profile card

Jane Smith

@janesmith

Card with header and footer actions