Class

Description

.container

Large container (1080px wide)

.container-sm

Small container (896px)

.container-xs

Smaller container (620px)

Class

Description

.h1

.h2

.h3

.h4

.h5

.h6

To make the text look like headings

.h1-mobile

.h2-mobile

.h3-mobile

.h4-mobile

.h5-mobile

.h6-mobile

To make the text look like headings on smaller screens only

.text-sm

.text-xs

.text-xxs

To make the text look smaller

.ta-l

.ta-c

.ta-r

Adds a text-align property (left, center, right)

.ta-l-mobile

.ta-c-mobile

.ta-r-mobile

Same as above, but for smaller screens only

.fw-400

.fw-500

.fw-600

.fw-700

To change the font-weight property with the corresponding value

.text-color-high

.text-color-mid

.text-color-low

To change the text contrast

.text-color-primary

.text-color-secondary

.text-color-error

.text-color-warning

.text-color-success

To change the default text color

.tt-u

Transforms text to uppercase

Class

Description

.m-0

.m-4

.m-8

.m-12

.m-16

.m-24

.m-32

Sets the margin property to the corresponding value

.mt-0

.mt-4

.mt-8

.mt-12

.mt-16

.mt-24

.mt-32

Sets the margin-top property to the corresponding value

.mr-0

.mr-4

.mr-8

.mr-12

.mr-16

.mr-24

.mr-32

Sets the margin-right property to the corresponding value

.ml-0

.ml-4

.ml-8

.ml-12

.ml-16

.ml-24

.ml-32

Sets the margin-left property to the corresponding value

.p-0

.p-4

.p-8

.p-12

.p-16

.p-24

.p-32

Sets the padding property to the corresponding value

.pt-0

.pt-4

.pt-8

.pt-12

.pt-16

.pt-24

.pt-32

Sets the padding-top property to the corresponding value

.pr-0

.pr-4

.pr-8

.pr-12

.pr-16

.pr-24

.pr-32

Sets the padding-right property to the corresponding value

.pl-0

.pl-4

.pl-8

.pl-12

.pl-16

.pl-24

.pl-32

Sets the padding-left property to the corresponding value

.spacer-4

.spacer-8

.spacer-12

.spacer-16

.spacer-24

.spacer-32

.spacer-48

.spacer-64

Very helpful when used on an empty div as vertical spacer.

Sets a padding-top property with the corresponding value

.spacer-4-mobile

.spacer-8-mobile

.spacer-12-mobile

.spacer-16-mobile

.spacer-24-mobile

.spacer-32-mobile

.spacer-48-mobile

.spacer-64-mobile

Same as above, but for smaller screens only

Class

Description

.screen-reader

Makes content invisible but accessible to screen reader users​

.list-reset

Resets the default style of unordered (<ul>) and ordered lists (<ol>)

.has-bg-color

Inverts the background-color of an element.

Useful if you want to turn the light background-color of a section to dark, and vice-versa

.invert-color

Inverts the color of an element and its descendants (i.e. the color of text).

This class is often used in combination with .has-bg-color

.center-content

Center aligns the element and its descendants

.center-content-mobile

Same as above, but for smaller screens only

.center-content-desktop

Same as above, but for larger screens only

.has-top-divider

.has-bottom-divider

Adds a top and/or a bottom line divider to an element.

Often used for sections

.image-full

Ensure that an image width is 100%

.image-larger

Makes an image overflow its parent container of a certain number of pixels.

Variable for exceeding pixels is $image-larger--extra-width

and can be found in settings/base/_misc.scss

.has-shadow

Adds some box-shadow to an element, and the value can be found

in settings/base/_colors.scss ($bg--color array)