- Taxonomic name: U-
- Added on: v3.0.0 (15/09/17)
- Updated on: v4.10.0 (21/06/19)
Utility classes reference
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"
data-module-load="true" - 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 |
Aligne le texte à gauche | |
.u-text--left-medium |
Aligne le texte à gauche à partir de Tablet | |
.u-text--left-large |
Aligne le texte à gauche à partir du Desktop | |
.u-text--center |
Centre le texte | |
.u-text--center-medium
|
Centre le texte à partir de Tablet | |
.u-text--center-large |
Centre le texte à partir de Desktop | |
.u-text--right |
Aligne le texte à droite | |
.u-text--right-medium |
Aligne le texte à droite à partir de Tablet | |
.u-text--right-large |
Aligne le texte à droite à partir de Desktop | |
.u-text--word-wrap |
For wrapping long strings such as URLs when displayed as text | |
.u-text--no-wrap |
For preventing wrapping of text that contains spaces | |
.u-margin--none |
Removes all margin | |
.u-margin--top-none |
Removes any top margin | For use on the outer element of a organism, molecule or atom |
.u-margin--bottom-none
|
Removes any bottom margin | For use on the outer element of a organism, molecule or atom |
.u-margin--right-none |
Removes any right margin | For use on the outer element of a organism, molecule or atom |
.u-margin--left-none |
Removes any left margin | For use on the outer element of a organism, molecule or atom |
.u-margin--none-medium
|
Removes all margin for tablet screens and up | |
.u-margin--top-none-medium
|
Removes any top margin for tablet screens and up | For use on the outer element of a organism, molecule or atom |
.u-margin--bottom-none-medium |
Removes any bottom margin for tablet screens and up | For use on the outer element of a organism, molecule or atom |
.u-margin--right-none-medium |
Removes any right margin for tablet screens and up | For use on the outer element of a organism, molecule or atom |
.u-margin--left-none-medium |
Removes any left margin for tablet screens and up | For use on the outer element of a organism, molecule or atom |
.u-margin--none-large |
Removes all margin for desktop screens | |
.u-margin--top-none-large
|
Removes any top margin for desktop screens | For use on the outer element of a organism, molecule or atom |
.u-margin--bottom-none-large |
Removes any bottom margin for desktop screens | For use on the outer element of a organism, molecule or atom |
.u-margin--right-none-large |
Removes any right margin for desktop screens | For use on the outer element of a organism, molecule or atom |
.u-margin--left-none-large
|
Removes any left margin for desktop screens | For use on the outer element of a organism, molecule or atom |
.u-margin--x-none |
Removes any left and right margin | For use on the outer element of a organism, molecule or atom |
.u-margin--x-none-medium
|
Removes any left and right margin for tablet screens and up | For use on the outer element of a organism, molecule or atom |
.u-margin--x-none-large
|
Removes any left and right margin for desktop | For use on the outer element of a organism, molecule or atom |
.u-margin--y-none |
Removes any top and bottom margin | For use on the outer element of a organism, molecule or atom |
.u-margin--y-none-medium
|
Removes any top and bottom margin for tablet screens and up | For use on the outer element of a organism, molecule or atom |
.u-margin--y-none-large
|
Removes any top and bottom margin for desktop | For use on the outer element of a organism, molecule or atom |
.u-margin--direction-size
|
add the amount margin in the desired direction |
For use on the outer element of a organism, molecule or atom
direction could be the classics top, left, bottom, right size could be:
|
.u-margin--direction-size-medium
|
same as .u-margin--direction-size
for
tablet screens and up
|
For use on the outer element of a organism, molecule or atom |
.u-margin--direction-size-large
|
same as .u-margin--direction-size
for
desktop screens
|
For use on the outer element of a organism, molecule or atom |
.u-padding--direction-size
|
add the amount padding in the desired direction |
For use on the outer element of a organism, molecule or atom
direction could be the classics top, left, bottom, right size could be:
|
.u-padding--direction-size-medium
|
same as .u-padding--direction-size
for tablet screens and up
|
For use on the outer element of a organism, molecule or atom |
.u-padding--direction-size-large
|
same as .u-padding--direction-size
for desktop screens
|
For use on the outer element of a organism, molecule or atom |
.u_bgs-ct
|
Redimensionne l'image de fond afin qu'elle soit la plus grande possible, sans la rogner, et que l'image conserve ses proportions. | |
.u_bgs-cv
|
Redimensionne l'image de fond afin qu'elle couvre tout son conteneur, y compris en la rognant, et que l'image conserve ses proportions. | |
.u_bgpx-left
|
Positionne l'image de fond à gauche | |
.u_bgpx-center
|
Positionne l'image de fond au centre de l'axe horizontal | |
.u_bgpx-right
|
Positionne l'image de fond à droite | |
.u_bgpy-top
|
Positionne l'image de fond en haut | |
.u_bgpy-center
|
Positionne l'image de fond au centre de l'axe vertical | |
.u_bgpy-bottom
|
Positionne l'image de fond en bas |