CSS Utility classes

Push

You can add margin-top to any element to push it down by multiples of the globally defined --gutter variables.

Add one of the following classes u-push-1, u-push-2, u-push-3, u-push-4, u-push-large, u-push-xlarge.

Example

Default Push-1 (10px) Push-2 (20px) Push-3 (30px)

Push-4 (50px) Push-large (60px) Push-xlarge (100px)

Vertical align

You can set the vertical alignment of any inline or inline-block element with one of the following classes u-valign-top, u-valign-middle, u-valign-bottom

General utilities

Float

Any element can be made to float either left or right, so long as it container is not a flexbox container display: flex etc. Add either classes:

• .u-float-left or
• .u-float-right
  to modify the element. The parent should be a clearfix container.

There is a generic clearfix utility too, simply add u-clearfix class to your element to apply a clearfix.

Display modes can be overwritten with four classes to change the display type.

• u-block
• u-inline-block
• u-flex
• u-inline-flex

text colour utility classes:

• u-col-zd-black
• u-col-main
• u-col-error

additional utility classes:

• u-margin-auto
• u-transition - transition on all props