# `PhiaUi.Components.Bento`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/surface/bento.ex#L1)

Bento grid components for PhiaUI — 4 components for Apple-style modular
grid layouts with varying cell spans.

## Components
- `bento_grid/1` — CSS grid container (3, 4, or 6 columns)
- `bento_item/1` — grid cell with col/row span and variant styles
- `bento_header/1` — structured header with icon, title, subtitle slots
- `bento_badge/1` — positioned badge overlay for bento items

# `bento_badge`

Positioned badge overlay for bento items. Must be inside a `relative` parent.

## Examples

    <div class="relative">
      <.bento_badge position="top-right" variant="primary">New</.bento_badge>
    </div>

## Attributes

* `position` (`:string`) - Defaults to `"top-right"`. Must be one of `"top-left"`, `"top-right"`, `"bottom-left"`, or `"bottom-right"`.
* `variant` (`:atom`) - Defaults to `:default`. Must be one of `:default`, `:primary`, `:success`, `:warning`, or `:destructive`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `bento_grid`

Apple-style bento grid container.

## Examples

    <.bento_grid cols="3" gap="md">
      <.bento_item span_col="2">Wide item</.bento_item>
      <.bento_item>Narrow item</.bento_item>
    </.bento_grid>

## Attributes

* `cols` (`:string`) - Defaults to `"3"`. Must be one of `"3"`, `"4"`, or `"6"`.
* `gap` (`:string`) - Defaults to `"md"`. Must be one of `"sm"`, `"md"`, or `"lg"`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `bento_header`

Structured bento cell header with icon, title, and subtitle slots.

## Examples

    <.bento_header>
      <:icon><.icon name="hero-star" class="size-5" /></:icon>
      <:title>Feature Name</:title>
      <:subtitle>Short description</:subtitle>
    </.bento_header>

## Attributes

* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block`
* `icon`
* `title`
* `subtitle`

# `bento_item`

Bento grid cell with configurable column/row span and visual variants.

## Examples

    <.bento_item span_col="2" span_row="2" variant="glass">
      <:header>
        <.bento_header>
          <:title>Big Feature</:title>
        </.bento_header>
      </:header>
      Content
    </.bento_item>

## Attributes

* `span_col` (`:string`) - Defaults to `"1"`. Must be one of `"1"`, `"2"`, or `"3"`.
* `span_row` (`:string`) - Defaults to `"1"`. Must be one of `"1"`, or `"2"`.
* `variant` (`:atom`) - Defaults to `:default`. Must be one of `:default`, `:glass`, `:gradient`, `:outlined`, or `:dark`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)
* `header`

---

*Consult [api-reference.md](api-reference.md) for complete listing*