Bento

Use the bento to present content in a responsive grid layout.

Alpha
Reviewed for accessibility

On this page

import {Bento} from '@primer/react-brand'

Default

<Box
  style={{backgroundColor: 'var(--base-color-scale-gray-2)'}}
  padding="normal"
>
  <Bento>
    <Bento.Item />
    <Bento.Item />
    <Bento.Item />
  </Bento>
</Box>

<Box
  style={{backgroundColor: 'var(--base-color-scale-gray-2)'}}
  padding="normal"
>
  <Bento>
    <Bento.Item />
    <Bento.Item />
    <Bento.Item />
  </Bento>
</Box>

Examples

<Box
  style={{backgroundColor: 'var(--base-color-scale-gray-2)'}}
  padding="normal"
>
  <Bento>
    <Bento.Item columnSpan={12} rowSpan={2} />
    <Bento.Item columnSpan={7} rowSpan={2} />
    <Bento.Item columnSpan={5} rowSpan={2} />
    <Bento.Item columnSpan={12} rowSpan={2} />
  </Bento>
</Box>

<Box
  style={{backgroundColor: 'var(--base-color-scale-gray-2)'}}
  padding="normal"
>
  <Bento>
    <Bento.Item columnSpan={12} rowSpan={2} />
    <Bento.Item columnSpan={7} rowSpan={2} />
    <Bento.Item columnSpan={5} rowSpan={2} />
    <Bento.Item columnSpan={12} rowSpan={2} />
  </Bento>
</Box>

Dark mode items

<Bento>
  <Bento.Item columnSpan={7} rowSpan={2} colorMode="dark" />
  <Bento.Item columnSpan={5} rowSpan={2} colorMode="dark" />
  <Bento.Item columnSpan={12} rowSpan={2} colorMode="dark" />
  <Bento.Item columnSpan={12} rowSpan={2} colorMode="dark" />
</Bento>

<Bento>
  <Bento.Item columnSpan={7} rowSpan={2} colorMode="dark" />
  <Bento.Item columnSpan={5} rowSpan={2} colorMode="dark" />
  <Bento.Item columnSpan={12} rowSpan={2} colorMode="dark" />
  <Bento.Item columnSpan={12} rowSpan={2} colorMode="dark" />
</Bento>

Use columnSpan, rowSpan, columnStart, rowStart, flow, verticalAlign, horizontalAlign with an Object of breakpoint-specific keys and values corresponding to each type to enable responsive behavior for each of these properties.

Breakpoints use min-width, where it will also apply your chosen span value to all larger breakpoints.

Bento items can render in a different source order to what is presented visually. It's important to ensure that the content of each item is self-contained and can be read independently of its adjacent items.

<Box
  style={{backgroundColor: 'var(--base-color-scale-gray-2)'}}
  padding="normal"
>
  <Bento>
    <Bento.Item
      columnSpan={{
        xsmall: 12,
        small: 6,
        large: 3,
      }}
      rowSpan={{
        xsmall: 4,
        large: 4,
      }}
    />
    <Bento.Item
      columnSpan={{
        xsmall: 12,
        small: 6,
        large: 3,
      }}
      rowSpan={{
        xsmall: 4,
        large: 2,
      }}
    />
    <Bento.Item
      columnSpan={{
        xsmall: 12,
        small: 6,
        large: 6,
      }}
      rowSpan={{
        xsmall: 4,
        large: 4,
      }}
    />
    <Bento.Item
      columnSpan={{
        xsmall: 12,
        small: 6,
        large: 3,
      }}
      rowSpan={{
        xsmall: 4,
        large: 3,
      }}
      rowStart={{
        large: 5,
      }}
    />
    <Bento.Item
      columnSpan={{
        xsmall: 12,
        small: 6,
        large: 3,
      }}
      rowSpan={{
        xsmall: 4,
        large: 5,
      }}
    />
    <Bento.Item
      columnSpan={{
        xsmall: 12,
        small: 6,
        large: 6,
      }}
      rowSpan={{
        xsmall: 4,
        large: 3,
      }}
    />
  </Bento>
</Box>

<Box
  style={{backgroundColor: 'var(--base-color-scale-gray-2)'}}
  padding="normal"
>
  <Bento>
    <Bento.Item
      columnSpan={{
        xsmall: 12,
        small: 6,
        large: 3,
      }}
      rowSpan={{
        xsmall: 4,
        large: 4,
      }}
    />
    <Bento.Item
      columnSpan={{
        xsmall: 12,
        small: 6,
        large: 3,
      }}
      rowSpan={{
        xsmall: 4,
        large: 2,
      }}
    />
    <Bento.Item
      columnSpan={{
        xsmall: 12,
        small: 6,
        large: 6,
      }}
      rowSpan={{
        xsmall: 4,
        large: 4,
      }}
    />
    <Bento.Item
      columnSpan={{
        xsmall: 12,
        small: 6,
        large: 3,
      }}
      rowSpan={{
        xsmall: 4,
        large: 3,
      }}
      rowStart={{
        large: 5,
      }}
    />
    <Bento.Item
      columnSpan={{
        xsmall: 12,
        small: 6,
        large: 3,
      }}
      rowSpan={{
        xsmall: 4,
        large: 5,
      }}
    />
    <Bento.Item
      columnSpan={{
        xsmall: 12,
        small: 6,
        large: 6,
      }}
      rowSpan={{
        xsmall: 4,
        large: 3,
      }}
    />
  </Bento>
</Box>

Responsive flow

<Box
  style={{backgroundColor: 'var(--base-color-scale-gray-2)'}}
  padding="normal"
>
  <Bento>
    <Bento.Item
      flow={{
        xsmall: 'row',
        small: 'row',
        medium: 'column',
      }}
    >
      <Bento.Content padding="normal">
        <Bento.Heading as="h3">Heading</Bento.Heading>
        <Link href="#">Call to action</Link>
      </Bento.Content>
      <Bento.Visual>
        <img
          alt="placeholder, blank area with an gray background color"
          src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
        />
      </Bento.Visual>
    </Bento.Item>
  </Bento>
</Box>

<Box
  style={{backgroundColor: 'var(--base-color-scale-gray-2)'}}
  padding="normal"
>
  <Bento>
    <Bento.Item
      flow={{
        xsmall: 'row',
        small: 'row',
        medium: 'column',
      }}
    >
      <Bento.Content padding="normal">
        <Bento.Heading as="h3">Heading</Bento.Heading>
        <Link href="#">Call to action</Link>
      </Bento.Content>
      <Bento.Visual>
        <img
          alt="placeholder, blank area with an gray background color"
          src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
        />
      </Bento.Visual>
    </Bento.Item>
  </Bento>
</Box>

Component props

Bento

Name	Type	Default	Required	Description
`className`	`string`		`false`	Sets a custom class on the root element

The Bento component API supports all standard HTML attribute props for the interface HTMLDivElement.

Bento.Item

Name	Type	Default	Required	Description
`className`	`string`		`false`	Sets a custom class on the root element
`children`	`React.ReactNode`, `React.ReactNode[]`		`false`	The children to be rendered within the `Bento.Item`
`columnStart`	`1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, `ResponsiveColumnIndex`		`false`	The column number in which this content should start
`columnSpan`	`1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, `ResponsiveColumnIndex`		`false`	The number of columns this content should span
`rowStart`	`number`, `ResponsiveRowIndex`		`false`	The row number in which this content should start
`rowSpan`	`number`, `ResponsiveRowIndex`		`false`	The number of rows this content should span
`flow`	`"row"`, `"column"`, `ResponsiveFlow`		`false`	The flow of the `Bento.Content` and `Bento.Visual` within the `Bento.Item`
`colorMode`	`"light"`, `"dark"`	`"light"`	`false`	The color mode specified for this `Bento.Item`
`visualAsBackground`	`boolean`	`false`	`false`	Determines if the `Bento.Visual` child element is set as the background for the `Bento.Item` with the `Bento.Content` overlayed
`order`	`"default"`, `"reversed"`, `ResponsiveOrder`	`default`	`false`	Determines the visual order for the `Bento.Item`. This changes the semantic ordering of elements for accessibility.

The Bento.Item component API supports all standard HTML attribute props for the interface HTMLDivElement, while providing some additional behavior as described above.

Bento.Content

Name	Type	Default	Required	Description
`className`	`string`		`false`	Sets a custom class on the root element
`children`	`Text`,`Bento.Heading`, `Link`		`false`	The children to be rendered within the `Bento.Content`
`leadingVisual`	`ReactElement`, `Icon`		`false`	Sets the icon before the heading text
`padding`	`"condensed"`, `"normal"`, `"spacious"`, `ResponsivePadding`	`"normal"`	`false`	Sets a custom class on the root element
`horizontalAlign`	`"start"`, `"center"`, `"end"`, `ResponsiveAlign`	`"start"`	`false`	The horizontal alignment of children within the `Bento.Content`
`verticalAlign`	`"start"`, `"center"`, `"end"`, `ResponsiveAlign`	`"start"`	`false`	The vertical alignment of children within the `Bento.Content`.

The Bento.Content component API supports all standard HTML attribute props for the interface HTMLDivElement, while providing some additional behavior as described above.

Bento.Heading

Required node that is used to provide a heading for the Bento.Content.

name	type	default	required	description
`className`	`string`		`false`	Custom class name for the heading component
`children`	`ReactNode`, `ReactNode[]`	`undefined`	`true`	Content to be displayed inside the heading component.

Forwards all props from the Heading component, including as, size, and weight.

Bento.Visual

Name	Type	Default	Required	Description
`className`	`string`		`false`	Sets a custom class on the root element
`fillMedia`	`boolean`	`true`	`false`	Determines how the visual reacts within its container. Either filling the container or contained within.
`position`	`string`	`"50% 50%"`	`false`	The positioning of the visual.
`padding`	`"condensed"`, `"normal"`, `"spacious"`, `ResponsivePadding`		`false`	Sets a custom class on the root element

The Bento.Visual component API supports all standard HTML attribute props for the interface HTMLDivElement, while providing some additional behavior as described above.

Site navigation

On this page

Bento

Default

Example layout

Examples

Dark mode items

Responsive behavior

Responsive flow

Component props

Bento

Bento.Item

Bento.Content

Bento.Heading

Bento.Visual