General Utility Classes

These are single responsibility classes designed to help reduce duplication in our Sass.

Clear floats.


Hide using display: none.


Hide using clip and make the element visible to Screen Readers.


Hide using opacity (modern browsers only).


Split long words over multiple lines. Useful for hyperlinks.


Position an element left - eg. the primary nav.


Position an element right

Requires a .split--right__inner class on any children.

This technique is used on the primary nav for the user features and search.


Create an inline nav - eg. the primary nav.

.nav--inline, .wv--nav--inline

Create a stacked nav - eg. the footer nav.


Vertically center content.

Use this class on the container and __inner on the element to be centered.


Replace an input with an image or pseudo element.

This will degrade gracefully for browsers that don't support pseudo elements.


Float an image left.


Float an image right.


Force an image to fill its container.


Apply default user avatar style - 50px & round.