Helper Classes

The NSW Design System includes a variety of responsive margin and padding utility classes to modify spacing inside and around components.

How it works

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:

  • xs - for classes that set the margin or padding to 4px on mobile and 8px on desktop
  • sm - for classes that set the margin or padding to 8px on mobile and 16px on desktop
  • md - for classes that set the margin or padding to 16px on mobile and 32px on desktop
  • lg - for classes that set the margin or padding to 24px on mobile and 48px on desktop
  • xl - for classes that set the margin or padding to 32px on mobile and 64px on desktop
  • xxl - for classes that set the margin or padding to 40px on mobile and 80px on desktop
Last updated