Utility classes may be the only classes with `!important` in them as there is clear intent to apply that utility.

## Visually hidden content
Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the .sr-only class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users.

```html
<p>
  <span class="sr-only">Danger: </span>
  This action is not reversible
</p>
```

For visually hidden interactive controls, such as traditional “skip” links, .sr-only can be combined with the .sr-only-focusable class. This will ensure that the control becomes visible once focused (for sighted keyboard users).

## Text

We give some classes to obtain common text transformations easily.

### Alignment

Alignment can of course only work on display block elements.

```html
<h1 class="text-center">Hi</h1>
```

Other alignment utilities are...

- `.text-left`
- `.text-right`

### Colour

Change the colour of text below to brand red with the below class

```html
<p class="text-red">This is some red text</p>
```

You can replace 'red' with any brand colour.

### Size, Importance

To obtain the same style where semantics is not appropriate, choose the strong or small classes. Although, be aware that
the styling of what 'strong' text looks like, for instance, may change.

```html
<p>This is some text that is <span class="text-strong">strong!</span>.</p>
<p>This is some text that is <span class="text-small">small</span>.</p>

```

## Buttons

```html
<button class="button--full-width"></button>
```