Bento Grid

The BentoGrid provides a trendy, asymmetric layout inspired by bento boxes. It is perfect for showcasing features, portfolio items, or services in a visually engaging way.

Usage

import BentoGrid from '~/components/sections/BentoGrid.astro';
import BentoItem from '~/components/ui/BentoItem.astro';
import { Globe, Cpu } from 'lucide-react';

<BentoGrid title="My Features" description="Check out these cool things.">
  
  <BentoItem class="md:col-span-2">
    <Globe />
    <h3>Global Reach</h3>
  </BentoItem>

  <BentoItem class="md:row-span-2">
    <Cpu />
    <h3>High Performance</h3>
  </BentoItem>

</BentoGrid>

Example

Props

BentoGrid

Prop	Type	Description
title	string	The section heading.
description	string	A short description text.

BentoItem

Prop	Type	Default	Description
class	string	undefined	styled-class for grid positioning (e.g. col-span-2, row-span-2).