Typography

Fonts

TWK Lausanne

Headings + Body

Type: Sans Serif
Weights: Normal (400), Medium (500)

Headings

H1 Headings

Element

H2 Headings

Element

H3 Headings

Element

H4 Headings

Element

H5 Headings
Element
H6 Headings
Element
h1
Class
h2
Class
h3
Class
h4
Class
h5
Class
h6
Class

Body

paragraph-1.5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

paragraph-1.125

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

paragraph-0.9

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

eyebrow
Lorem Ipsum
All Ordered Lists
  1. Example Ordered List
  2. Example Ordered List
All Unordered Lists
  • Example Unordered List
  • Example Unordered List

Color

Background

White

#ffffff
u-bg-whte

Black

#1a1a1a
u-bg-black

Text

Aa

Black

#1a1a1a
u-text-black
Aa

Dark Gray

#302f2c
u-text-darkgray
Aa

White

#FFFFFF
u-text-white

Components

Buttons

Button
Button

Default

button
Button
Button

Default Small

button
cc-small
Button

Secondary

button
cc-secondary
Button

Secondary + Icon Right

button
cc-secondary
Button

Secondary + Icon Left

button
cc-secondary
Button

Default Light

button
cc-tertiary
Button

Default Light + Icon Right

button
cc-tertiary
Button

Default Light + Icon Left

button
cc-tertiary
Button

Default Light Small

button
cc-tertiary
cc-small
Button

Default White

button
cc-tertiary
cc-small
Follow us on

Default White

button
cc-tertiary
cc-small
Text

Text Link

All Links
Text

Text Link Light

u-text-white

Card

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote (same font size as paragraph-1.25)

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Prevent Style Clean Up

This is where you can store elements and classes used in custom code to prevent their classes/styles from being cleaned up.

Utilities

Margin

Top

u-mt-0
margin-top: 0;
u-mt-1
margin-top: 1rem;
u-mt-2
margin-top: 2rem;
u-mt-3
margin-top: 3rem;
u-mt-auto
margin-top: auto;

Bottom

u-mb-0
margin-bottom: 0;
u-mb-1
margin-bottom: 1rem;
u-mb-2
margin-bottom: 2rem;
u-mb-3
margin-bottom: 3rem;

Other

u-m-0
margin: 0;
u-mlr-auto
margin: 0 auto; (centers element))
u-mr-1
margin-right: 1rem;
u-mr-0.5
margin-right: 0.5rem;
u-ml-1
margin-left: 1rem;

Padding

Top

u-pt-0
padding-top: 0;
u-pt-1
padding-top: 1rem;
u-pt-2
padding-top: 2rem;
u-pt-3
padding-top: 3rem;

Bottom

u-pb-0
padding-bottom: 0;
u-pb-1
padding-bottom: 1rem;
u-pb-2
padding-bottom: 2rem;
u-pb-3
padding-bottom: 3rem;

Other

u-p-0
padding: 0;
u-p-1
padding: 1rem;

Overflow

u-overflow-hidden
overflow: hidden;
u-overflow-visible
overflow: visible;

Layout

Section

section

Container

container

Grid