import {Bento} from '@primer/react-brand'Examples
Default
Example layout
Dark mode items
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.
Responsive flow
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, 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.