componentes / card
Card
Superfície elevada que agrupa conteúdo relacionado, com cabeçalho, corpo e rodapé opcionais.
Como usar
O `Card` não tem role ARIA: dê a ele um título que caiba na página. `CardHeader`, `CardBody` e `CardFooter` são auxiliares opcionais. `padding` é `none` (mídia de ponta a ponta), `md` ou `lg`.
preview
Plano Pro
Até 10 usuários.
Cobrado mensalmente
Card.tsx
import { Card, CardHeader, CardBody, CardFooter } from "vaiperui"; <Card> <CardHeader>Plano Pro</CardHeader> <CardBody>Até 10 usuários.</CardBody> <CardFooter>Cobrado mensalmente</CardFooter></Card>Padding
preview
none
md
lg
padding.tsx
<Card padding="none">none</Card><Card padding="md">md</Card><Card padding="lg">lg</Card>Radius
preview
none
sm
md
lg
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 | Valores | Padrão | Descrição |
|---|---|---|---|
| padding | none | md | lg | md | Espaçamento interno: 0, 16px ou 24px |
| radius | none | sm | md | lg | full | lg | Arredondamento dos cantos |
| (nativas) | div (Card, CardHeader, CardBody, CardFooter) | nenhum | Todas as props nativas do elemento, className, ref etc. |