Utility classes

v.3.3.0 - Updated 24/04/18 Archives

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied to style elements.

Class Outcome Comments
.u-content-fade Fade content in as the user scrolls down the page Used in conjunction with data-module="u-content-fade" - see specific documentation on the content-fade page
.u-hidden Hides elements Only use this if the element is not required for a screen reader
.u-hidden--visually Hides element visually but still part of the document flow Especially good for hiding additional copy within buttons to make them accessible
.u-hidden--no-js Hides elements when JavaScript is not available Sets the element to display:block when JavaScript is available
.u-hidden--js Hides elements when JavaScript is available Sets the element to display:none when JavaScript is available
.u-no-print Hides elements when the page is printed  
.u-align--left Float the element to the left  
.u-align--center Align a block element with set width to the center of its container  
.u-align--right Float the element to the right  
.u-align--middle Centre the content of the element vertically This class relies on flexbox, so will only work on modern browsers and will need careful testing prior to release
.u-clear--both Clear all floated elements  
.u-clear--left Clear all left floated elements  
.u-clear--right Clear all right floated elements  
.u-clear--inner Clear all elements inside this element  
.u-text--left Align text to the left  
.u-text--center Align text to the center  
.u-text--right Align text to the right  
.u-text--word-wrap For wrapping long strings such as URLs when displayed as text  
.u-margin--bottom-none Removes any bottom margin  
.u-margin--top-none Removes any top margin  
.u-divider Adds a key line below the elements it surrounds and adds a large margin above and below

Deprecated - please use the keyline divider instead.

Designed to be used on a div element