Styles - Spacing

We've followed the Government Design System's approach to spacing pages and setting the width of page elements so that they are consistent, responsive and clear. But we have adapted it for HS2-specific styles.

The responsive spacing scale

We use a responsive spacing scale which adapts based on screen size. For example, if you apply spacing unit 9 to a margin, it will be 64px on large screens and 56px on small screens.

Spacing override classes

Occasionally, you might need to make minor adjustments like adding spacing or removing it from elements of your design. You can use the responsive spacing override classes for this.

Using the override classes

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, hs2-u-margin-9 will set a margin of 64px on large screens and 56px on small screens.

To add padding use -padding instead of -margin.

If you want to add the margin or padding in a particular direction, add left for left, right for right, top for top, or bottom for bottom. For example, -margin-top will set margin-top, -padding-right 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 spacing unit value you want to apply. For example, in hs2-u-margin-9, the -9 represents 9 on the spacing scale.

Examples

<div class="spacing-example">
  <div class="hs2-u-padding-bottom-9"></div>
  <div class="hs2-u-padding-bottom-8"></div>
  <div class="hs2-u-padding-bottom-7"></div>
  <div class="hs2-u-padding-bottom-6"></div>
  <div class="hs2-u-padding-bottom-5"></div>
  <div class="hs2-u-padding-bottom-4"></div>
  <div class="hs2-u-padding-bottom-3"></div>
  <div class="hs2-u-padding-bottom-2"></div>
  <div class="hs2-u-padding-bottom-1"></div>
</div>

<p class="hs2-u-margin-bottom-9">A paragraph with an overridden margin-bottom.</p>
<p class="hs2-u-margin-bottom-8">A paragraph with an overridden margin-bottom.</p>
<p class="hs2-u-margin-bottom-7">A paragraph with an overridden margin-bottom.</p>
<p class="hs2-u-margin-bottom-6">A paragraph with an overridden margin-bottom.</p>
<p class="hs2-u-margin-bottom-5">A paragraph with an overridden margin-bottom.</p>
<p class="hs2-u-margin-bottom-4">A paragraph with an overridden margin-bottom.</p>
<p class="hs2-u-margin-bottom-3">A paragraph with an overridden margin-bottom.</p>
<p class="hs2-u-margin-bottom-2">A paragraph with an overridden margin-bottom.</p>
<p class="hs2-u-margin-bottom-1">A paragraph with an overridden margin-bottom.</p>
<p class="hs2-u-margin-bottom-0">A paragraph with an overridden margin-bottom.</p>

Spacing on custom components

If you’re building your own components and want to reference the spacing scale directly in your SCSS file, you can use the spacing scale through a mixin or a function.

Using the static spacing function

If you want to use static values that will not change based on breakpoints you can reference the static spacing scale function like this:

padding-top: hs2-spacing(6)

Using the responsive spacing mixin

If you want to use the responsive spacing scale you can reference the mixin.

For example:

• use @include hs2-responsive-margin(6, "bottom"); for 40px margin-bottom on large screens and 32px on small screens

• use @include hs2-responsive-padding(6); for 40px padding on all sides on large screens and 32px on small screens

Width override classes

If you need to constrain the width of an element independently of the grid system, you can use width override classes.

As with the spacing override classes, the width override classes start with hs2-u-. The second part of the class name indicates the width on larger screen sizes.

For example:

• hs2-u-width-one-half will apply a width of 50% and

• hs2-u-width-two-thirds will apply a width of 66.66%.

<h3 class="hs2-heading-m">Full</h3>

<div class="hs2-form-group">
  <label class="hs2-label" for="full-name">
    Full name
  </label>
  <input class="hs2-input hs2-u-width-full" id="full-name" name="full-name" type="text">
</div>

<h3 class="hs2-heading-m">Three-quarters</h3>

<div class="hs2-form-group">
  <label class="hs2-label" for="full-name">
    Full name
  </label>
  <input class="hs2-input hs2-u-width-three-quarters" id="full-name" name="full-name" type="text">
</div>

<h3 class="hs2-heading-m">Two-thirds</h3>

<div class="hs2-form-group">
  <label class="hs2-label" for="full-name">
    Full name
  </label>
  <input class="hs2-input hs2-u-width-two-thirds" id="full-name" name="full-name" type="text">
</div>

<h3 class="hs2-heading-m">One-half</h3>

<div class="hs2-form-group">
  <label class="hs2-label" for="full-name">
    Full name
  </label>
  <input class="hs2-input hs2-u-width-one-half" id="full-name" name="full-name" type="text">
</div>

<h3 class="hs2-heading-m">One-third</h3>

<div class="hs2-form-group">
  <label class="hs2-label" for="full-name">
    Full name
  </label>
  <input class="hs2-input hs2-u-width-one-third" id="full-name" name="full-name" type="text">
</div>

<h3 class="hs2-heading-m">One-quarter</h3>

<div class="hs2-form-group">
  <label class="hs2-label" for="full-name">
    Full name
  </label>
  <input class="hs2-input hs2-u-width-one-quarter" id="full-name" name="full-name" type="text">
</div>