Modifiers

Description

Modify an element with one of the utility classes:

  • u-whitespace-nowrap: this class suppresses line breaks (text wrapping)
  • u-text-uppercase: this class transforms text to uppercase
  • u-color-white: this class transforms the colour of a component to white when sitting on dark backgrounds
  • u-color-inherit: this class inherits the colour from the closest parent that defines a colour
  • u-text-attention: this class to draw attention to text content through styling with a heavier font weight

Usage

Usage example

Text uppercase

Here is some text to style.

I am sitting on a dark background.

Code example

<div class="content__component-example">
  <div class="u-text-uppercase">
    <h6>Text uppercase</h6>
  </div>
  <div>
    <p>Here is some text to <span class="u-text-attention">style</span>.</p>
  </div>
</div>

<div class="content__component-example">
  <div class="component-variant__customisation--inverse">
    <div class="u-color-white">
      <h2 class="paragraph-heading paragraph-heading--large">I am sitting on a dark background.</h2>
    </div>
  </div>
</div>