flat-card

borrador

Una tarjeta informativa plana sin dependencias (conmutador Alpine) con icono, título, cuerpo y área de acción.

Tipo: alpine copia

Configuración y uso (desde ABOUT.md)

Tarjeta plana

Un elemento de tarjeta ligero: encabezado con icono + título (toque para mostrar u ocultar el cuerpo) y un pie de tarjeta opcional. Escrito con Alpine.js para el comportamiento de expandir/contraer — sin ningún otro JS.

Configuración

Listo para pegar: no requiere instalar ningún paquete. Tome el marcado renderizado de la vista previa en resources/views/prototypes/flat-card.blade.php y colóquelo en un componente Blade (según copy-to), o pegue el HTML interno directamente en cualquier plantilla.

Esto depende de Alpine.js, por lo que debe estar cargado en la aplicación anfitriona — consulte Advertencias para conocer el plugin exacto.

Advertencias

Solo Tailwind v4.
La directiva x-collapse necesita el plugin @alpinejs/collapse — Alpine solo no animará la expansión.
Se convierte en un componente x-cards.flat-card con props (icon, title, footer) cuando se promueva.

Vista previa

Una tarjeta plana sin dependencias. Toque el encabezado para expandir o contraer el cuerpo. Péguela en cualquier plantilla que tenga Alpine.js cargado y x-collapse disponible: no requiere instalar ningún paquete.

Conviértala en un paquete cuando se reutilice en 3 o más aplicaciones.