Bento

Bento#

Mobile Tablet Desktop Full

Expand Bento example to its full height Open Bento example (opens in new tab)

Bento masonry layout#

Masonry layout. Item 1 uses a top image, item 2 a bottom image, item 3 a background image.

Mobile Tablet Desktop Full

Expand Bento masonry layout example to its full height Open Bento masonry layout example (opens in new tab)

Bento custom widths#

Custom widths layout: a featured full-width item with an image beside its content, a row of quarters and a row of halves, with symbols, eyebrows, New labels and audiences.

Mobile Tablet Desktop Full

Expand Bento custom widths example to its full height Open Bento custom widths example (opens in new tab)

Bento on a background#

On each background: light grey, primary, secondary, tertiary full bleed (where the featured item turns primary), and primary gradient

Mobile Tablet Desktop Full

Expand - Bento on a background example to its full height Open - Bento on a background example (opens in new tab)