Bento Section
Bento grid layout with configurable cell spans for feature showcases.
Preview
Import
import { BentoSection } from "@sigil-ui/components";Usage
<BentoSection
label="Platform"
title="Everything in one place"
cells={[
{ title: "Analytics", description: "Real-time insights", span: "2x1" },
{ title: "Security", description: "Enterprise-grade", span: "1x1" },
{ title: "API", description: "REST and GraphQL", span: "1x1" },
{ title: "Dashboard", description: "Custom views", content: <DashboardPreview />, span: "2x2" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Uppercase mono label |
title | ReactNode | — | Section heading (omit to hide) |
description | string | — | Supporting text |
cells | BentoCell[] | required | Array of { title?, description?, content?, span?, className? } |
className | string | — | Additional CSS classes |
span accepts "1x1", "2x1", "1x2", or "2x2". Default is "1x1". The grid uses 3 columns on desktop.
Plus all standard <section> HTML attributes.