Style Guide

Buttons

 
Primary
Secondary
Tertiary
Default
Button
Button
Button
Disabled
Button
Button
Button
White outline
Underline

Sustainability index

Good Start Great Top Rated

Components


Colors and other css variables

 
Value
Variable

Utility classes

Class
Examples
Info

flex
flex
This class applies the flex display

text-POSITION
text-center
POSITION can take one of the following values: left, center, right

text-POSITION--desktop
text-left--desktop
POSITION can take one of the following values: left, center, right

padding-y-X [DEPRECATED]
padding-y-10
X can taxe a value from 1 to 10, the first value of paddings is .5rem and the values are increasing by .5rem until the value of x is 5, then by 1 rem until the value of x is 10

padding-y-X--desktop [DEPRECATED]
padding-y-5--desktop
X can taxe a value from 1 to 10, the first value of paddings is 1rem and the values are increasing by 1rem until the value of x is 5, then by 3 rem until the value of x is 10

Spacing
The classes are named using the format {property}{sides}-{size} for mobile and up, and {property}{sides}-{breakpoint}-desktop for desktop only

Where property is one of:

  • m - for classes that set margin
  • p - for classes that set padding

Where sides is one of:

  • t - for classes that set *-top
  • b - for classes that set *-bottom
  • l - for classes that set *-left
  • r - for classes that set *-right
  • x - for classes that set both *-left and *-right
  • y - for classes that set both *-top and *-bottom

Where size is a value from 0 to 8 or auto for classes that set margin auto

Examples: .my-1
.py-3
.mx-auto
.pt-0-desktop
.mb-3-desktop