Card
Card forma parte del apartado «Layout y marca» del kit. Cards, contenedores, stacks, carruseles y las piezas de identidad del kit (Logo, Sello, olas).
Instalación#
bash
pnpm add @tsukira/uiUso#
tsx
import { Card } from "@tsukira/ui"; export function Ejemplo() { return <Card />;}Ejemplos#
Los ejemplos detallados de Card están en camino. Mientras tanto, su demo interactiva vive en la página del grupo.
Ver demo en Layout y marcaAPI#
CardPropsextends HTMLAttributes<HTMLDivElement>| Prop | Tipo | Default | Descripción |
|---|---|---|---|
padding | 'none' | 'sm' | 'md' | 'lg' | — | — |
shadow | 'flat' | 'sm' | 'md' | 'lg' | — | Sombra del card. Reemplaza `elevation` (2.0). |
interactive | boolean | — | Hover lift (translateY -2px + shadow grande). Útil para cards clickables. |
CardHeaderPropsextends Omit<HTMLAttributes<HTMLDivElement>, 'title'>| Prop | Tipo | Default | Descripción |
|---|---|---|---|
eyebrow | ReactNode | — | Mini-eyebrow mono uppercase con color de acento. |
title | ReactNode | — | — |
description | ReactNode | — | — |
action | ReactNode | — | — |
CardCoverPropsextends Omit<HTMLAttributes<HTMLDivElement>, 'children'>| Prop | Tipo | Default | Descripción |
|---|---|---|---|
src | string | — | URL de la imagen. Si no se pasa, solo se renderea background/children. |
alt | string | `''` para imágenes decorativas | Alt text (a11y). Default `''` para imágenes decorativas. |
gradient | string | — | CSS `background` — útil para gradients o color sólido cuando no hay `src`. |
aspectRatio | '16/9' | '4/3' | '1/1' | '3/4' | '21/9' | 'auto' | `'16/9'` | Aspect ratio. Default `'16/9'`. `'auto'` desactiva aspect-ratio (usa `height` o contenido). |
height | number | — | Altura fija (px). Override del aspectRatio. |
children | ReactNode | — | Contenido overlay (sello, badges, etc.) sobre el cover. |