componentes / card

Card

Superficie elevada que agrupa contenido relacionado, con encabezado, cuerpo y pie opcionales.

Cómo usar

`Card` no tiene rol ARIA: dale un encabezado acorde a la página. `CardHeader`, `CardBody` y `CardFooter` son ayudas opcionales. `padding` es `none` (media de borde a borde), `md` o `lg`.

preview

Plan Pro

Hasta 10 usuarios.

Facturado mensualmente

Card.tsx

import { Card, CardHeader, CardBody, CardFooter } from "vaiperui";
 
<Card>
  <CardHeader>Plan Pro</CardHeader>
  <CardBody>Hasta 10 usuarios.</CardBody>
  <CardFooter>Facturado mensualmente</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	Valores	Predeterminado	Descripción
padding	none \| md \| lg	md	Espaciado interno: 0, 16px o 24px
radius	none \| sm \| md \| lg \| full	lg	Redondeo de las esquinas
(nativas)	div (Card, CardHeader, CardBody, CardFooter)	ninguno	Todas las props nativas del elemento, className, ref, etc.