Card

Container for grouping related content with header, content, and footer

Basic Usage

Card Title

Card description goes here.

This is the card content area. You can put any content here.

pnpm add @corew500/ui

import { Card } from "@corew500/ui/card"

<Card>Content</Card>

Axis	Values	Default
`variant`	defaultoutline	default
`size`	defaultsm	default
`interactive`	truefalse	false
`hoverIntent`	defaultprimarysecondaryaccentdestructive	default

Axis	Values	Default
`padding`	defaultsmnone	default

CMSPayload CMS Integration

This component supports CMS-driven content via @corew500/cms-payload.

Welcome

Get started with our platform

Explore features and start building amazing things.

CMS FieldsEN

Title

Description

Content

Show Footer

Button Label

This simulates how a content editor configures cards in Payload CMS. Switch locales to see localized content.

Prop	Type	Default	Description
`interactive`	enum	`false`	Enables hover effects (shadow elevation, ring color transition, cursor pointer). Adds `group` class for child elements to use `group-hover:*` utilities.
`hoverIntent`	enum	`default`	Color intent for hover ring. Only applies when `interactive` is true.
`render`	(props: CardRenderProps) => ReactNode	—	Render function for custom element types (e.g., `<a>`, `<button>`). Receives props that must be spread onto the rendered element. @example ```tsx <Card interactive render={(props) => <a href="/details" {...props}>Content</a>} /> ```
`variant`	enum	`default`	—
`size`	enum	`default`	—

`interactive` adds visual hover states only—not keyboard focus or click handling
For clickable cards, wrap in `<a>` or `<button>`, or add `onClick` + `role="button"` + `tabIndex={0}`