Componentes

Primer bloque

Contenido destacado principal

Ver más

Segundo bloque

Información complementaria

Tercer bloque

Detalles adicionales del grid

Variante
Estilo y layout
Items 3 / 3
Item 1
Item 2
Item 3
Configuración JSON
{
  "items": [
    {
      "imageUrl": "https://picsum.photos/seed/bento3-1/600/400",
      "title": "Primer bloque",
      "text": "Contenido destacado principal",
      "ctaText": "Ver más",
      "ctaHref": "#docs"
    },
    {
      "imageUrl": "https://picsum.photos/seed/bento3-2/600/400",
      "title": "Segundo bloque",
      "text": "Información complementaria"
    },
    {
      "imageUrl": "https://picsum.photos/seed/bento3-3/600/400",
      "title": "Tercer bloque",
      "text": "Detalles adicionales del grid"
    }
  ]
}

Bento Grid x3

BentoGridx3.vue

Grid bento de 3 celdas con 6 variantes de layout (A-H) 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.

bentogridlayoutcardsresponsive

Props

PropTipoDefaultDescripción
itemsBentoItem[]3 demo itemsArray de hasta 3 items con imagen, título, texto y CTA opcionales.
variantVariantName'A'Variante de layout del grid (A, B, C, D, E, H). Cada una define una distribución diferente de celdas.
gapstring'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).
borderRadiusstring'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: celda 1 tall (izq), celdas 2 y 3 apiladas (der)
B: celda 2 tall (der), celdas 1 y 3 apiladas (izq)
C: celda 1 wide (arriba), celdas 2 y 3 lado a lado (abajo)
D: celdas 1 y 2 lado a lado (arriba), celda 3 wide (abajo)
E: 3 columnas iguales en fila horizontal
H: celda 1 wide prominente (arriba 2/3), celdas 2 y 3 (abajo 1/3)

Notas

  • El grid usa CSS grid-template-areas para definir las 6 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 3 celdas: si se pasan menos items, rellena con objetos vacíos; si se pasan más, recorta a 3.
  • 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.

Ejemplo de uso

<BentoGridx3
  :items="[
    { imageUrl: '/img/hero.jpg', title: 'Destacado', text: 'Contenido principal', ctaText: 'Explorar', ctaHref: '/explorar' },
    { imageUrl: '/img/feature.jpg', title: 'Feature', text: 'Segundo bloque' },
    { imageUrl: '/img/detail.jpg', title: 'Detalle', text: 'Tercer bloque' },
  ]"
  variant="C"
  gap="1rem"
  card-style="overlay"
  border-radius="0.75rem"
/>