Typography

HTML Heading Classes

heading-xlarge

Sample text is being used as a placeholder.

heading-large

Sample text is being used as a placeholder.

heading-medium

Sample text is being used as a placeholder.

heading-small

Sample text is being used as a placeholder.

heading-xsmall

Sample text is being used as a placeholder.

Text Sizes

text-size-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at purus ac enim feugiat laoreet id vel nibh. Sed bibendum scelerisque libero at luctus. Fusce vitae tellus at erat fringilla rhoncus ac vel arcu. Morbi varius ullamcorper justo sit amet faucibus. Suspendisse vel sagittis eros. Ut ac neque dui.

text-size-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at purus ac enim feugiat laoreet id vel nibh. Sed bibendum scelerisque libero at luctus. Fusce vitae tellus at erat fringilla rhoncus ac vel arcu. Morbi varius ullamcorper justo sit amet faucibus. Suspendisse vel sagittis eros. Ut ac neque dui.

text-size-regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at purus ac enim feugiat laoreet id vel nibh. Sed bibendum scelerisque libero at luctus. Fusce vitae tellus at erat fringilla rhoncus ac vel arcu. Morbi varius ullamcorper justo sit amet faucibus. Suspendisse vel sagittis eros. Ut ac neque dui.

text-size-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at purus ac enim feugiat laoreet id vel nibh. Sed bibendum scelerisque libero at luctus. Fusce vitae tellus at erat fringilla rhoncus ac vel arcu. Morbi varius ullamcorper justo sit amet faucibus. Suspendisse vel sagittis eros. Ut ac neque dui.

text-size-tiny

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at purus ac enim feugiat laoreet id vel nibh. Sed bibendum scelerisque libero at luctus. Fusce vitae tellus at erat fringilla rhoncus ac vel arcu. Morbi varius ullamcorper justo sit amet faucibus. Suspendisse vel sagittis eros. Ut ac neque dui.

Text Weights

text-weight-xbold

text-weight-xbold (900)

text-weight-bold

text-weight-bold (800)

text-weight-semibold

text-weight-semibold (700)

text-weight-medium

text-weight-medium (500)

text-weight-normal

text-weight-normal (400)

text-weight-light

text-weight-light (300)

Text Alignment

text-align-left

text-align-center

text-align-right

Buttons

Button Primary

Button

Button Secondary

Button

Button Light

Button

Button Dark

Button

Colours

Primary Colour

Secondary Colour

Alternate Colour

Primary BG Colour

White

Black

Containers

Grid

Max Width