Componentes
Layout
Items 8
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Configuración JSON
{
  "items": [
    {
      "imageUrl": "https://picsum.photos/seed/bx8-1/600/400",
      "title": "Dashboard",
      "text": "Panel de métricas en tiempo real"
    },
    {
      "imageUrl": "https://picsum.photos/seed/bx8-2/600/400",
      "title": "Analytics",
      "text": "Visualización de datos avanzada"
    },
    {
      "imageUrl": "https://picsum.photos/seed/bx8-3/600/400",
      "title": "Reportes",
      "text": "Informes automatizados mensuales"
    },
    {
      "imageUrl": "https://picsum.photos/seed/bx8-4/600/400",
      "title": "Usuarios",
      "text": "Gestión de perfiles y permisos"
    },
    {
      "imageUrl": "https://picsum.photos/seed/bx8-5/600/400",
      "title": "Integración",
      "text": "Conexión con servicios externos"
    },
    {
      "imageUrl": "https://picsum.photos/seed/bx8-6/600/400",
      "title": "Seguridad",
      "text": "Cifrado y autenticación robusta"
    },
    {
      "imageUrl": "https://picsum.photos/seed/bx8-7/600/400",
      "title": "API",
      "text": "Documentación y endpoints REST"
    },
    {
      "imageUrl": "https://picsum.photos/seed/bx8-8/600/400",
      "title": "Soporte",
      "text": "Atención personalizada 24/7"
    }
  ]
}

Bento Grid x8

BentoGridx8.vue

Grid tipo bento con 8 celdas y 11 variantes de layout, todas basadas en filas. Cada variante define cuántas celdas van en cada fila, con soporte para celdas wide (fila completa). Incluye animación de entrada escalonada, responsive automático (2 columnas en tablet, 1 en móvil) y tarjetas BentoCard configurables.

bentogridlayoutresponsivetarjetas

Props

PropTipoDefaultDescripción
variantVariantName'4y4'Variante de layout. Define la distribución de celdas en filas.
itemsBentoGridItem[][]Array de items con imageUrl, title, text, ctaText, ctaHref, colores, etc.
gapstring'0.75rem'Espacio entre celdas (valor CSS).
borderRadiusstring'0.75rem'Border radius de cada celda.
cardStyle'overlay' | 'split' | 'side''overlay'Estilo visual de las tarjetas internas (BentoCard).
animateEntrybooleantrueActiva animación fade-in escalonada al entrar en el viewport.

Variantes disponibles

// Todas las variantes son row-based: definen celdas por fila
'4y4'       // 4 + 4
'2y2y2y2'   // 2 + 2 + 2 + 2
'3y3y2'     // 3 + 3 + 2
'2y3y3'     // 2 + 3 + 3
'1y3y4'     // 1 (wide) + 3 + 4
'4y3y1'     // 4 + 3 + 1 (wide)
'2y4y2'     // 2 + 4 + 2
'4y1y3'     // 4 + 1 (wide) + 3
'3y1y4'     // 3 + 1 (wide) + 4
'1y2y3y2'   // 1 (wide) + 2 + 3 + 2
'2y3y2y1'   // 2 + 3 + 2 + 1 (wide)

Interfaz BentoGridItem

interface BentoGridItem {
  imageUrl?: string      // URL de la imagen de fondo
  title?: string         // Título de la tarjeta
  text?: string          // Texto descriptivo
  ctaText?: string       // Texto del enlace CTA
  ctaHref?: string       // URL del CTA
  ctaTarget?: '_self' | '_blank'
  titleColor?: string    // Color del título
  textColor?: string     // Color del texto
  ctaColor?: string      // Color del CTA
}

Notas

  • Las 11 variantes son todas row-based: cada una define cuántas celdas van en cada fila.
  • Las celdas con shape "wide" ocupan todo el ancho de su fila (1 celda en la fila).
  • En tablet (<=64rem) se colapsa a 2 columnas; en móvil (<=48rem) a 1 columna.
  • El responsive se detecta con matchMedia para evitar conflictos con CSS grid areas.
  • Se renderizan exactamente 8 celdas: si se pasan menos items, se rellenan con celdas vacías (fallback SVG).
  • La animación de entrada usa IntersectionObserver con stagger de 0.1s por celda.
  • Cada tarjeta usa BentoCard internamente: soporta overlay, split y side según el cardStyle y cellShape.

Ejemplo de uso

<BentoGridx8
  variant="1y3y4"
  :items="[
    { imageUrl: '/img/hero.jpg', title: 'Destacado', text: 'Celda wide' },
    { imageUrl: '/img/a.jpg', title: 'Alpha' },
    { imageUrl: '/img/b.jpg', title: 'Beta' },
    { imageUrl: '/img/c.jpg', title: 'Gamma' },
    { imageUrl: '/img/d.jpg', title: 'Delta' },
    { imageUrl: '/img/e.jpg', title: 'Epsilon' },
    { imageUrl: '/img/f.jpg', title: 'Zeta' },
    { imageUrl: '/img/g.jpg', title: 'Eta' },
  ]"
  gap="0.75rem"
  border-radius="0.75rem"
  card-style="overlay"
  :animate-entry="true"
/>