Select a title

UI Toolkit


CSS Utility classes


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.


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


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