Bento
Use the bento to present content in a responsive grid layout.
import {Bento} from '@primer/react-brand'
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.
| 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.
| 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.
| 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.
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.
| 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.