@primer/react-brand
Version:
Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.
224 lines (191 loc) • 11.7 kB
Markdown
---
title: Bento
description: Use the bento to present content in a responsive grid layout.
keywords: ['grid', 'layout', 'responsive', 'container', 'masonry']
ready: true
source: https://github.com/primer/brand/blob/main/packages/react/src/Bento/Bento.tsx
storybook: '/brand/storybook/?path=/story/components-bento--default'
a11yReviewed: true
---
> This component is deprecated and will be removed in a future release. Use CTA banner or River instead.
```js
import {Bento} from '@primer/react-brand'
```
## Examples
### Default
```jsx
<Box style={{backgroundColor: 'var(--base-color-scale-gray-2)'}} padding="normal">
<Bento>
<Bento.Item />
<Bento.Item />
<Bento.Item />
</Bento>
</Box>
```
### Example layout
```jsx
<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
```jsx
<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>
```
### Responsive behavior
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.
```jsx
<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
```jsx
<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="/images/placeholder.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[]` | | `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` | `React.ReactNode[]` | | `false` | The children to be rendered within the `Bento.Content` |
| `leadingVisual` | `ReactElement` | | `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](../../typography/Heading/index.md), 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.