Shipixen Logo

Bento Grid

Updated on

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
Data-center-class
performance per watt
Up to
30%
faster GPU
Up to
1 TB
DDR5 memory
Over
60 billion
transistors
16-core
AI Accelerator
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 NameProp TypeRequiredDefault 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 NameProp TypeRequiredDefault 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 NameProp TypeRequiredDefault 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 NameProp TypeRequiredDefault 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: