Style guide

Typography

<h1>

<h2>

<h3>

<h4>

<h5>
<h6>

<p>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.</p>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Overline

Utility classes

Colors

  • Bg primary
  • Bg secondary
  • Bg tertiary
  • Bg gray

Spacing utilities

Note: It's generally better to only use spacing utility classes when there is a one-off instance, like when you have a Heading 1 class that needs a different bottom margin than normal

Margin bottom classes

  • mb none
  • mb xs - 0.625 rem
  • mb sm - 0.75 rem
  • mb md - 1.125 rem
  • mb lg - 1.5 rem
  • mb xl - 2 rem
  • mb xxl - 4.5 rem
  • mb xxxl - 9 rem

Accordions

Accordion trigger text - expanded example
Collapse
A caret

Accordion content goes here

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.

Accordion trigger text
Expand
A caret

Accordion content goes here

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.