flat-card

draft

A dependency-free flat info card (Alpine toggle) with icon, title, body, and action area.

Tipo: alpine copy

Configuración y uso (desde ABOUT.md)

Flat Card

A lightweight card element: icon + title header (tap to toggle the body), and an optional footer. Written with Alpine.js for the expand/collapse behavior — no other JS.

Setup

Paste-and-go: no package install required. Take the rendered markup from the preview at resources/views/prototypes/flat-card.blade.php and drop it into a Blade component (per copy-to), or paste the inner HTML straight into any template.

This depends on Alpine.js, so it must be loaded in the host app — see Gotchas for the exact plugin.

Gotchas

Tailwind v4 only.
The x-collapse directive needs the @alpinejs/collapse plugin — plain Alpine alone won't animate the expand.
Converted to a x-cards.flat-card component with props (icon, title, footer) when promoted.

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.