You appear to be using an unsupported browser, and it may not be able to display this site properly. You may wish to upgrade your browser.

Responsive spacing

Responsive spacing helps components and patterns adapt to screen size.

About the responsive spacing scale

Design System components and patterns use a responsive spacing scale so that spacing is consistent across different screen sizes.

The responsive spacing scale increases in multiples of 8 pixels because the Design System uses an 8-pixel grid for the sizing and spacing of components and patterns.

The scale has 10 spacing units (or ‘base units’) with sizes for small and large screens. Large screens are 768px and above.

The sizes of spacing scale units on small and large screens
Spacing unit Small screens Large screens
0 0px 0px
1 8px 8px
2 16px 16px
3 24px 24px
4 24px 32px
5 32px 40px
6 40px 48px
7 40px 56px
8 48px 64px
9 56px 72px

Responsive spacing Sass mixins

If you’re writing your own Sass or SCSS, you can use the Design System’s responsive spacing Sass mixins to add the responsive spacing rules to your CSS.

There are 2 mixins, one for margins and one for padding.

@include ds_responsive-margin(unit, direction, important, tuning)
@include ds_responsive-padding(unit, direction, important, tuning)

The parameters used in the mixins are:

  • unit – 0 to 9 in the spacing scale
  • direction – either top, bottom, left or right
  • important – optional boolean parameter to add the !important flag, which is false by default
  • tuning – optional parameter for small changes to the final value

Example of using a mixin

This is the SCSS code for the Design System’s horizontal rule, showing how to use the responsive spacing mixins.

/// [1] compensate for border
hr {
    border: none;
    border-top: 1px solid $ds_colour__border;

    @include ds_responsive-margin(4, top);
    @include ds_responsive-margin(4, bottom, false, -1px); /// [1]

The code output is:

hr { 
  border: none; 
  border-top: 1px solid #b3b3b3; 
  margin-top: 1.5rem; 
  margin-bottom: calc(1.5rem + -1px); 
@media (min-width: 768px) { 
  hr { 
    margin-top: 2rem; 
@media (min-width: 768px) { 
  hr { 
    margin-bottom: calc(2rem + -1px); 

Overriding spacing

We recommend that you follow the Design System’s spacing scale.

You can use spacing override classes if you need to make small changes like adding or removing margins or padding to elements.

Spacing override classes in the Design System CSS use the following structure.


The parameters are:

  • ds_ prefix – used in all the Design System's CSS classes
  • !_ – indicates that this is an override and uses the !important flag in the CSS
  • type – either margin or padding
  • direction – top, bottom, left, right or omit to apply to all directions
  • unit – 0 to 9 on the spacing scale

For example, use:

  • class="ds_!_margin--0" to remove all margins at all screen sizes
  • class="ds_!_margin--3" to apply a 24px margin on all sides of the element, on all screen sizes
  • class="ds_!_margin-bottom--8" to apply a 48px margin to the bottom of the element on small screens, increasing to 64px on larger screens
  • class="ds_!_padding-top--4" to apply 24px padding to the top of the element on small screens, increasing to 32px on larger screens

You can apply 2 or more spacing overrides together. For example,

class="ds_!_margin-bottom--4 ds_!_margin-top--2" applies margins of 2 spacing units on top and 4 spacing units on the bottom.

Back to top