> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Bento Grid

> Bento-style grid layout for feature cards.

* **Location**: `sabo/src/components/ui/bento-grid.tsx`

<Frame>
  <div className="rounded-xl" style={{ overflow: "hidden", border: "1px solid #e5e7eb" }}>
    <iframe
      className="w-full"
      style={{ height: "220px" }}
      title="Bento Grid"
      loading="lazy"
      scrolling="no"
      srcDoc={`<!doctype html><html><head><meta charset='utf-8'/><meta name='viewport' content='width=device-width,initial-scale=1'/><style>
body{margin:0;background:#ffffff;font-family:ui-sans-serif}
.grid{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:10px;padding:26px 10px 10px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;height:90px;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.card:hover{transform:translateY(-3px) scale(1.015);box-shadow:0 10px 24px rgba(0,0,0,.08);border-color:#d1d5db}
.tall{grid-row:span 2;height:190px}
.title{position:absolute;top:8px;left:0;right:0;text-align:center;color:#111827;font-size:14px;font-weight:600;letter-spacing:.2px}
</style></head><body>
<div class='grid'>
  <div class='title'>Hover cards</div>
  <div class='card tall'></div>
  <div class='card'></div>
  <div class='card'></div>
</div>
</body></html>`}
    />
  </div>
</Frame>

<Info>
  By default Bento Grid is a layout pattern. Our implementation only adds light <code>:hover</code> transitions (no autoplay animation).
</Info>

## When to use

* Showcase features in an asymmetric grid with visual interest.
* Combine cards of different heights; add subtle hover motions only.

## Usage

```tsx sabo/src/components/ui/bento-grid.tsx theme={null}
import { BentoGrid, BentoCard } from "@/components/ui/bento-grid";
import { RocketIcon } from "@radix-ui/react-icons";

export function Example() {
  return (
    <BentoGrid className="grid-cols-2 auto-rows-[12rem]">
      <BentoCard
        name="Fast start"
        description="Spin up a project in minutes."
        href="#"
        cta="Learn more"
        Icon={RocketIcon}
        background={<div />}
        className="col-span-2"
      />
      <BentoCard
        name="Secure"
        description="Best practices baked in."
        href="#"
        cta="Docs"
        Icon={RocketIcon}
        background={<div />}
        className=""
      />
    </BentoGrid>
  );
}
```

## Key props

<ParamField path="BentoCard.name" type="string">
  Card title text.
</ParamField>

<ParamField path="BentoCard.description" type="string">
  Supporting copy below the title.
</ParamField>

<ParamField path="BentoCard.Icon" type="React.ElementType">
  Icon component displayed above the title.
</ParamField>

<ParamField path="BentoCard.background" type="ReactNode">
  Optional decorative background content.
</ParamField>

<ParamField path="BentoCard.href" type="string">
  Link destination for the card's call-to-action.
</ParamField>

<ParamField path="BentoCard.cta" type="string">
  Text for the call-to-action button.
</ParamField>

<ParamField path="BentoCard.className" type="string">
  Additional CSS classes to apply to the card (e.g., for spanning columns).
</ParamField>

## Styling tip

* Keep hover effects subtle; avoid autoplaying animations inside cards.
* Ensure link CTA remains visible and accessible on hover.
