ComponentsData display
The main content surface. Takes its glass or solid material from tokens; built from Header, Body, Footer and Inset parts.
components/card.tsxtheme · material · accent · density · font
Publish
Visibility and schedule
Scheduled
StatusDraft
Publish onNov 11, 09:00
Installation
$ pnpm add @vamos-cms/ui
The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-cms/ui/styles.css";
Usage
import { Card, CardHeader, CardBody } from "@vamos-cms/ui";
<Card>
<CardHeader title="Traffic" description="Last 30 days" />
<CardBody>…</CardBody>
</Card>Examples
Stat card
Numbers use the mono font with tabular figures.
Revenue this month
$12,840
Goal $46,80027%
API
CardHeader
| Prop | Type | Default |
|---|---|---|
titleTitle. | ReactNode | — |
descriptionSubtitle. | ReactNode | — |
actionAction slot at the top end. | ReactNode | — |
Card / CardBody / CardFooter / Inset
| Prop | Type | Default |
|---|---|---|
...propsNative div attributes. | HTMLAttributes<div> | — |