Bento Section
Arrange related content in a responsive grid of varied cells.
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", span: "2x1" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Readable label for the component. |
title | ReactNode | — | Heading displayed in the component. |
description | string | — | Supporting text below the heading. |
cells (required) | BentoCell[] | — | Cells configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-section-py | Section py |
--s-content-max | Content max |
--s-page-margin | Page margin |
--s-radius-card | Radius card |
--s-border-muted | Border muted |
--s-surface | Surface |
--s-duration-fast | Duration fast |
--s-border | Border |
--s-text | Text |
--s-text-muted | Text muted |