Helper Classes

Column helpers

.col-centered {}

Use this modifier class to align grid columns in the center.

.split-col {}

Use this modifier class to split a column into two parts.

Clearfix

.cf {}

Use this class to clearfix for parents of floated elements.

Spacers

.spacer {}

Use this modifier class to add margin: 0 auto 2rem to an element

.spacer-medium {}

Use this modifier class to add margin-bottom: 2rem to an element

.spacer-large {}

Use this modifier class to add margin-bottom: 4rem to an element

Text Alignment

.text-left {}

Use this modifier class to align text in the left.

.text-right {}

Use this modifier class to align text in the right.

.text-center {}

Use this modifier class to align text in the center.

Text Transform

.capitalize {}

Make text capitalized.

Text Weights

.text-weight-lighter {}

Use this modifier make text have a lighter feel.

.text-weight-normal {}

Use this modifier make text have a normal feel.

.text-weight-bold {}

Use this modifier make text have a bold feel.

.text-weight-bolder {}

Use this modifier make text have a bolder feel.

.blur {}

Use this modifier to add a blur effect to any element.

.background-brand-colour {}

Use this modifier with any brand colour to add background to any element.

.background-blue-gradient {}

Add a gradient background to any element.

.outline-brand-colour {}

Use this modifier with any brand colour to add inset box shadow (a thin outline) to any element.

.text-brand-colour {}

Use this modifier with any brand colour to change the colour of text within any element.

Line Breaks

floaters

Use these modifiers to float elements left and right.

margin zero

.m-zero {}

look ma there is...

no spacing between these two p tags

.container {}

Use this modifier class to limit the width of the contents to 1264px.

.lock-scroll {}

Add this class to any element to prevent the user from scrolling.

.shadow

Add this class to elements you want to have a top shadow on.

Hidden helpers

Use these modifiers to hide an element. They work using the break points rather than device specific language such as mobile, tablet and desktop. See our Grid docs for available breakpoints.

.is-hidden-below-{breakpoint}

.is-hidden-above-{breakpoint}