Style Guide

Style Menu

Colors and background color
Typography
Links & Buttons
Forms & Inputs
Rich text
Spacing
Global

Colors

Background colors

bg-orange-100
bg-orange-200
bg-orange-300
bg-orange-400
bg-orange-500
bg-orange-600
bg-orange-700
bg-orange-800
bg-orange-900
bg-brown
bg-light-beige
bg-dark-beige
bg-gray-400
bg-gray-400
bg-gray-400
bg-gray-400
bg-gray-300

Text colors

text-orange-200
text-orange-200
text-orange-300
text-orange-400
text-orange-500
text-orange-600
text-orange-700
text-orange-800
text-orange-900
text-brown
text-light-beige
text-darke-beige
text-gray-200
text-gray-300
text-gray-400
text-gray-500
text-gray-600

Typography

H1

heading-h1

Sample text

H2

heading-h2

Sample text

H3

heading-h3

Sample text

H4

heading-h4

Sample text

H5
heading-h5
Sample text
H6
heading-h6
Sample text

Text sizes

text-lg
2rem/1.4
Sample text is being used as a placeholder for real text that is normally present.
text-md
1.375rem/1.6
Sample text is being used as a placeholder for real text that is normally present.
text-sm
1rem/1.6
Sample text is being used as a placeholder for real text that is normally present.
text-xsm
0.875rem/1.6
Sample text is being used as a placeholder for real text that is normally present.

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.

Forms & Inputs

image description
Submit
image description
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

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

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

Spacing

Spacer-xl
Spacer-lg
Spacer-md
Spacer-sm

Global

section-padding
section-padding.is--large
section-padding.is--small
section-padding.is--small_bottom
Container