Spacing
This page helps to understand how to use the built-in CSS spacing classes to override the default spacing for any component.
The responsive spacing scale
The Design System uses a responsive spacing scale which adapts based on screen size. For example, if you apply spacing unit 9 to a margin, it will be 48px on large screens and 32px on small screens.
| Spacing unit | Large screens | Small screens |
|---|---|---|
| 9 | 48px | 32px |
| 8 | 40px | 32px |
| 7 | 32px | 24px |
| 6 | 24px | 20px |
| 5 | 20px | 16px |
| 4 | 16px | 12px |
| 3 | 12px | 8px |
| 2 | 8px | 8px |
| 1 | 4px | 4px |
| 0 | 0 | 0 |
Spacing override classes
Occasionally, you might need to make minor adjustments like adding or removing spacing to elements of your design. You can use the responsive spacing override classes for this.
The spacing override classes are structured to allow you to apply any size of the scale, using margin or padding in any direction.
For example, govgr-m-9 will set a margin of 48px on large screens and 32px on small screens.
To add padding use -p instead of -m.
If you want to add the margin or padding in a particular direction, add l for left, r for right, t for top, or b for bottom. For example, -mt will set margin-top, -pr will set padding-right. If you do not specify a direction, the margin or padding will be applied to all sides of the element.
The last part of the class represents the value you want to apply. For example, in govgr-mb-9, the -9 represents 9 on the spacing scale.