Componentes
Layout
Items 7
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Configuración JSON
{
  "items": [
    {
      "imageUrl": "https://picsum.photos/seed/bento7-1/600/400",
      "title": "Primer bloque",
      "text": "Contenido destacado principal"
    },
    {
      "imageUrl": "https://picsum.photos/seed/bento7-2/600/400",
      "title": "Segundo bloque",
      "text": "Información complementaria"
    },
    {
      "imageUrl": "https://picsum.photos/seed/bento7-3/600/400",
      "title": "Tercer bloque",
      "text": "Detalles adicionales"
    },
    {
      "imageUrl": "https://picsum.photos/seed/bento7-4/600/400",
      "title": "Cuarto bloque",
      "text": "Más información relevante"
    },
    {
      "imageUrl": "https://picsum.photos/seed/bento7-5/600/400",
      "title": "Quinto bloque",
      "text": "Sección de métricas"
    },
    {
      "imageUrl": "https://picsum.photos/seed/bento7-6/600/400",
      "title": "Sexto bloque",
      "text": "Recursos destacados"
    },
    {
      "imageUrl": "https://picsum.photos/seed/bento7-7/600/400",
      "title": "Séptimo bloque",
      "text": "Cierre del grid"
    }
  ]
}

Bento Grid x7

BentoGridx7.vue

Grid bento de 7 celdas con 4 variantes de layout row-based. Cada variante distribuye las celdas en filas con diferentes proporciones (3+4, 4+3, 1+2+4, 3+1+3). Incluye animación de entrada escalonada, responsive automático y compatibilidad total con BentoCard.

bentogridlayoutresponsivetarjetas

Props

PropTipoDefaultDescripción
itemsBentoItem[][]Array de 7 items con imageUrl, title, text, ctaText, ctaHref y colores opcionales.
variantVariantName'3y4'Layout del grid: '3y4', '4y3', '1y2y4' o '3y1y3'.
gapstring'1rem'Espacio entre celdas (valor CSS).
cardStyle'overlay' | 'split' | 'side''overlay'Estilo visual de las tarjetas internas (BentoCard).
borderRadiusstring'0.75rem'Border radius de cada tarjeta.

Interfaz BentoItem

interface BentoItem {
  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 enlace CTA
  ctaTarget?: '_self' | '_blank'  // Target del enlace
  titleColor?: string     // Color del título
  textColor?: string      // Color del texto
  ctaColor?: string       // Color del CTA
}

Variantes de layout

type VariantName = '3y4' | '4y3' | '1y2y4' | '3y1y3'

// '3y4'   → Fila 1: 3 celdas  |  Fila 2: 4 celdas
// '4y3'   → Fila 1: 4 celdas  |  Fila 2: 3 celdas
// '1y2y4' → Fila 1: 1 celda (wide)  |  Fila 2: 2 celdas  |  Fila 3: 4 celdas
// '3y1y3' → Fila 1: 3 celdas  |  Fila 2: 1 celda (wide)  |  Fila 3: 3 celdas

Notas

  • El grid usa un layout row-based: cada fila es un grid independiente con N columnas iguales.
  • Las 4 variantes distribuyen 7 celdas en 2 o 3 filas con diferentes proporciones.
  • La variante 1y2y4 marca la primera celda como "wide" y 3y1y3 marca la celda central como "wide".
  • Responsive automático: a 1024px se reorganiza en 2 columnas, a 768px en 1 columna.
  • Animación de entrada escalonada con IntersectionObserver y stagger de 0.1s por celda.
  • Si se pasan menos de 7 items, se rellenan con celdas vacías (fallback SVG decorativo).
  • Compatible con BentoCard: soporta estilos overlay, split y side según el shape de la celda.

Ejemplo de uso

<BentoGridx7
  :items="[
    { imageUrl: '/img/hero.jpg', title: 'Destacado', text: 'Contenido principal' },
    { imageUrl: '/img/feature1.jpg', title: 'Feature 1' },
    { imageUrl: '/img/feature2.jpg', title: 'Feature 2' },
    { imageUrl: '/img/feature3.jpg', title: 'Feature 3' },
    { imageUrl: '/img/feature4.jpg', title: 'Feature 4' },
    { imageUrl: '/img/feature5.jpg', title: 'Feature 5' },
    { imageUrl: '/img/feature6.jpg', title: 'Feature 6' },
  ]"
  variant="1y2y4"
  gap="1rem"
  card-style="overlay"
  border-radius="0.75rem"
/>