PromoCard

PromoCard 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/ui

tsx

import { PromoCard } from "@tsukira/ui"; export function Ejemplo() {  return <PromoCard />;}

Los ejemplos detallados de PromoCard están en camino. Mientras tanto, su demo interactiva vive en la página del grupo.

PromoCardPropsextends Omit<HTMLAttributes<HTMLDivElement>, 'title'>

Prop	Tipo	Default	Descripción
`eyebrow`	`ReactNode`	—	Pre-título o etiqueta.
`title`*	`ReactNode`	—	Título principal.
`description`	`ReactNode`	—	Descripción.
`cta`	`ReactNode`	—	Llamada a la acción (botón o link).
`tone`	`'brand' \| 'ink' \| 'gradient' \| 'paper'`	—	Tono / look.
`media`	`ReactNode`	—	Imagen / media a la derecha (horizontal) o abajo (vertical).
`orientation`	`'horizontal' \| 'vertical'`	—	Orientación.
`showPattern`	`boolean`	—	Mostrar el patrón sinusoidal de Purity de fondo.