Componentes

Analítica

Métricas en tiempo real

Integraciones

Conecta con tus herramientas

Seguridad

Protección avanzada

Rendimiento

Optimizado al máximo

Soporte

Equipo 24/7

Escalabilidad

Crece sin límites

Layout
Items 6
Celda 1
Celda 2
Celda 3
Celda 4
Celda 5
Celda 6
Configuración JSON
{
  "items": [
    {
      "imageUrl": "https://picsum.photos/seed/bento6a/600/400",
      "title": "Analítica",
      "text": "Métricas en tiempo real"
    },
    {
      "imageUrl": "https://picsum.photos/seed/bento6b/600/400",
      "title": "Integraciones",
      "text": "Conecta con tus herramientas"
    },
    {
      "imageUrl": "https://picsum.photos/seed/bento6c/600/400",
      "title": "Seguridad",
      "text": "Protección avanzada"
    },
    {
      "imageUrl": "https://picsum.photos/seed/bento6d/600/400",
      "title": "Rendimiento",
      "text": "Optimizado al máximo"
    },
    {
      "imageUrl": "https://picsum.photos/seed/bento6e/600/400",
      "title": "Soporte",
      "text": "Equipo 24/7"
    },
    {
      "imageUrl": "https://picsum.photos/seed/bento6f/600/400",
      "title": "Escalabilidad",
      "text": "Crece sin límites"
    }
  ]
}

Bento Grid x6

BentoGridx6.vue

Grid tipo bento con 6 celdas y 6 variantes de layout (3 simétricas, 2 asimétricas por filas y 1 con grid-template-areas). Usa BentoCard internamente para cada celda con soporte para imágenes, títulos, textos y CTAs. Responsive: colapsa a columna en móvil.

bentogridlayoutcardsresponsive

Props

PropTipoDefaultDescripción
itemsBentoItem[][]Array de hasta 6 items con imageUrl, title, text, ctaText, ctaHref y colores opcionales.
variantVariantKey'3y3'Variante de layout. Opciones: 3y3, 2y4, 4y2, 1y2y3, 3y2y1, 1tall-1wide-2x2.
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 cards: overlay (imagen de fondo), split (imagen arriba, texto abajo) o side (imagen lateral).

Interfaz BentoItem

interface BentoItem {
  imageUrl?: string       // URL de la imagen de fondo
  title?: string          // Título de la celda
  text?: string           // Texto descriptivo
  ctaText?: string        // Texto del enlace CTA
  ctaHref?: string        // URL del enlace CTA
  ctaTarget?: '_self' | '_blank'
  titleColor?: string     // Color del título (default: #ffffff)
  textColor?: string      // Color del texto (default: rgba(255,255,255,0.7))
  ctaColor?: string       // Color del CTA (default: #93c5fd)
}

Variantes disponibles

type VariantKey =
  | '3y3'              // 3 celdas + 3 celdas (filas)
  | '2y4'              // 2 celdas + 4 celdas (filas)
  | '4y2'              // 4 celdas + 2 celdas (filas)
  | '1y2y3'            // 1 wide + 2 + 3 (filas)
  | '3y2y1'            // 3 + 2 + 1 wide (filas)
  | '1tall-1wide-2x2'  // 1 tall lateral + 1 wide + 2x2 grid (areas)

Notas

  • El componente usa BentoCard internamente para cada celda, con soporte para imágenes, títulos, textos y CTAs.
  • Las variantes de tipo "rows" generan filas flex con distribución uniforme.
  • La variante "1tall-1wide-2x2" usa CSS grid-template-areas para un layout asimétrico.
  • En móvil (< 48rem) todas las variantes colapsan a una sola columna.
  • Si se pasan menos de 6 items, las celdas restantes muestran el fallback SVG decorativo.
  • El cardStyle "side" solo funciona en celdas "wide"; el resto hace fallback a "overlay".

Ejemplo de uso

<BentoGridx6
  :items="[
    { imageUrl: '/img/analítica.jpg', title: 'Analítica', text: 'Métricas en tiempo real' },
    { imageUrl: '/img/integraciones.jpg', title: 'Integraciones' },
    { imageUrl: '/img/seguridad.jpg', title: 'Seguridad', ctaText: 'Saber más', ctaHref: '#' },
    { imageUrl: '/img/rendimiento.jpg', title: 'Rendimiento' },
    { imageUrl: '/img/soporte.jpg', title: 'Soporte' },
    { imageUrl: '/img/escala.jpg', title: 'Escalabilidad' },
  ]"
  variant="1tall-1wide-2x2"
  gap="0.75rem"
  border-radius="0.75rem"
  card-style="overlay"
/>