RootSystem 2.0

Style Guide

Typography

H1 Heading

Element

H2 Heading

Element

H3 Heading

Element

H4 Heading

Element

H5 Heading

Element

H6 Heading

element

Paragraph

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.

Class

u-text-bold

Colour

black

u-bg-black

white

u-bg-white

grey 1

u-bg-grey-1

grey 2

u-bg-grey-2

grey 3

u-bg-grey-3

grey 4

u-bg-grey-4

Yellow one

u-bg-yellow-1

Yellow two

u-bg-yellow-2

colour 3

u-bg-yellow-3

Aa

black

u-text-black

Aa

white

u-text-white

Aa

grey 1

u-text-grey-1

Aa

grey 2

u-text-grey-2

Aa

grey 3

u-text-grey-3

Aa

grey 4

u-text-grey-4

Aa

colour 1

u-text-colour-1

Aa

colour 2

u-text-colour-2

Aa

colour 3

u-text-colour-3

Buttons

Button

button

Button Text

large button

button

c-large

Button Text

secondary button

button

c-secondary

Button Text

large secondary button

button

c-secondary

c-large

Button Text

tertiary button

button

c-tertiary

Button Text

large tertiary button

button

c-tertiary

c-large

Structure

grid

grid / six columns

grid

c-col-6

grid / five columns

grid

c-col-5

grid / four columns

grid

c-col-4

grid / three columns

grid

c-col-3

grid / two columns

grid

c-col-2

grid / one column

grid

c-col-1

grid / large gap

grid

c-gap-lg

grid / small gap

grid

c-gap-sm

flexible layout / default gap

flex

flexible layout / large gap

flex

c-gap-lg

flexible layout / small gap

flex

c-gap-sm

column / DEFAULT gap

column

column / large gap

column

c-gap-lg

column / small gap

column

c-gap-sm

Structure / Extra

6 column tablet grid

grid

c-col-6-tab

5 column tablet grid

grid

c-col-5-tab

4 column tablet grid

grid

c-col-4-tab

3 column tablet grid

grid

c-col-3-tab

2 column tablet grid

grid

c-col-2-tab

1 column tablet grid

grid

c-col-1-tab

2 column mobile grid

grid

c-col-2-mob

1 column mobile grid

grid

c-col-1-mob

Padding

extra large padding

u-p-xl

large padding

u-p-lg

medium padding

u-p-md

small padding

u-p-sm

extra small padding

u-p-xs

extra large padding top

u-pt-xl

large padding top

u-pt-lg

medium padding top

u-pt-md

small padding top

u-pt-sm

extra small padding top

u-pt-xs

no padding top

u-pt-0

extra large padding bottom

u-pb-xl

large padding bottom

u-pb-lg

medium padding bottom

u-pb-md

small padding bottom

u-pb-sm

extra small padding bottom

u-pb-xs

no padding bottom

u-pb-0

Utilities

hide item

u-hide

hide item on desktop

u-hide-des

hide item on tablet

u-hide-tab

hide item on mobile

u-hide-mob

hide item on devices

u-hide-dev

Combinations

align top

c-align-top

align middle

c-align-mid

align bottom

c-align-btm