Card
Un componente de tarjeta interactivo con soporte para animaciones, imágenes y diferentes estilos.
Cargando...
import { Card } from "stofli-ui";Cargando...
Una tarjeta simple con título y descripción.
Cargando...
Cargando...
Tarjeta con una imagen en la parte superior que se anima al pasar el cursor.
Cargando...
Cargando...
Tarjeta con imagen de fondo que cambia a un GIF al pasar el cursor.
Cargando...
Cargando...
Card con avatar del autor e información adicional, ideal para blogs y artículos.
Cargando...
Cargando...
Tarjeta con contenido en la cabecera y pie, usando un diseño monocromático que se adapta a ambos temas.
Cargando...
Cargando...
Crea una tarjeta de producto con opciones de compra personalizada usando Tailwind CSS y componentes de la biblioteca.
Cargando...
Cargando...
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
title | string | - | Título de la tarjeta |
description | string | - | Descripción de la tarjeta |
children | React.ReactNode | - | Contenido personalizado |
className | string | - | Clases adicionales |
imageClassName | string | - | Clases para la imagen |
contentClassName | string | - | Clases para el contenedor del contenido |
titleClassName | string | - | Clases para el título |
descriptionClassName | string | - | Clases para la descripción |
headerClassName | string | - | Clases para la cabecera |
footerClassName | string | - | Clases para el pie |
variant | "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "default" | Variante de estilo |
radius | "none" | "sm" | "md" | "full" | "md" | Radio de las esquinas |
hover | "none" | "lift" | "glow" | "scale" | "none" | Efecto al pasar el cursor |
animation | "none" | "fade" | "slide" | "bounce" | "none" | Animación al montar el componente |
interactive | boolean | false | Habilita interacción con la tarjeta |
header | React.ReactNode | - | Contenido de la cabecera |
footer | React.ReactNode | - | Contenido del pie |
image | string | - | URL de la imagen |
loading | "eager" | "lazy" | "lazy" | Estrategia de carga de imagen |
ariaLabel | string | - | Etiqueta ARIA para la tarjeta |
imageAlt | string | - | Texto alternativo para la imagen |
onClick | () => void | - | Función llamada al hacer clic |
onKeyDown | (e: React.KeyboardEvent) => void | - | Función para eventos de teclado |
role | string | "article" | Rol ARIA para la tarjeta |