Guidance
Proper use of spacing makes it easier for people to process information and interact with an interface. Our design system uses an 8px grid for all spacing values such as padding, margins and gaps. In addition to default and inherited styles, our design system also offers a comprehensive set of spacing helper classes to help you fine-tune an element's appearance. These classes enable you to assign responsive margins or padding values to an element's sides.
Spacing
Standardized spacing values help us maintain consistency across different components and layouts.
| Size | Value | Example |
|---|---|---|
| none | 0 | |
| xxs | 0.25rem (4px) | |
| xs | 0.5rem (8px) | |
| sm | 1rem (16px) | |
| md | 1.5rem (24px) | |
| lg | 2rem (32px) | |
| xl | 3rem (48px) | |
| xxl | 4rem (64px) |
Spacing helpers
Spacing helpers apply to all breakpoints. These classes follow the format {property}-{size} when applying spacing to the entire element, or {property}-{sides}-{size} when applying spacing to a subset of the element's sides.
Where property is one of:
- margin: for classes that set margin
- padding: for classes that set padding
Where sides is one of:
- top: for classes that set margin-top or padding-top
- right: for classes that set margin-right or padding-right
- bottom: for classes that set margin-bottom or padding-bottom
- left: for classes that set margin-left or padding-left
Where size is one of:
- none: for classes that eliminate the margin or padding by setting it to 0
- xxs: for classes that set the margin or padding to 0.25rem (4px)
- xs: for classes that set the margin or padding to 0.5rem (8px)
- sm: for classes that set the margin or padding to 1rem (16px)
- md: for classes that set the margin or padding to 1.5rem (24px)
- lg: for classes that set the margin or padding to 2rem (32px)
- xl: for classes that set the margin or padding to 3rem (48px)
- xxl: for classes that set the margin or padding to 4rem (64px)
Apply spacing to all sides
| Size | Value | Class (margin) | Class (padding) |
|---|---|---|---|
| none | 0 | .margin-none |
.padding-none |
| xxs | 0.25rem (4px) | .margin-xxs |
.padding-xxs |
| xs | 0.5rem (8px) | .margin-xs |
.padding-xs |
| sm | 1rem (16px) | .margin-sm |
.padding-sm |
| md | 1.5rem (24px) | .margin-md |
.padding-md |
| lg | 2rem (32px) | .margin-lg |
.padding-lg |
| xl | 3rem (48px) | .margin-xl |
.padding-xl |
| xxl | 4rem (64px) | .margin-xxl |
.padding-xxl |
Apply spacing to specific sides
| Size | Value | Class (margin) | Class (padding) |
|---|---|---|---|
| none | 0 | .margin-{side}-none |
.padding-{side}-none |
| xxs | 0.25rem (4px) | .margin-{side}-xxs |
.padding-{side}-xxs |
| xs | 0.5rem (8px) | .margin-{side}-xs |
.padding-{side}-xs |
| sm | 1rem (16px) | .margin-{side}-sm |
.padding-{side}-sm |
| md | 1.5rem (24px) | .margin-{side}-md |
.padding-{side}-md |
| lg | 2rem (32px) | .margin-{side}-lg |
.padding-{side}-lg |
| xl | 3rem (48px) | .margin-{side}-xl |
.padding-{side}-xl |
| xxl | 4rem (64px) | .margin-{side}-xxl |
.padding-{side}-xxl |
Examples
HTML
<!-- Example 1: Applying margin -->
<div class="margin-md">Content with medium margin</div>
<!-- Example 2: Applying padding-bottom -->
<div class="padding-bottom-lg">Content with large bottom padding</div>
<!-- Example 3: Applying margin-left -->
<div class="margin-left-sm">Content with small left margin</div>
<!-- Example 4: Remove padding-right -->
<div class="padding-right-none">Content with no right padding</div>
Spacing helpers with breakpoints
Spacing utilities that apply to all breakpoints, from 'xs' to 'xl', do not include a breakpoint abbreviation. These classes are applied from min-width: 0 and up, making them not bound by a media query. However, the remaining breakpoints include a breakpoint abbreviation in their naming convention.
Classes with responsive breakpoints follow the format {property}-{breakpoint}-{size} when applying spacing to the entire element, or {property}-{sides}-{breakpoint}-{size} when applying spacing to a subset of the element's sides.
Where breakpoint is one of:
- xs: for extra small screens (0px and up)
- sm: for small screens (576px and up)
- md: for medium screens (768px and up)
- lg: for large screens (992px and up)
- xl: for extra large screens (1200px and up)
Apply spacing to all sides
| Breakpoint | Minimum width | Class (margin) | Class (padding) |
|---|---|---|---|
| xs | 0px | .margin-xs-{size} |
.padding-xs-{size} |
| sm | 576px | .margin-sm-{size} |
.padding-sm-{size} |
| md | 768px | .margin-md-{size} |
.padding-md-{size} |
| lg | 992px | .margin-lg-{size} |
.padding-lg-{size} |
| xl | 1200px | .margin-xl-{size} |
.padding-xl-{size} |
Apply spacing to specific sides
| Breakpoint | Minimum width | Class (margin) | Class (padding) |
|---|---|---|---|
| xs | 0px | .margin-{sides}-xs-{size} |
.padding-{sides}-xs-{size} |
| sm | 576px | .margin-{sides}-sm-{size} |
.padding-{sides}-sm-{size} |
| md | 768px | .margin-{sides}-md-{size} |
.padding-{sides}-md-{size} |
| lg | 992px | .margin-{sides}-lg-{size} |
.padding-{sides}-lg-{size} |
| xl | 1200px | .margin-{sides}-xl-{size} |
.padding-{sides}-xl-{size} |
Examples
HTML
<!-- Example 1: Applying padding for large screens and up -->
<div class="padding-lg-xl">Content with extra large padding on large screens and up</div>
<!-- Example 2: Applying margin-bottom and padding-left for medium screens and up -->
<div class="margin-bottom-sm-md padding-left-sm-md">Content with small margin bottom and padding left on medium screens and up</div>
Spacing tokens
You can incorporate spacing tokens into any additional CSS or SASS that you create to ensure consistency with the design system.