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 

---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import BentoBox from "@wrappers/bento-box/BentoBox.astro";
import BentoBoxItem from "@wrappers/bento-box/BentoBoxItem.astro";
import Card from "@wrappers/card/Card.astro";
---

<BentoBox columns={3} gap="md" label="" minRowHeight={180}>
  <BentoBoxItem colSpan={2} rowSpan={1}>
    <Card backgroundColor="surface" paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Featured
      </Heading>
      <Text>
        <p>Spans two columns for a wide, prominent placement.</p>
      </Text>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={2}>
    <Card backgroundColor="accent" paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Tall
      </Heading>
      <Text>
        <p>Spans two rows, creating a vertical emphasis alongside smaller items.</p>
      </Text>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card backgroundColor="surface" paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 3
      </Heading>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card backgroundColor="surface" paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 4
      </Heading>
    </Card>
  </BentoBoxItem>
</BentoBox>
---
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:
  • 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.

---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import BentoBox from "@wrappers/bento-box/BentoBox.astro";
import BentoBoxItem from "@wrappers/bento-box/BentoBoxItem.astro";
---

<BentoBox columns={2} gap="md" label="" minRowHeight={200}>
  <BentoBoxItem colSpan={2} rowSpan={1}>
    <Heading level="h3">
      Wide Item
    </Heading>
    <Text>
      <p>This item spans the full width of a two-column bento layout.</p>
    </Text>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Heading level="h3">
      Item 2
    </Heading>
    <Text>
      <p>A half-width item in the two-column layout.</p>
    </Text>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Heading level="h3">
      Item 3
    </Heading>
    <Text>
      <p>Another half-width item alongside Item 2.</p>
    </Text>
  </BentoBoxItem>
</BentoBox>
---
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.

---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import BentoBox from "@wrappers/bento-box/BentoBox.astro";
import BentoBoxItem from "@wrappers/bento-box/BentoBoxItem.astro";
---

<BentoBox columns={3} gap="md" label="" minRowHeight={200}>
  <BentoBoxItem colSpan={2} rowSpan={1}>
    <Heading level="h3">
      Featured Item
    </Heading>
    <Text>
      <p>This item spans two columns in a three-column bento layout.</p>
    </Text>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Heading level="h3">
      Item 2
    </Heading>
    <Text>
      <p>A single-column item.</p>
    </Text>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Heading level="h3">
      Item 3
    </Heading>
    <Text>
      <p>Another single-column item.</p>
    </Text>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Heading level="h3">
      Item 4
    </Heading>
    <Text>
      <p>A third single-column item.</p>
    </Text>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Heading level="h3">
      Item 5
    </Heading>
    <Text>
      <p>Fills the remaining space in the row.</p>
    </Text>
  </BentoBoxItem>
</BentoBox>
---
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.

---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import BentoBox from "@wrappers/bento-box/BentoBox.astro";
import BentoBoxItem from "@wrappers/bento-box/BentoBoxItem.astro";
---

<BentoBox columns={4} gap="md" label="" minRowHeight={180}>
  <BentoBoxItem colSpan={2} rowSpan={1}>
    <Heading level="h3">
      Wide Item
    </Heading>
    <Text>
      <p>This item spans two columns in a four-column bento layout.</p>
    </Text>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Heading level="h3">
      Item 2
    </Heading>
    <Text>
      <p>A single-column item.</p>
    </Text>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Heading level="h3">
      Item 3
    </Heading>
    <Text>
      <p>Another single-column item.</p>
    </Text>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Heading level="h3">
      Item 4
    </Heading>
    <Text>
      <p>A compact item.</p>
    </Text>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Heading level="h3">
      Item 5
    </Heading>
    <Text>
      <p>Another compact item.</p>
    </Text>
  </BentoBoxItem>
  <BentoBoxItem colSpan={2} rowSpan={1}>
    <Heading level="h3">
      Bottom Wide Item
    </Heading>
    <Text>
      <p>A wide item at the bottom of the bento layout.</p>
    </Text>
  </BentoBoxItem>
</BentoBox>
---
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 

---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import BentoBox from "@wrappers/bento-box/BentoBox.astro";
import BentoBoxItem from "@wrappers/bento-box/BentoBoxItem.astro";
import Card from "@wrappers/card/Card.astro";
---

<BentoBox columns={3} gap="md" label="" minRowHeight={150}>
  <BentoBoxItem colSpan={1} rowSpan={2}>
    <Card backgroundColor="accent" paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        2 Rows
      </Heading>
      <Text>
        <p>This item spans two rows on the left side.</p>
      </Text>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card backgroundColor="surface" paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Top Middle
      </Heading>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={3}>
    <Card backgroundColor="highlight" paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        3 Rows
      </Heading>
      <Text>
        <p>This item spans three full rows on the right side of the grid.</p>
      </Text>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card backgroundColor="surface" paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Bottom Middle
      </Heading>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card backgroundColor="surface" paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Below Left
      </Heading>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card backgroundColor="surface" paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Below Middle
      </Heading>
    </Card>
  </BentoBoxItem>
</BentoBox>
---
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 

---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import BentoBox from "@wrappers/bento-box/BentoBox.astro";
import BentoBoxItem from "@wrappers/bento-box/BentoBoxItem.astro";
import Card from "@wrappers/card/Card.astro";
---

<BentoBox columns={3} gap="xs" label="" minRowHeight={150}>
  <BentoBoxItem colSpan={2} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Wide Item
      </Heading>
      <Text>
        <p>Extra small spacing creates a tight, compact layout.</p>
      </Text>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 2
      </Heading>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 3
      </Heading>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 4
      </Heading>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 5
      </Heading>
    </Card>
  </BentoBoxItem>
</BentoBox>
---
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 

---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import BentoBox from "@wrappers/bento-box/BentoBox.astro";
import BentoBoxItem from "@wrappers/bento-box/BentoBoxItem.astro";
import Card from "@wrappers/card/Card.astro";
---

<BentoBox columns={3} gap="sm" label="" minRowHeight={150}>
  <BentoBoxItem colSpan={2} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Wide Item
      </Heading>
      <Text>
        <p>Small spacing provides a slightly tighter layout.</p>
      </Text>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 2
      </Heading>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 3
      </Heading>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 4
      </Heading>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 5
      </Heading>
    </Card>
  </BentoBoxItem>
</BentoBox>
---
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 

---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import BentoBox from "@wrappers/bento-box/BentoBox.astro";
import BentoBoxItem from "@wrappers/bento-box/BentoBoxItem.astro";
import Card from "@wrappers/card/Card.astro";
---

<BentoBox columns={3} gap="md" label="" minRowHeight={150}>
  <BentoBoxItem colSpan={2} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Wide Item
      </Heading>
      <Text>
        <p>Medium spacing is the default option.</p>
      </Text>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 2
      </Heading>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 3
      </Heading>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 4
      </Heading>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 5
      </Heading>
    </Card>
  </BentoBoxItem>
</BentoBox>
---
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 

---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import BentoBox from "@wrappers/bento-box/BentoBox.astro";
import BentoBoxItem from "@wrappers/bento-box/BentoBoxItem.astro";
import Card from "@wrappers/card/Card.astro";
---

<BentoBox columns={3} gap="lg" label="" minRowHeight={150}>
  <BentoBoxItem colSpan={2} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Wide Item
      </Heading>
      <Text>
        <p>Large spacing provides generous breathing room.</p>
      </Text>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 2
      </Heading>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 3
      </Heading>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 4
      </Heading>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 5
      </Heading>
    </Card>
  </BentoBoxItem>
</BentoBox>
---
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 

---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import BentoBox from "@wrappers/bento-box/BentoBox.astro";
import BentoBoxItem from "@wrappers/bento-box/BentoBoxItem.astro";
import Card from "@wrappers/card/Card.astro";
---

<BentoBox columns={3} gap="xl" label="" minRowHeight={150}>
  <BentoBoxItem colSpan={2} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Wide Item
      </Heading>
      <Text>
        <p>Extra large spacing creates a spacious layout.</p>
      </Text>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 2
      </Heading>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 3
      </Heading>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 4
      </Heading>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 5
      </Heading>
    </Card>
  </BentoBoxItem>
</BentoBox>
---
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 

---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import BentoBox from "@wrappers/bento-box/BentoBox.astro";
import BentoBoxItem from "@wrappers/bento-box/BentoBoxItem.astro";
import Card from "@wrappers/card/Card.astro";
---

<BentoBox columns={3} gap="2xl" label="" minRowHeight={150}>
  <BentoBoxItem colSpan={2} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Wide Item
      </Heading>
      <Text>
        <p>2xl spacing for very open layouts.</p>
      </Text>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 2
      </Heading>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 3
      </Heading>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 4
      </Heading>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 5
      </Heading>
    </Card>
  </BentoBoxItem>
</BentoBox>
---
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 

---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import BentoBox from "@wrappers/bento-box/BentoBox.astro";
import BentoBoxItem from "@wrappers/bento-box/BentoBoxItem.astro";
import Card from "@wrappers/card/Card.astro";
---

<BentoBox columns={3} gap="3xl" label="" minRowHeight={150}>
  <BentoBoxItem colSpan={2} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Wide Item
      </Heading>
      <Text>
        <p>3xl spacing for maximum separation between items.</p>
      </Text>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 2
      </Heading>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 3
      </Heading>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 4
      </Heading>
    </Card>
  </BentoBoxItem>
  <BentoBoxItem colSpan={1} rowSpan={1}>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 5
      </Heading>
    </Card>
  </BentoBoxItem>
</BentoBox>
---
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: ''
---