Utility Classes

Single-responsibility classes for re-use and customisation

Background colour

Class	Hover Class	Description
nsw-bg--brand-dark	hover:nsw-bg--brand-dark	Applies background colour `var(--nsw-brand-dark)` to element
nsw-bg--brand-light	hover:nsw-bg--brand-light	Applies background colour `var(--nsw-brand-light)` to element
nsw-bg--brand-supplementary	hover:nsw-bg--brand-supplementary	Applies background colour `var(--nsw-brand-supplementary)` to element

Text colour

Class	Hover Class	Description
nsw-text--dark	hover:nsw-text--dark	Applies text colour `var(--nsw-text-dark)` to element
nsw-text--light	hover:nsw-text--light	Applies text colour `var(--nsw-text-light)` to element
nsw-text--brand-dark	hover:nsw-text--brand-dark	Applies text colour `var(--nsw-brand-dark)` to element
nsw-text--brand-light	hover:nsw-text--brand-light	Applies text colour `var(--nsw-brand-light)` to element
nsw-text--brand-supplementary	hover:nsw-text--brand-supplementary	Applies text colour `var(--nsw-brand-supplementary)` to element

Border colour

Class	Hover Class	Description
nsw-border--text-dark	hover:nsw-border--text-dark	Applies border colour `var(--nsw-text-dark)` to element
nsw-border--text-light	hover:nsw-border--text-light	Applies border colour `var(--nsw-text-light)` to element
nsw-border--brand-dark	hover:nsw-border--brand-dark	Applies border colour `var(--nsw-brand-dark)` to element
nsw-border--brand-light	hover:nsw-border--brand-light	Applies border colour `var(--nsw-brand-light)` to element
nsw-border--brand-supplementary	hover:nsw-border--brand-supplementary	Applies border colour `var(--nsw-brand-supplementary)` to element

Class	Description
nsw-h1	Applies h1 font size to element
nsw-h2	Applies h2 font size to element
nsw-h3	Applies h3 font size to element
nsw-h4	Applies h4 font size to element
nsw-h5	Applies h5 font size to element
nsw-h6	Applies h6 font size to element

Border size

Class	Description
nsw-border--2	Applies 2px Brand Accent border to element
nsw-border--4	Applies 4px Brand Accent border to element
nsw-border--6	Applies 6px Brand Accent border to element
nsw-border--left-2	Applies 2px left Brand Accent border to element
nsw-border--right-2	Applies 2px right Brand Accent border to element
nsw-border--top-2	Applies 2px top Brand Accent border to element
nsw-border--bottom-2	Applies 2px bottom Brand Accent border to element
nsw-border--left-4	Applies 4px left Brand Accent border to element
nsw-border--right-4	Applies 4px right Brand Accent border to element
nsw-border--top-4	Applies 4px top Brand Accent border to element
nsw-border--bottom-4	Applies 4px bottom Brand Accent border to element
nsw-border--left-6	Applies 6px left Brand Accent border to element
nsw-border--right-6	Applies 6px right Brand Accent border to element
nsw-border--top-6	Applies 6px top Brand Accent border to element
nsw-border--bottom-6	Applies 6px bottom Brand Accent border to element

Box shadow

Class	Description
nsw-box-shadow	Applies box-shadow to element

Viewport Visibility

Grid classes give you the option to show or hide elements in certain breakpoints. For example, displaying an image on a large screen when it supports the content, but hiding it on a small screen when it hinders the users access to information.

The classes are named using the format nsw-{display}-{breakpoint}

Where breakpoint is one of xs, sm, md, lg, xl.

Where display is one of:

show - displays the elements
hide - hides the elements

Showing

This text is only visible in large breakpoint and up

Hiding

This text is only visible from large breakpoint and lower