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 | For use on the outer element of a organism, molecule or atom |
.u-margin--top-none |
Removes any top margin | For use on the outer element of a organism, molecule or atom |