Card

The base content surface — header, title, description, content and footer slots.

Card is the canonical surface: it composes bg-card with the preset's shadow, gloss and blur recipe. In the neumorphic preset its background equals the page (by design); in glass it's translucent; in skeuomorphic it gets the paper gloss.

Installation

import {
  Card, CardHeader, CardTitle, CardDescription,
  CardContent, CardFooter, CardAction,
} from "@iammikz/srui";

Usage

Create project

Deploy your new project in one-click.

Content goes here.

Props

Each part accepts all native div props (className, onClick, …):

Export	Role
`Card`	The surface; `bg-card` + `surface`
`CardHeader`	Top slot; grid for title/description/action
`CardTitle`	Title text
`CardDescription`	Muted description text
`CardAction`	Top-right action area (e.g. a menu button)
`CardContent`	Body slot
`CardFooter`	Bottom slot

Examples

With a header action

Notifications

3 new

You have 3 unread messages.

Fully composed

Every slot at once — header grid with title, description and an action, then content and a two-button footer:

Create project

Deploy your new project in one-click.

Content goes here.

Accessibility

Cards are plain divs — content semantics (headings, buttons) are up to you. If a whole card is clickable, put the interactive element inside it rather than making the card itself a button, so screen readers see a sane element tree.