Spacing

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