Style Guide

Box

The .box class adds padding and a border around content.

The style parameter --padding: 1rem sets the padding inside the box. The default is 1rem.

This content is in a box.

Center

The .center class uses flexbox to center content in a vertical column

This is three nested divs.

The first has the class .center to center it horizontally.

The second has the class .stack to provide spacing between elements.

The inner elements have the class .box to provide padding and a border.

Heading 3

This is some centered content. It includes a heading, a paragraph, and a button.

Heading 3

This is some centered content. It includes a heading, a paragraph, and a button.

Cluster

The .cluster class uses flexbox to distribute elements evenly across the page.

The style parameter --space: 1rem sets the spacing between elements. The default is 1rem.

Cluster item 1
Cluster item 2
Cluster item 3
Cluster item 4
Cluster item 5
Cluster item 6
Cluster item 8
Cluster item 7
Cluster item 9
Cluster item 10
Cluster item 11
Cluster item 12

Cover Layout

The .cover class fills the viewport vertically. It is useful for full-page layouts.

The style parameter --padding: 2rem sets the padding inside the cover. The default is 1rem.

The div in this example also has the class .box to make the spacing more clear.

Cover Layout

Fills the viewport vertically

Stack

The .stack class adds spacing between elements. It does not add a space after the last element.

The style parameter --space: 2em sets the spacing between elements. The default is 1.5rem.

An additional class of .padded can be added to include padding around the stack.

The style parameter --padding: 2em sets the padding around the stack. The default is 1rem.

The divs in this example also have the class .box to make the spacing more clear.

Item 1
Item 2
Item 3

Switcher Layout

Switcher panel 1
Switcher panel 2
Switcher panel 3

Grid Layout

Grid item 1
Grid item 2
Grid item 3
Grid item 4

Frame Layout

Frame around content

Reel Layout

Reel item 1
Reel item 2
Reel item 3
Reel item 4
Reel item 5

Imposter Layout

Imposter content

Icon Layout

Example icon

Container Layout

Container with a max-width.