Styleguide

Typography / Headings

Heading 1

Lorem ipsum dolor sit amet consectetur

Heading 2

Lorem ipsum dolor sit amet consectetur

Heading 3

Lorem ipsum dolor sit amet consectetur

Heading 4

Lorem ipsum dolor sit amet consectetur

Heading 5
Lorem ipsum dolor sit amet consectetur
Heading 6
Lorem ipsum dolor sit amet consectetur

Typography / Subheadings

Subheading Large
Lorem ipsum dolor sit amet consectetur
Subheading Normal
Lorem ipsum dolor sit amet consectetur
Subheading Small
Lorem ipsum dolor sit amet consectetur

Typography / Lead

Lead Large

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.

Lead Medium

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.

Typography / Paragraphs

Paragraph Large

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 Normal

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 Small

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.

Typography / Unordered Lists

Unordered List Large
  • Vel augue dictum malesuada eget dignissim pellentesque pulvinar dui scelerisque. Massa nulla sagittis facilisi eu tincidunt in pellentesque.
  • Tellus facilisis adipiscing turpis vitae purus suscipit luctus a rhoncus.
  • Nec nulla euismod rutrum feugiat at eu est nec.
Unordered List Default
  • Vel augue dictum malesuada eget dignissim pellentesque pulvinar dui scelerisque. Massa nulla sagittis facilisi eu tincidunt in pellentesque.
  • Tellus facilisis adipiscing turpis vitae purus suscipit luctus a rhoncus.
  • Nec nulla euismod rutrum feugiat at eu est nec.
Unordered List Small
  • Vel augue dictum malesuada eget dignissim pellentesque pulvinar dui scelerisque. Massa nulla sagittis facilisi eu tincidunt in pellentesque.
  • Tellus facilisis adipiscing turpis vitae purus suscipit luctus a rhoncus.
  • Nec nulla euismod rutrum feugiat at eu est nec.

Typography / Ordered Lists

Ordered List Large
  1. Vel augue dictum malesuada eget dignissim pellentesque pulvinar dui scelerisque. Massa nulla sagittis facilisi eu tincidunt in pellentesque.
  2. Tellus facilisis adipiscing turpis vitae purus suscipit luctus a rhoncus.
  3. Nec nulla euismod rutrum feugiat at eu est nec.
Ordered List Default
  1. Vel augue dictum malesuada eget dignissim pellentesque pulvinar dui scelerisque. Massa nulla sagittis facilisi eu tincidunt in pellentesque.
  2. Tellus facilisis adipiscing turpis vitae purus suscipit luctus a rhoncus.
  3. Nec nulla euismod rutrum feugiat at eu est nec.
Ordered List Small
  1. Vel augue dictum malesuada eget dignissim pellentesque pulvinar dui scelerisque. Massa nulla sagittis facilisi eu tincidunt in pellentesque.
  2. Tellus facilisis adipiscing turpis vitae purus suscipit luctus a rhoncus.
  3. Nec nulla euismod rutrum feugiat at eu est nec.

Typography / Text Link

Typography / Text Weights

Light
Lorem ipsum dolor sit amet
Regular
Lorem ipsum dolor sit amet
Semibold
Lorem ipsum dolor sit amet

Colors / Surface

Primary
Secondary
Tertiary
Dark
Light
Background

Colors / Border

Light Border

UI / Buttons

Primary
Large
Button Text
Secondary
Large
Button Text
Primary
Small
Button Text
Secondary
Small
Button Text
Text
Primary
Button Text
Text
White
Button Text

UI / Inputs

Text Input
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Select
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Textarea
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Radio Button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Checkbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form Button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Additional Elements / Rich Text Block

Aliquam tincidunt mauris eu risus

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Vestibulum auctor dapibus neque

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Nunc dignissim risus id metus

Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.

Aliquam erat volutpat. Nam dui mi tincidunt quis accumsan porttitor facilisis luctus metus.

Donec quis dui at dolor tempor interdum

Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis xdis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida

  1. Vivamus vestibulum ntulla nec ante.
  2. Praesent placerat risus quis eros.
  3. Fusce pellentesque suscipit nibh.
  4. Integer vitae libero ac risus egestas placerat.
  5. Vestibulum commodo felis quis tortor.
Vivamus vestibulum ntulla nec ante
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
  • Nunc dignissim risus id metus.
Praesent placerat risus quis eros