Heading classes

heading-xlarge

heading-xlarge

heading-large

heading-large

heading-medium

heading-medium

heading-small

heading-small

heading-xsmall

heading-xsmall

Text sizes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

text-size-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

text-size-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

text-size-regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

text-size-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

text-size-tiny
text-link

Text weights

Phasellus a nulla in neque lacinia posuere.
text-weight-xbold
Phasellus a nulla in neque lacinia posuere.
text-weight-bold
Phasellus a nulla in neque lacinia posuere.
text-weight-semibold
Phasellus a nulla in neque lacinia posuere.
text-weight-medium
Phasellus a nulla in neque lacinia posuere.
text-weight-normal
Phasellus a nulla in neque lacinia posuere.
text-weight-light

Text styles

Phasellus a nulla in neque lacinia posuere.
text-style-italic
Phasellus a nulla in neque lacinia posuere.
text-style-strikethrough
Phasellus a nulla in neque lacinia posuere.
text-style-allcaps
Phasellus a nulla in neque lacinia posuere.
text-style-muted
Phasellus a nulla in neque lacinia posuere.
text-style-nowrap
Phasellus a nulla in neque lacinia posuere.
text-style-quote
Click to see more
text-style-link

Text aligns

Phasellus a nulla in neque lacinia posuere.
text-align-left
Phasellus a nulla in neque lacinia posuere.
text-align-center
Phasellus a nulla in neque lacinia posuere.
text-align-right

Text colors

Phasellus a nulla in neque
text-color-primary
Phasellus a nulla in neque
text-color-black
Phasellus a nulla in neque
text-color-grey
Phasellus a nulla in neque
text-color-white

Background colors

background-color-primary
background-color-black
background-color-lightgrey

Opacity

Icon classes

icon-small
icon-medium
icon-large
icon-1x1-small
icon-1x1-medium
icon-1x1-large

Social icons

Padding-vertical

padding-vertical-32
padding-vertical-40
padding-vertical-48
padding-vertical-60
padding-vertical-80
padding-vertical-112
padding-vertical-160
padding-vertical-200

Padding-bottom

padding-bottom-8
padding-bottom-12
padding-bottom-16
padding-bottom-20
padding-bottom-24
padding-bottom-32
padding-bottom-40
padding-bottom-48
padding-bottom-60
padding-bottom-80
padding-bottom-112
padding-bottom-160
padding-bottom-200

Margin-vertical

margin-vertical-32
margin-vertical-40
margin-vertical-48
margin-vertical-60
margin-vertical-80
margin-vertical-112
margin-vertical-160
margin-vertical-200

Margin-bottom

margin-bottom-8
margin-bottom-12
margin-bottom-16
margin-bottom-20
margin-bottom-24
margin-bottom-32
margin-bottom-40
margin-bottom-48
margin-bottom-60
margin-bottom-80
margin-bottom-112
margin-bottom-160
margin-bottom-200

Margin-left

margin-left-8
margin-left-12
margin-left-16
margin-left-20
margin-left-24
margin-left-32
margin-left-40
margin-left-60

Padding-top

padding-top-8
padding-top-12
padding-top-16
padding-top-20
padding-top-24
padding-top-32
padding-top-40
padding-top-48
padding-top-60
padding-top-80
padding-top-112
padding-top-160
padding-top-200

Margin-top

margin-top-8
margin-top-12
margin-top-16
margin-top-20
margin-top-24
margin-top-32
margin-top-40
margin-top-48
margin-top-60
margin-top-80
margin-top-112
margin-top-160
margin-top-200

Margin-right

margin-right-8
margin-right-12
margin-right-16
margin-right-20
margin-right-24
margin-right-32
margin-right-40
margin-right-60

Padding-left

padding-left-8
padding-left-12
padding-left-16
padding-left-20
padding-left-24
padding-left-32
padding-left-40
padding-left-60

Padding-right

padding-right-8
padding-right-12
padding-right-16
padding-right-20
padding-right-24
padding-right-32
padding-right-40
padding-right-60

Colors

primary
primary-hover
black
lightgrey
white
turquoise
red

Heading classes

heading-xlarge

heading-xlarge-dark

heading-large

heading-large-dark

heading-medium

heading-medium-dark

heading-small

heading-small-dark

heading-xsmall

heading-xsmall-dark

Text sizes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

text-size-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

text-size-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

text-size-regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

text-size-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

text-size-tiny
text-link

Text weights

Phasellus a nulla in neque lacinia posuere.
text-weight-xbold
Phasellus a nulla in neque lacinia posuere.
text-weight-bold
Phasellus a nulla in neque lacinia posuere.
text-weight-semibold
Phasellus a nulla in neque lacinia posuere.
text-weight-medium
Phasellus a nulla in neque lacinia posuere.
text-weight-normal
Phasellus a nulla in neque lacinia posuere.
text-weight-light

Text styles

Phasellus a nulla in neque lacinia posuere.
text-style-italic
Phasellus a nulla in neque lacinia posuere.
text-style-strikethrough
Phasellus a nulla in neque lacinia posuere.
text-style-allcaps
Phasellus a nulla in neque lacinia posuere.
text-style-muted
Phasellus a nulla in neque lacinia posuere.
text-style-nowrap
Phasellus a nulla in neque lacinia posuere.
text-style-quote
Click to see more
text-style-link

Text aligns

Phasellus a nulla in neque lacinia posuere.
text-align-left
Phasellus a nulla in neque lacinia posuere.
text-align-center
Phasellus a nulla in neque lacinia posuere.
text-align-right

Text colors

Phasellus a nulla in neque
text-color-primary
Phasellus a nulla in neque
text-color-black
Phasellus a nulla in neque
text-color-grey
Phasellus a nulla in neque
text-color-white

Background colors

background-color-primary
background-color-black
background-color-lightgrey

Opacity

Icon classes

icon-small
icon-medium
icon-large
icon-1x1-small
icon-1x1-medium
icon-1x1-large

Social icons

Padding-vertical

padding-vertical-32
padding-vertical-40
padding-vertical-48
padding-vertical-60
padding-vertical-80
padding-vertical-112
padding-vertical-160
padding-vertical-200

Padding-bottom

padding-bottom-8
padding-bottom-12
padding-bottom-16
padding-bottom-20
padding-bottom-24
padding-bottom-32
padding-bottom-40
padding-bottom-48
padding-bottom-60
padding-bottom-80
padding-bottom-112
padding-bottom-160
padding-bottom-200

Margin-vertical

margin-vertical-32
margin-vertical-40
margin-vertical-48
margin-vertical-60
margin-vertical-80
margin-vertical-112
margin-vertical-160
margin-vertical-200

Margin-bottom

margin-bottom-8
margin-bottom-12
margin-bottom-16
margin-bottom-20
margin-bottom-24
margin-bottom-32
margin-bottom-40
margin-bottom-48
margin-bottom-60
margin-bottom-80
margin-bottom-112
margin-bottom-160
margin-bottom-200

Margin-left

margin-left-8
margin-left-12
margin-left-16
margin-left-20
margin-left-24
margin-left-32
margin-left-40
margin-left-60

Padding-top

padding-top-8
padding-top-12
padding-top-16
padding-top-20
padding-top-24
padding-top-32
padding-top-40
padding-top-48
padding-top-60
padding-top-80
padding-top-112
padding-top-160
padding-top-200

Margin-top

margin-top-8
margin-top-12
margin-top-16
margin-top-20
margin-top-24
margin-top-32
margin-top-40
margin-top-48
margin-top-60
margin-top-80
margin-top-112
margin-top-160
margin-top-200

Margin-right

margin-right-8
margin-right-12
margin-right-16
margin-right-20
margin-right-24
margin-right-32
margin-right-40
margin-right-60

Padding-left

padding-left-8
padding-left-12
padding-left-16
padding-left-20
padding-left-24
padding-left-32
padding-left-40
padding-left-60

Padding-right

padding-right-8
padding-right-12
padding-right-16
padding-right-20
padding-right-24
padding-right-32
padding-right-40
padding-right-60

Colors

primary
primary-hover
black
lightgrey
white
turquoise
red