Bento
Use the river component to introduce a feature using a type and media pairing.
On this page
On this page
As its name suggest this component is inspired by the Japanese bento lunch boxes. Bentos are an assortment of boxes arranged in a neat grid that forms a delightful unit. The intricate and harmonious pairing of contents makes a successful bento. The idea is to provide the most compelling picture of the product/feature we are presenting by allowing a rich variety of media type to tell and mini story.
Usage
Use bentos to present complex feature sets that require the presentation of various types of content. Each bento is composed of a minimum of 3 boxes and a maximum of 7-8. Each box should feature a small amount of content to create focus at the box level.
Boxes
Boxes are the constituent of the bento. Each should focus a clear point by featuring only the relevant content. Each box should not be narrower than 4 col. We allow full row width boxes as a breakout.
Boxes should be presenting a single piece of information
Don’t fit too much information in one box
Grid
Each bento assortment should fit within the grid system. The grid determine the size of each box and the density of each collage. The grid layout allows to articulate the composition by adjusting how each box fit with one another.
The grid should flex to accommodate the boxes content and size
Don’t create high density, unstructured grid with offsets