Utility classes

Beta v.1.1.1 - Updated 17/01/17 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-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  
.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-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-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. It also adds a large margin above and below. Designed to be used on a div element