Segundo bloque
Información complementaria
Tercer bloque
Detalles adicionales del grid
Cuarto bloque
Último elemento del bento
Configuración JSON
{
"items": [
{
"imageUrl": "https://picsum.photos/seed/bento4-1/600/400",
"title": "Primer bloque",
"text": "Contenido destacado principal",
"ctaText": "Ver más",
"ctaHref": "#docs"
},
{
"imageUrl": "https://picsum.photos/seed/bento4-2/600/400",
"title": "Segundo bloque",
"text": "Información complementaria"
},
{
"imageUrl": "https://picsum.photos/seed/bento4-3/600/400",
"title": "Tercer bloque",
"text": "Detalles adicionales del grid"
},
{
"imageUrl": "https://picsum.photos/seed/bento4-4/600/400",
"title": "Cuarto bloque",
"text": "Último elemento del bento"
}
]
}Bento Grid x4
BentoGridx4.vueGrid bento de 4 celdas con 7 variantes de layout (A, B, C, D, E, G, J) basadas en CSS grid-template-areas. Cada variante define una distribución diferente de celdas (tall, wide, normal) que se combina con el componente BentoCard para crear composiciones visuales atractivas. Incluye animación de entrada, responsive automático y soporte para imágenes, texto, CTAs y colores personalizables por celda.
Props
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
items | BentoItem[] | 4 demo items | Array de hasta 4 items con imagen, título, texto y CTA opcionales. |
variant | VariantName | 'A' | Variante de layout del grid (A, B, C, D, E, G, J). Cada una define una distribución diferente de celdas. |
gap | string | '1rem' | Espacio entre celdas del grid (valor CSS). |
cardStyle | 'overlay' | 'split' | 'side' | 'overlay' | Estilo visual de las cards: overlay (contenido sobre imagen), split (imagen arriba, contenido abajo) o side (imagen al lado). |
borderRadius | string | '0.75rem' | Border radius de cada celda/card. |
Interfaz BentoItem
interface BentoItem {
imageUrl?: string // URL de la imagen de fondo
title?: string // Título de la card
text?: string // Texto descriptivo
ctaText?: string // Texto del enlace CTA
ctaHref?: string // URL del CTA
ctaTarget?: '_self' | '_blank' // Target del enlace
titleColor?: string // Color del título (CSS)
textColor?: string // Color del texto (CSS)
ctaColor?: string // Color del CTA (CSS)
}Variantes de layout
A: 2x2 uniforme "a b" "c d"
B: 1 wide arriba + 3 abajo "a a a" "b c d"
C: 3 arriba + 1 wide abajo "a b c" "d d d"
D: 1 tall izq + 3 der "a b" "a c" "a d"
E: 3 izq + 1 tall der "a b" "c b" "d b"
G: 1 tall + 1 wide + 2 "a b b" "a c d"
J: 4 en fila horizontal "a b c d"Notas
- El grid usa CSS grid-template-areas para definir las 7 variantes de layout. Cada variante asigna una forma (tall, wide, normal) a cada celda.
- En responsive (tablet), el grid cambia a 2 columnas sin areas. En móvil, a 1 columna.
- El componente siempre renderiza exactamente 4 celdas: si se pasan menos items, rellena con objetos vacíos; si se pasan más, recorta a 4.
- La animación de entrada usa IntersectionObserver con delay escalonado por celda y respeta prefers-reduced-motion.
- El cardStyle "side" solo funciona en celdas wide; el "split" no funciona en celdas wide. En esos casos, BentoCard hace fallback a overlay.
- Las cards usan el componente BentoCard internamente, que soporta imagen con fallback SVG decorativo cuando no se proporciona URL.
- Variantes: A (2x2 uniforme), B (1 wide arriba + 3 abajo), C (3 arriba + 1 wide abajo), D (1 tall izq + 3 apiladas der), E (3 apiladas izq + 1 tall der), G (1 tall + 1 wide + 2 normal), J (4 en fila horizontal).
Ejemplo de uso
<BentoGridx4
:items="[
{ imageUrl: '/img/hero.jpg', title: 'Destacado', text: 'Contenido principal', ctaText: 'Explorar', ctaHref: '/explorar' },
{ imageUrl: '/img/feature1.jpg', title: 'Feature 1', text: 'Segundo bloque' },
{ imageUrl: '/img/feature2.jpg', title: 'Feature 2', text: 'Tercer bloque' },
{ imageUrl: '/img/detail.jpg', title: 'Detalle', text: 'Cuarto bloque' },
]"
variant="B"
gap="1rem"
card-style="overlay"
border-radius="0.75rem"
/>