A NSW Government website
Design System v3.2.0

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

Font size

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