components / card

Card

Elevated surface that groups related content, with optional header, body and footer.

How to use

`Card` has no ARIA role: give it a heading that fits the page. `CardHeader`, `CardBody` and `CardFooter` are optional helpers. `padding` is `none` (edge-to-edge media), `md` or `lg`.

preview

Pro plan

Up to 10 users.

Billed monthly

Card.tsx

import { Card, CardHeader, CardBody, CardFooter } from "vaiperui";
 
<Card>
  <CardHeader>Pro plan</CardHeader>
  <CardBody>Up to 10 users.</CardBody>
  <CardFooter>Billed monthly</CardFooter>
</Card>

Padding

preview

none

padding.tsx

<Card padding="none">none</Card>
<Card padding="md">md</Card>
<Card padding="lg">lg</Card>

Radius

preview

none

full

radius.tsx

<Card radius="none">none</Card>
<Card radius="sm">sm</Card>
<Card radius="md">md</Card>
<Card radius="lg">lg</Card>
<Card radius="full">full</Card>

Props

Prop	Values	Default	Description
padding	none \| md \| lg	md	Inner spacing: 0, 16px or 24px
radius	none \| sm \| md \| lg \| full	lg	Corner rounding
(native)	div (Card, CardHeader, CardBody, CardFooter)	none	Every native prop of the element, className, ref, etc.