Skip to content
UI Kit
Accent color

Layout components with slots

Layout building blocks with slots. Bento grids, masonry, split screens, sticky splits and dividers between sections.

5 components · 20 variants
Switch category

The frame your sections sit in

A layout component decides where things go and leaves the content to you. The five here take slots, so you drop in your own pictures, figures, quotes or cards and the grid keeps its shape on every screen size. Each one has its own phone layout, designed for the small screen.

Bento grid fills four grids without gaps, a large tile left, a mosaic on hairlines, a tall center or figures mixed with pictures. Masonry layout stacks items of any height in balanced columns, in ordered rows that keep the reading order, with filter chips or with load more. Split screen divides the screen into a sticky half, a switch between two offers, light and dark, or either or. Sticky split keeps content fixed on the left while steps scroll on the right, as a counter, a checklist, a contact beside answers or a changing year. Section divider shapes the seam between two sections as a wave, a slant, a labeled line or a gradient.

Bento grids suit features and about pages with five to seven tiles of different weight. Masonry fits galleries and walls of quotes, ordered rows are the choice when the order of the items matters. Use a divider where two sections change color, between sections of the same color whitespace does the job.

On this page

Every component of this category. Pick one to jump to its variants.

bento-grid

Bento grid

A bento grid as a layout piece with slots. Tiles with media, figures, icons and links in four grids that fill without gaps.

Props and details · Bento grid

Large tile leftNew in 1.2

One large tile with a screen on the left and four small tiles beside it, one tinted and one dark.

Mosaic on hairlinesNew in 1.2

Six tiles on hairlines, one wide, one tall and two half width, the cells keep their surface while content rises.

Tall centerNew in 1.2

A tall picture tile in the middle between two pairs, every tile a picture with its text on a soft shade.

Figures and picturesNew in 1.2

Figures, a note and pictures mixed in three rows, for an about page or a business in numbers.

masonry-layout

Masonry layout

A masonry for pictures, quotes, notes and figures of any height. Balanced columns, ordered rows, filter chips or load more.

Props and details · Masonry layout

ColumnsNew in 1.2

The classic masonry in balanced columns with mixed cards that rise in as they scroll into view.

Ordered rowsNew in 1.2

The reading order runs left to right, row by row, while each card keeps its own height.

With filterNew in 1.2

Chips with counts filter the cards by topic, the rest closes the gaps and rises in again.

Load moreNew in 1.2

A first batch with progress and a button that adds the next, the focus lands on the first new card.

section-divider

Section divider

The seam between two sections in their own colors. Drifting waves, a slant with a drawing line, a labeled hairline or a gradient.

Props and details · Section divider

WaveNew in 1.2

Three layered waves in the color above that drift against each other while the page scrolls.

SlantNew in 1.2

A diagonal edge between two colors with a fine accent line that draws itself as it scrolls in.

Line with labelNew in 1.2

A hairline that opens from the center around a label, for chapters or an or between two blocks.

GradientNew in 1.2

One color fades into the next while a soft light travels along the seam with the scroll.

split-screen

Split screen

A screen in two halves. A sticky picture beside scrolling panels, a switch between two offers, light and dark, or either or.

Props and details · Split screen

Sticky halfNew in 1.2

The picture half stays while the text half scrolls, the picture changes with each panel.

SwitchNew in 1.2

Two offers side by side, the chosen one opens wide on hover or focus, a switch on phones.

Light and darkNew in 1.2

A light and a dark half edge to edge, each with its own text, picture and action.

Either orNew in 1.2

Two choices as cards with a round or between them, the recommended one in the accent.

sticky-split

Sticky split

Fixed content on the left, scrolling steps on the right. A counter, a checklist that ticks off, a contact beside answers or a changing year.

Props and details · Sticky split

Steps with counterNew in 1.2

A large counter with a filling line and the current step on the left, the steps as cards on the right.

ChecklistNew in 1.2

A sticky list that ticks off each step once it has been read, a progress bar on phones.

Contact beside answersNew in 1.2

A heading and a contact card that stay while a long list of answers scrolls past.

Timeline with yearNew in 1.2

A large year on the left that changes with the events on the right, the line fills as you read.

Similar components

More from Layout, the same area of the kit.

Often combined with

Sections that usually sit next to Layouts on a page.

Often searched

Jump to

Copied to the clipboard