Font Sizes:

--text-xxl

--text-xl

--text-l

--text-m (default body font size)

--text-s

--text-xs

Note: heading font sizes are set on a website per website basis as the font chosen determines the appropriate font size.

Spacing (height of div is set to the spacing variable):

--space-xs:

--space-s:

--space-m (default spacing between all elements). This is, by default, the same as --content-gap, we primarily use --content-gap rather than --space-m:

--space-l:

--space-xl:

--space-xxl:

Section Spacing:

The top and bottom spacing of this section is set to --section-space-xs.

Can be visible by the green color

The top and bottom spacing of this section is set to --section-space-s.

Can be visible by the green color

The top and bottom spacing of this section is set to --section-space-m.

Can be visible by the green color

Note: this is default section spacing, 90% of our websites use this on all sections.

The top and bottom spacing of this section is set to --section-space-l.

Can be visible by the green color

The top and bottom spacing of this section is set to --section-space-xl.

Can be visible by the green color

The top and bottom spacing of this section is set to --section-space-xxl.

Can be visible by the green color

--grid-2:

Grid Item

--grid-3:

Grid Item

--grid-4:

Grid Item

--grid-5:

Grid Item

--grid-6:

Grid Item

--grid-2-1:

Grid Item

--grid-1-2:

Grid Item

--grid-2-3:

Grid Item

--grid-3-2:

Grid Item

--grid-3-1:

Grid Item

--grid-1-3:

Grid Item

Font Sizes:

Spacing (height of div is set to the spacing variable):

Section Spacing:

--grid-2:

--grid-3:

--grid-4:

--grid-5:

--grid-6:

--grid-2-1:

--grid-1-2:

--grid-2-3:

--grid-3-2:

--grid-3-1:

--grid-1-3:

--content-width