Lookbook

Brand

Logo and icon.

Colors

 
 
 
 
 
 
 
 
 

Typography

Title text uses Acumin Pro, while body text uses Inovato.

1st-level heading

2nd-level heading

3rd-level heading

4th-level heading

5th-level heading
6th-level heading

This is a paragraph with a link inside

  • This is
  • an
  • unordered list
  1. This is
  2. an
  3. ordered list

This is a footnote

This is a blockquote

This is a quote

Components

Class conventions are inspired by BEM.

  • A child component will be marked by two hyphens, e.g. .article--header
  • A different style of a component will be marked with an underscore, e.g. .nav_home

Button

Use the .button class to turn buttons and links into buttons.

* When should you use button vs. a? Find out here.

Article Title

The title of each page. Must be kept short, as it does not wrap into multiple lines.

.article--title

Tiles

Tiles are flex boxes. By default they use flex: 1. Available classes that set the width are:

  • .tile_third
  • .tile_half
  • .tile_twothirds
  • .tile_wide

When using .tile_wide children p use span columns.

.tile
This is a box of content.
.tile
This is a box of content.

Boxed Tile

A bordered version. Using .tile_boxed you can get a box that looks like this.

Boxed Heading

Using .heading_boxed you get a heading with a stylized border. If you use it inside .tile-boxed it will sit on the top left of its container. Text also needs to be short as it does not wrap multiple lines.

This is a boxed heading

Multi-column

A block of text that spans 2 columns and is separated by a graphical element

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit magni odio quidem amet vitae, reiciendis excepturi sint ut est ex molestiae recusandae qui repudiandae, aut numquam earum laboriosam sed, minus!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis corrupti ad maxime accusantium enim? Error exercitationem quod, voluptatum, labore dolore quibusdam a qui odio est consectetur. Fugit itaque reprehenderit eaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia quae ipsam, animi obcaecati sunt non vero dolorum aspernatur, doloremque veniam inventore, quaerat nam qui vitae quasi in. Vero, ipsa, esse.