Styles - Spacing

The HSE Design System is based on the NHS and UK Government Design Systems. We have adapted their styles to meet our needs.

Responsive spacing scale

We use a responsive spacing scale which changes based on screen size. So if you apply “spacing unit 9” it will be 64px on large screens and 56px on small screens.

Spacing units

We use a minimum unit of 4 to calculate spacing, and move to units of 8 from the second point on the scale. This gives us the flexibility we need in our layouts.

Spacing override classes

Sometimes you need to adjust the normal spacing on an element in your design. In our code, you can use responsive spacing override classes for this.

Using override classes in code

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, hse-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 hse-u-margin-9, the -9 represents 9 on the spacing scale.

Examples

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

<p class="hse-u-margin-bottom-9">A paragraph with an overridden margin-bottom.</p>
<p class="hse-u-margin-bottom-8">A paragraph with an overridden margin-bottom.</p>
<p class="hse-u-margin-bottom-7">A paragraph with an overridden margin-bottom.</p>
<p class="hse-u-margin-bottom-6">A paragraph with an overridden margin-bottom.</p>
<p class="hse-u-margin-bottom-5">A paragraph with an overridden margin-bottom.</p>
<p class="hse-u-margin-bottom-4">A paragraph with an overridden margin-bottom.</p>
<p class="hse-u-margin-bottom-3">A paragraph with an overridden margin-bottom.</p>
<p class="hse-u-margin-bottom-2">A paragraph with an overridden margin-bottom.</p>
<p class="hse-u-margin-bottom-1">A paragraph with an overridden margin-bottom.</p>
<p class="hse-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: hse-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 hse-responsive-margin(6, "bottom"); for 40px margin-bottom on large screens and 32px on small screens

• use @include hse-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 hse-u-. The second part of the class name indicates the width on larger screen sizes.

For example:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Updated: September 2023