A NSW Government website
Design System

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 style

Class

Description

nsw-h1

Applies h1 font style to element

nsw-h2

Applies h2 font style to element

nsw-h3

Applies h3 font style to element

nsw-h4

Applies h4 font style to element

nsw-h5

Applies h5 font style to element

nsw-h6

Applies h6 font style to element

Svg fill

Class

Hover Class

Description

nsw-fill--brand-dark

hover:nsw-fill--brand-dark

Applies svg fill var(--nsw-brand-dark) to element

nsw-fill--brand-light

hover:nsw-fill--brand-light

Applies svg fill var(--nsw-brand-light) to element

nsw-fill--brand-supplementary

hover:nsw-fill--brand-supplementary

Applies svg fill var(--nsw-brand-supplementary) to element

nsw-fill--brand-accent

hover:nsw-fill--brand-accent

Applies svg fill var(--nsw-brand-accent) to element

nsw-fill--black

hover:nsw-fill--black

Applies svg fill var(--nsw-black) to element

nsw-fill--white

hover:nsw-fill--white

Applies svg fill var(--nsw-white) to element

nsw-fill--off-white

hover:nsw-fill--off-white

Applies svg fill var(--nsw-off-white) to element

nsw-fill--grey-01

hover:nsw-fill--grey-01

Applies svg fill var(--nsw-grey-01) to element

nsw-fill--grey-02

hover:nsw-fill--grey-02

Applies svg fill var(--nsw-grey-02) to element

nsw-fill--grey-03

hover:nsw-fill--grey-03

Applies svg fill var(--nsw-grey-03) to element

nsw-fill--grey-04

hover:nsw-fill--grey-04

Applies svg fill var(--nsw-grey-04) to element

Svg stroke

Class

Hover Class

Description

nsw-stroke--brand-dark

hover:nsw-stroke--brand-dark

Applies svg stroke var(--nsw-brand-dark) to element

nsw-stroke--brand-light

hover:nsw-stroke--brand-light

Applies svg stroke var(--nsw-brand-light) to element

nsw-stroke--brand-supplementary

hover:nsw-stroke--brand-supplementary

Applies svg stroke var(--nsw-brand-supplementary) to element

nsw-stroke--brand-accent

hover:nsw-stroke--brand-accent

Applies svg stroke var(--nsw-brand-accent) to element

nsw-stroke--black

hover:nsw-stroke--black

Applies svg stroke var(--nsw-black) to element

nsw-stroke--white

hover:nsw-stroke--white

Applies svg stroke var(--nsw-white) to element

nsw-stroke--off-white

hover:nsw-stroke--off-white

Applies svg stroke var(--nsw-off-white) to element

nsw-stroke--grey-01

hover:nsw-stroke--grey-01

Applies svg stroke var(--nsw-grey-01) to element

nsw-stroke--grey-02

hover:nsw-stroke--grey-02

Applies svg stroke var(--nsw-grey-02) to element

nsw-stroke--grey-03

hover:nsw-stroke--grey-03

Applies svg stroke var(--nsw-grey-03) to element

nsw-stroke--grey-04

hover:nsw-stroke--grey-04

Applies svg stroke var(--nsw-grey-04) 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