Elements

Circles, squares, boxes and other elements.

Learn how to use Blocks »

Circles and squares / Not clickable

Boxes use Square proportion wrapper to keep them square. They fill the whole available space. Place them in columns to size them, or set the width on the box. Content can be anything: icons, SVGs, text, background images... Set colors, rounded corners, borders and similar on the inner element (.proportions-box-content), not on the top one because setting the borders on the top element spoils the proportions.
Learn how to use
Hi!

Circles and squares / Buttons

These elements are similar to the boxes above. But here, the content of the box is a Bootstrap button. Use these elements as clickable links.
Learn how to use
Hi!

Two column boxes

Boxes have two columns. Horizontal ones have the second colum set to Distribute, so that it will adjust to the size of the first column.
Learn how to use

Column title

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Column title

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Column title

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Column title

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.