Skip to content

Layouts

Each of the following layout primitives is documented with a code generator, and includes a custom element implementation. You can use them together, in composition, to create robust and responsive layouts without the need for @media breakpoints.

Three boxes stacked on top of each other

The Stack

read
now
A simple rectangle shape

The Box

A rectangle shape centered in the horizontal space

The Center

A cluster of boxes of different widths, laid out like words in a paragraph

The Cluster

A narrow and wide element laid out adjacently, transforming into two elements on top of each other

The Sidebar

read
now
A set of three horizontally aligned boxes transforming into three vertically stacked boxes

The Switcher

A box with one large box in its vertical centre and two shorter boxes at its head and foot

The Cover

read
now
A grid of equal sized boxes (three columns and three rows)

The Grid