HorizontalCard
HorizontalCard forma parte del apartado «Patterns» del kit. Composiciones listas para usar: KPIs, perfiles, precios, eventos, posts y más.
Instalación#
bash
pnpm add @tsukira/uiUso#
tsx
import { HorizontalCard } from "@tsukira/ui"; export function Ejemplo() { return <HorizontalCard />;}Ejemplos#
Los ejemplos detallados de HorizontalCard están en camino. Mientras tanto, su demo interactiva vive en la página del grupo.
Ver demo en PatternsAPI#
HorizontalCardPropsextends Omit<HTMLAttributes<HTMLDivElement>, 'title'>| Prop | Tipo | Default | Descripción |
|---|---|---|---|
image | ReactNode | string | — | Imagen / media (puede ser url string o ReactNode). |
imageSide | 'left' | 'right' | — | Lado donde va la imagen. |
imageWidth | number | string | — | Ancho de la imagen (px o '40%'). |
eyebrow | ReactNode | — | Eyebrow (categoría/etiqueta). |
title* | ReactNode | — | Título principal. |
description | ReactNode | — | Descripción. |
meta | ReactNode | — | Meta (autor, fecha, etc.). |
actions | ReactNode | — | Acciones (botones). |
interactive | boolean | — | Interactiva (hover lift + cursor). |