Ravox KitSurfaces
Card
Groups a subject on one surface: header with title, description and an action in the corner, full-bleed media, body and footer. The whole card can be clickable without nesting buttons inside a link.
Acesso anual
Todos os designs do catálogo e os que saírem nos próximos 12 meses.
Ativo
- Renova em
- 28/09/2027
- Downloads
- 14 de ilimitado
Settings
Toggles
Examples
Fully clickable, with a menu in the corner
Aurora
Landing para clínica de estética · editado há 2 h
Compact, in a dashboard grid
Pedidos hoje
38
12 aguardando envio
Ticket médio
R$ 142
Últimos 7 dias
Form inside the card
Convidar para o time
O convite vale por 7 dias.
Subtle, for notices inside the page
Seu design está em revisão
A moderação responde em até 2 dias úteis. Você recebe um e-mail com o resultado.
Installation
The command creates components/ui/card.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add cardProps
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "outline" | "subtle" | "default" | Surface with a border, only the border over the page background, or a light background with no border (Card). |
| density | "comfortable" | "compact" | "comfortable" | 24px or 16px padding. compact is for grids of cards in a dashboard (Card). |
| as | "h2" | "h3" | "h4" | "p" | "h3" | Title tag, to follow the page hierarchy (CardTitle). |
| CardAction | ComponentProps<"div"> | — | Goes inside the CardHeader and sits in the right corner. Stays clickable in a card with a link. |
| CardMedia | ComponentProps<"div"> | — | Full-bleed image or preview; at the start or end, it touches the edge. |
| divider | boolean | false | Line above the footer (CardFooter). |
| CardLink | ComponentProps<"a"> & { asChild } | — | On the title, makes the whole card clickable: the link stretches over the card, and focus paints its border. |