Bento Grid

The LandingBentoGridSection component is a flexible container for creating visually appealing grid layouts for landing pages. It provides a grid layout with customizable columns and rows, and can be used to display a variety of content types.

It can contain generic items or specialized Bento Grid items as children. These specialized items extend the basic bento grid with pre-designed layouts for displaying tech specs, feature highlights, and product information.

Processor Specifications

Technical details of our latest chipset

High-speed I/O

Up to

20%

faster CPU

Data-center-class

performance per watt

Up to

30%

faster GPU

Up to

1 TB

DDR5 memory

Over

60 billion

transistors

16-core

300 TOPS

40%

faster AI processing

Dedicated

🎬

media engine

Advanced

5 nm

process technology

800 GB/s

Memory bandwidth

Usage

import {
  LandingBentoGridSection,
  LandingBentoGridIconItem,
  LandingBentoGridNumberItem,
  LandingBentoGridImageItem,
} from '@/components/landing/bento-grid';

<LandingBentoGridSection
  title="Processor Specifications"
  description="Technical details of our latest chipset"
>
  <LandingBentoGridIconItem
    icon={<SparklesIcon className="w-12 h-12" />}
    bottomText="High-speed I/O"
  />
  <LandingBentoGridNumberItem
    topText="Up to"
    number="20%"
    bottomText="faster CPU"
  />
  <LandingBentoGridImageItem
    topText="Data-center-class"
    imageSrc="/static/images/backdrop-1.webp"
    imageAlt="Data-center-class"
    bottomText="performance per watt"
    colSpan={2}
    rowSpan={2}
  />

  {/* more items */}
</LandingBentoGridSection>

Examples

Icon-based Grid Items

Technical Specifications

Cutting-edge technology in every component

High-speed I/O

Dedicated

media engine

Advanced

process technology

More power

More battery

Number-based Grid Items

Performance Metrics

Benchmark results for our latest generation

Up to

20%

faster CPU

Up to

30%

faster GPU

Over

60 billion

transistors

Up to

800 GB/s

Memory bandwidth

Image-based Grid Items

Product Gallery

Our latest innovations in images

Next-generation display

Pro Camera

128MP

Redesigned

Architecture

API Reference

LandingBentoGridSection Props

Prop Name	Prop Type	Required	Default
title	`string`	No	-
titleComponent	`React.ReactNode`	No	-
description	`string`	No	-
descriptionComponent	`React.ReactNode`	No	-
items	`BentoGridItem[]`	No	`[]`
children	`React.ReactNode`	No	-
className	`string`	No	`''`
gridClassName	`string`	No	`''`
withBackground	`boolean`	No	`false`
withBackgroundGlow	`boolean`	No	`false`
backgroundGlowVariant	`'primary' \| 'secondary'`	No	`'primary'`
variant	`'default' \| 'primary' \| 'secondary'`	No	`'default'`
textPosition	`'center' \| 'left'`	No	`'center'`

Note: When a variant is set on the section, child items will automatically inherit styling creating a cohesive visual theme.

LandingBentoGridIconItem Props

Prop Name	Prop Type	Required	Default
variant	`'default' \| 'primary' \| 'secondary'`	No	`'default'`
topText	`string`	No	-
topTextComponent	`React.ReactNode`	No	-
icon	`React.ReactNode`	No	-
bottomText	`string`	No	-
bottomTextComponent	`React.ReactNode`	No	-
colSpan	`1 \| 2 \| 3 \| 4`	No	`1`
rowSpan	`1 \| 2 \| 3`	No	`1`
className	`string`	No	`''`
href	`string`	No	-

LandingBentoGridNumberItem Props

Prop Name	Prop Type	Required	Default
variant	`'default' \| 'primary' \| 'secondary'`	No	`'default'`
topText	`string`	No	-
topTextComponent	`React.ReactNode`	No	-
number	`string \| number`	No	-
bottomText	`string`	No	-
bottomTextComponent	`React.ReactNode`	No	-
colSpan	`1 \| 2 \| 3 \| 4`	No	`1`
rowSpan	`1 \| 2 \| 3`	No	`1`
className	`string`	No	`''`
href	`string`	No	-

LandingBentoGridImageItem Props

Prop Name	Prop Type	Required	Default
variant	`'default' \| 'primary' \| 'secondary'`	No	`'default'`
topText	`string`	No	-
topTextComponent	`React.ReactNode`	No	-
imageSrc	`string`	No	-
imageAlt	`string`	No	`''`
imageComponent	`React.ReactNode`	No	-
imageFill	`boolean`	No	`true`
imageHeight	`number`	No	`100`
imageWidth	`number`	No	`100`
bottomText	`string`	No	-
bottomTextComponent	`React.ReactNode`	No	-
colSpan	`1 \| 2 \| 3 \| 4`	No	`1`
rowSpan	`1 \| 2 \| 3`	No	`1`
className	`string`	No	`''`
href	`string`	No	-

More Examples

For more even more examples, see our Landing Page Component Examples page or see complete landing page examples by Exploring Our Landing Page Templates.

Also see:

Product Features Grid component