A defined set of spacing units provides good alignment and consistent spacing relationships in components and layout.
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 +|
Add responsive margin or padding values to entire element or its sides with shorthand classes.
The classes are named using the format
Where property is one of:
Where sides is one of:
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: