Back to site

Bento Box

A grid layout where items can span multiple columns and rows.

Featured

Spans two columns for a wide, prominent placement.

Tall

Spans two rows, creating a vertical emphasis alongside smaller items.

Item 3

Item 4 

---
blocks:
  _component: building-blocks/wrappers/bento-box
  columns: 3
  minRowHeight: 180
  items:
    - colSpan: 2
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          backgroundColor: surface
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Featured
              level: h3
            - _component: building-blocks/core-elements/text
              text: Spans two columns for a wide, prominent placement.
    - colSpan: 1
      rowSpan: 2
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          backgroundColor: accent
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Tall
              level: h3
            - _component: building-blocks/core-elements/text
              text: Spans two rows, creating a vertical emphasis alongside smaller items.
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          backgroundColor: surface
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 3
              level: h3
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          backgroundColor: surface
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 4
              level: h3
  label: ''
  gap: md
---

Overview #

A grid layout where items can span multiple columns and rows, creating asymmetric, magazine-style arrangements. Supports configurable columns, spacing, and row height.

Properties #

label string

Optional label for the bento box to help identify it in the editor.

columns enum | default: 3

The number of columns in the bento grid.

Accepted values:
  • 2
  • 3
  • 4

minRowHeight number | default: 150

The minimum height for each row in pixels.

items array | default: array

Array of bento box items, each with configurable column and row spans.

Item Properties:

colSpan enum | default: 1

Number of columns this item spans.

Accepted values:
  • 1
  • 2
  • 3
  • 4

rowSpan enum | default: 1

Number of rows this item spans.

Accepted values:
  • 1
  • 2
  • 3
  • 4

contentSections array | default: array

Content sections to render within this bento box item.

gap enum | default: md

The gap between bento box items.

Accepted values:
  • none
  • xs
  • sm
  • md
  • lg
  • xl
  • 2xl
  • 3xl

Slots #

default

The contents for the Bento Box. Used only when the items property is not set.

Child Component:
<BentoBoxItem>
Properties (documented under the items property above):
  • contentSections/slot

Examples #

Columns #

Wide Item

This item spans the full width of a two-column bento layout.

Item 2

A half-width item in the two-column layout.

Item 3

Another half-width item alongside Item 2.

---
blocks:
  _component: building-blocks/wrappers/bento-box
  columns: 2
  minRowHeight: 200
  items:
    - colSpan: 2
      rowSpan: 1
      contentSections:
        - _component: building-blocks/core-elements/heading
          text: Wide Item
          level: h3
        - _component: building-blocks/core-elements/text
          text: This item spans the full width of a two-column bento layout.
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/core-elements/heading
          text: Item 2
          level: h3
        - _component: building-blocks/core-elements/text
          text: A half-width item in the two-column layout.
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/core-elements/heading
          text: Item 3
          level: h3
        - _component: building-blocks/core-elements/text
          text: Another half-width item alongside Item 2.
  label: ''
  gap: md
---

Featured Item

This item spans two columns in a three-column bento layout.

Item 2

A single-column item.

Item 3

Another single-column item.

Item 4

A third single-column item.

Item 5

Fills the remaining space in the row.

---
blocks:
  _component: building-blocks/wrappers/bento-box
  columns: 3
  minRowHeight: 200
  items:
    - colSpan: 2
      rowSpan: 1
      contentSections:
        - _component: building-blocks/core-elements/heading
          text: Featured Item
          level: h3
        - _component: building-blocks/core-elements/text
          text: This item spans two columns in a three-column bento layout.
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/core-elements/heading
          text: Item 2
          level: h3
        - _component: building-blocks/core-elements/text
          text: A single-column item.
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/core-elements/heading
          text: Item 3
          level: h3
        - _component: building-blocks/core-elements/text
          text: Another single-column item.
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/core-elements/heading
          text: Item 4
          level: h3
        - _component: building-blocks/core-elements/text
          text: A third single-column item.
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/core-elements/heading
          text: Item 5
          level: h3
        - _component: building-blocks/core-elements/text
          text: Fills the remaining space in the row.
  label: ''
  gap: md
---

Wide Item

This item spans two columns in a four-column bento layout.

Item 2

A single-column item.

Item 3

Another single-column item.

Item 4

A compact item.

Item 5

Another compact item.

Bottom Wide Item

A wide item at the bottom of the bento layout.

---
blocks:
  _component: building-blocks/wrappers/bento-box
  columns: 4
  minRowHeight: 180
  items:
    - colSpan: 2
      rowSpan: 1
      contentSections:
        - _component: building-blocks/core-elements/heading
          text: Wide Item
          level: h3
        - _component: building-blocks/core-elements/text
          text: This item spans two columns in a four-column bento layout.
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/core-elements/heading
          text: Item 2
          level: h3
        - _component: building-blocks/core-elements/text
          text: A single-column item.
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/core-elements/heading
          text: Item 3
          level: h3
        - _component: building-blocks/core-elements/text
          text: Another single-column item.
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/core-elements/heading
          text: Item 4
          level: h3
        - _component: building-blocks/core-elements/text
          text: A compact item.
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/core-elements/heading
          text: Item 5
          level: h3
        - _component: building-blocks/core-elements/text
          text: Another compact item.
    - colSpan: 2
      rowSpan: 1
      contentSections:
        - _component: building-blocks/core-elements/heading
          text: Bottom Wide Item
          level: h3
        - _component: building-blocks/core-elements/text
          text: A wide item at the bottom of the bento layout.
  label: ''
  gap: md
---

Row Spanning #

2 Rows

This item spans two rows on the left side.

Top Middle

3 Rows

This item spans three full rows on the right side of the grid.

Bottom Middle

Below Left

Below Middle 

---
blocks:
  _component: building-blocks/wrappers/bento-box
  columns: 3
  minRowHeight: 150
  items:
    - colSpan: 1
      rowSpan: 2
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          backgroundColor: accent
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: 2 Rows
              level: h3
            - _component: building-blocks/core-elements/text
              text: This item spans two rows on the left side.
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          backgroundColor: surface
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Top Middle
              level: h3
    - colSpan: 1
      rowSpan: 3
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          backgroundColor: highlight
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: 3 Rows
              level: h3
            - _component: building-blocks/core-elements/text
              text: This item spans three full rows on the right side of the grid.
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          backgroundColor: surface
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Bottom Middle
              level: h3
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          backgroundColor: surface
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Below Left
              level: h3
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          backgroundColor: surface
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Below Middle
              level: h3
  label: ''
  gap: md
---

Spacing #

Wide Item

Extra small spacing creates a tight, compact layout.

Item 2

Item 3

Item 4

Item 5 

---
blocks:
  _component: building-blocks/wrappers/bento-box
  columns: 3
  gap: xs
  minRowHeight: 150
  items:
    - colSpan: 2
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Wide Item
              level: h3
            - _component: building-blocks/core-elements/text
              text: Extra small spacing creates a tight, compact layout.
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 2
              level: h3
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 3
              level: h3
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 4
              level: h3
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 5
              level: h3
  label: ''
---

Wide Item

Small spacing provides a slightly tighter layout.

Item 2

Item 3

Item 4

Item 5 

---
blocks:
  _component: building-blocks/wrappers/bento-box
  columns: 3
  gap: sm
  minRowHeight: 150
  items:
    - colSpan: 2
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Wide Item
              level: h3
            - _component: building-blocks/core-elements/text
              text: Small spacing provides a slightly tighter layout.
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 2
              level: h3
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 3
              level: h3
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 4
              level: h3
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 5
              level: h3
  label: ''
---

Wide Item

Medium spacing is the default option.

Item 2

Item 3

Item 4

Item 5 

---
blocks:
  _component: building-blocks/wrappers/bento-box
  columns: 3
  gap: md
  minRowHeight: 150
  items:
    - colSpan: 2
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Wide Item
              level: h3
            - _component: building-blocks/core-elements/text
              text: Medium spacing is the default option.
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 2
              level: h3
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 3
              level: h3
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 4
              level: h3
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 5
              level: h3
  label: ''
---

Wide Item

Large spacing provides generous breathing room.

Item 2

Item 3

Item 4

Item 5 

---
blocks:
  _component: building-blocks/wrappers/bento-box
  columns: 3
  gap: lg
  minRowHeight: 150
  items:
    - colSpan: 2
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Wide Item
              level: h3
            - _component: building-blocks/core-elements/text
              text: Large spacing provides generous breathing room.
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 2
              level: h3
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 3
              level: h3
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 4
              level: h3
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 5
              level: h3
  label: ''
---

Wide Item

Extra large spacing creates a spacious layout.

Item 2

Item 3

Item 4

Item 5 

---
blocks:
  _component: building-blocks/wrappers/bento-box
  columns: 3
  gap: xl
  minRowHeight: 150
  items:
    - colSpan: 2
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Wide Item
              level: h3
            - _component: building-blocks/core-elements/text
              text: Extra large spacing creates a spacious layout.
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 2
              level: h3
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 3
              level: h3
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 4
              level: h3
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 5
              level: h3
  label: ''
---

Wide Item

2xl spacing for very open layouts.

Item 2

Item 3

Item 4

Item 5 

---
blocks:
  _component: building-blocks/wrappers/bento-box
  columns: 3
  gap: 2xl
  minRowHeight: 150
  items:
    - colSpan: 2
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Wide Item
              level: h3
            - _component: building-blocks/core-elements/text
              text: 2xl spacing for very open layouts.
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 2
              level: h3
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 3
              level: h3
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 4
              level: h3
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 5
              level: h3
  label: ''
---

Wide Item

3xl spacing for maximum separation between items.

Item 2

Item 3

Item 4

Item 5 

---
blocks:
  _component: building-blocks/wrappers/bento-box
  columns: 3
  gap: 3xl
  minRowHeight: 150
  items:
    - colSpan: 2
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Wide Item
              level: h3
            - _component: building-blocks/core-elements/text
              text: 3xl spacing for maximum separation between items.
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 2
              level: h3
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 3
              level: h3
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 4
              level: h3
    - colSpan: 1
      rowSpan: 1
      contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 5
              level: h3
  label: ''
---