A NSW Government website
Design System

Spacing

🔹 Needed for NSW Government Branding

A defined set of spacing units provides good alignment and consistent spacing relationships in components and layout.

Responsive spacing

Spacing is recommended using an 8-pixel grid with pre-set responsive spacing units that can be used to create consistent spacing relationships across breakpoints.

Spacing token 0 - 767px 768px +
xs 4px 8px
sm 8px 16px
md 16px 32px
lg 24px 48px
xl 32px 64px
xxl 40px 80px

Helper classes

Add responsive margin or padding values to entire element or its sides with shorthand classes.

The classes are named using the format nsw-{property}-{sides}-{size}.

Where property is one of:

  • m - for classes that set margin
  • p - for classes that set padding

Where sides is one of:

  • top - for classes that set margin-top or padding-top
  • bottom - for classes that set margin-bottom or padding-bottom
  • left - for classes that set margin-left or padding-left
  • right - for classes that set margin-right or padding-right
  • x - for classes that set margin or padding on both left and right
  • y - for classes that set margin or padding on both top and bottom
  • blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of the responsive spacing tokens: xs, sm, md, lg, xl, xxl.

Here is a demo of creating a banner component using utility classes alone:

label

This is a heading

This is a intro text with longer vertical space to the button