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
- This is
- an
- 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.