Layout

Hide and show classes

c-disp-block

c-disp-block--tablet

c-disp-block--mobile

c-disp-inline--block

c-disp-inline--text

c-disp-none

c-flex-h--wrap

c-flex-h

c-flex-h--align-top

c-flex-h--align-center

c-flex-h--align-bottom

c-flex-h--justify-left

c-flex-h--justify-center

c-flex-h--justify-right

c-flex-h--justify-between

c-flex-h--justify-space

c-flex-v--wrap

c-flex-v

c-flex-v--align-left

c-flex-v--align-center

c-flex-v--align-right

c-flex-v--justify-top

c-flex-v--justify-center

c-flex-v--justify-bottom

c-flex-v--justify-between

c-flex-grow

c-flex-static

c-overflow-none

Max width

Width mobile

Height

spacing mb (margin-bottom)

mb-auto

mb-0--mobile

mb-5

mb-10

mb-15

mb-20

mb-30

mb-30--tablet

mb-30--mobile

mb-40

mb-50

mb-50---mobile

mb-75

mb-100

spacing pb (padding-bottom)

pb-0

pb-5

pb-10

pb-15

pb-20

pb-30

pb-30--mobile

pb-40

pb-50

pb-60

pb-70

pb-50--tablet

pb-50--mobile

pb-100

pb-120

spacing mt (margin-top)

mt-auto

mt-0--tablet

mt-0--mobile

mt-5

mt-10

mt-20

mt-30

mt-40

mt-50

mt-100

spacing pt (padding-top)

pt-0

pt-0--tablet

pt-0--mobile

pt-5

pt-10

pt-20

pt-30

pt-30--mobile

pt-40

pt-50

pt-50--mobile

pt-70

pt-100

pt-120

spacing mr-ml (margin left-right)

mr-auto

mr-0--mobile

mr-5

mr-10

mr-20

mr-30

mr-40

mr-50

mr-100

ml-auto

ml-0--mobile

ml-5

ml-10

ml-20

ml-30

ml-40

ml-50

ml-100

spacing mx (margin x-axis)

mx-auto

mx-10

mx-20

mx-30

mx-50

spacing pr-pl (padding left-right)

pr-5

pr-10

pr-20

pr-30

pr-40

pr-50

pr-100

pr-150

pr-200

pl-5

pl-10

pl-20

pl-30

pl-40

pl-50

pl-100

pl-150

pl-200

spacing pxy (padding x-y axis)

pxy-10

pxy-20

pxy-30

spacing px (padding x-axis)

px-0

px-0---mobile

px-10

px-20

px-30

px-50

spacing py (padding y-axis)

py-10

py-20

py-30

py-40

py-50

Position

c-static--tablet

c-static--mobile

c-relative

c-relative-z1

c-relative-z2

c-absolute

c-absolute--full

Text alignement

tx--align-left

tx--align-center

tx--align-center--mobile

tx--align-right

Text styles

Heading XL

Heading 1

heading 2

Heading 3

p--subheadline

Heading 4

p--headline

Heading 5

Heading 6

This is some text inside of a div block.

c-nav-link

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.

this is a test
this is a placeholder

tx--semi-bold

tx--underline

tx--uppercase