Skip to content

Every Layout, Homepage

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

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

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

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

The Grid

A box with decorative corners

The Frame

A box with a horizontal scrollbar containing a line of box-like elements. The last one on the right is cut in half

The Reel

One box superimposed over a grid of other boxes

The Imposter

The Icon

The Container