Styleguide

Typography

Aa
Body (All Pages)
Space Grotesk
Aa
All Headings
Space Grotesk

Headings

Element

All H1 Headings

Element

All H2 Headings

Element

All H3 Headings

Element

All H4 Headings
Element
All H5 Headings
Element
All H6 Headings

Headings Class

Class

Heading 1

Class

Heading 2

Class

Heading 3

Class

Heading 4
Class
Heading 5
Class
Heading 6

Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

All Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph 0.9

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph 1.25

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph 1.5
  • Unordered List Lorem Ipsum
  • Unordered List Lorem Ipsum
  • Unordered List Lorem Ipsum
All Unordered Lists
  • Unordered List Lorem Ipsum
  • Unordered List Lorem Ipsum
  • Unordered List Lorem Ipsum
List Unordered
List Item
  1. Unordered List Lorem Ipsum
  2. Unordered List Lorem Ipsum
  3. Unordered List Lorem Ipsum
All Ordered Lists
  1. Unordered List Lorem Ipsum
  2. Unordered List Lorem Ipsum
  3. Unordered List Lorem Ipsum
List Ordered
List Item
Text Block Lorem Ipsum
Body (All PAges)
Text Block Lorem Ipsum
Text
Block Quote Lorem Ipsum
All Block Quotes
Block Quote Lorem Ipsum
Block Quote
Text Block Lorem Ipsum
Text 0.9
Text Block Lorem Ipsum
Text 1.25
Text Block Lorem Ipsum
Text 1.5
Text Block Lorem Ipsum
Eyebrow

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Image Caption
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Rich Text

Background Color

BG Natural 01
BG Natural 02
BG Natural 03
BG Natural 04
BG Natural 05
BG Natural 06
BG Pastel 01
BG Pastel 02
BG Pastel 03
BG Pastel 04

Text Alignments

Lorem Ipsum
left
Text Allign Left
Lorem Ipsum
Middle
Text Allign Middle
Lorem Ipsum
Right
Text Allign Right

Buttons

Button 1
Button
Button 2
Button
2
Button 3
Button
3

Layout

Container
Container Large
Container Medium
Container Small
Max Width Large
Max Width Medium
Max Width Small