Spacing
Spacing
This page helps to understand how to use the built-in CSS spacing classes to override the default spacing for any component.
See how Spacing works in Figma Community File
Spacing
Responsive 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.
This page helps to understand how to use the built-in CSS spacing classes to override the default spacing for any component.
| Spacing unit | Small screens | Medium screens | Large screens |
|---|---|---|---|
| 0 | 0 | 0 | 0 |
| 1 | 4px | 4px | 4px |
| 2 | 8px | 8px | 8px |
| 3 | 8px | 10px | 12px |
| 4 | 12px | 14px | 16px |
| 5 | 16px | 18px | 20px |
| 6 | 20px | 24px | 24px |
| 7 | 24px | 32px | 32px |
| 8 | 32px | 40px | 40px |
| 9 | 40px | 48px | 48px |
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.
Examples
Section break
You can use the govgr-section-break classes on an <hr> element to create a thematic break between sections of content. govgr-section-break has class-based modifiers for different size margins.
By default govgr-section-break is only visible by its margin. You can add the govgr-section-break--visible class to make it visible with a separator line.