Notice: the Design Language has been migrated - You will find the new URL to call the assets from the current Design Language. See more details regarding this Migration

Spacers

To ensure consistent spacing we provide spacer blocks as part of the UI Kit, for smaller and larger displays, that can be used by designers to correctly space components and elements.

Larger spacers

Larger spacers are usually saved for padding or margins inside or between larger components which can normally make up most or the entirety of a page layout such as hero banners or content components.

80px

Normally for the vertical padding of components used on larger displays such as the Content Component

40px

Normally for the vertical padding of components for use on smaller displays such as the Content Component or for components that don't require as much impact or white space as their larger variants.

32px

Used for the spacing between headings, typography and buttons on larger displays, based off of the 8px baseline grid. This spacer is also commonly used for padding between components such as Cards on larger displays.

Smaller spacers

24px

An option for less space between headings, typography and buttons when space is at a premium such as within Cards.

16px

Normally used for spacing between headings, typography and buttons on smaller displays, based off of the 8px baseline grid. This spacer is also commonly used for padding between components such as Cards on smaller displays or Cards at their smallest on larger displays (Cards in a 6 Col layout). It is also the gutter width for smaller displays.

8px

Normally used for small spacing between or the padding within certain elements such as tags, social channel icon lists or a button and secondary hyperlink.

Padding

Spacing is built into most Design Language components but extra utility classes are provided for flexibility. The grey border and background are to illustrate the difference between margins and padding spacers.

Padding large

<div class="rc-padding--lg" style="border: 2px dashed #cecece; position: relative;">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Padding large</div>
</div>

Padding medium

<div class="rc-padding--md" style="border: 2px dashed #cecece; position: relative;">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Padding medium</div>
</div>

Padding small

<div class="rc-padding--sm" style="border: 2px dashed #cecece; position: relative;">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Padding small</div>
</div>

Padding extra small

<div class="rc-padding--xs" style="border: 2px dashed #cecece; position: relative;">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Padding extra small</div>
</div>

Padding none

<div class="rc-padding--none" style="border: 2px dashed #cecece; position: relative;">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Padding none</div>
</div>

Padding - horizontal

Padding horizontal large

<div class="rc-padding-x--lg" style="border: 2px dashed #cecece; position: relative;">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Padding horizontal large</div>
</div>

Padding horizontal medium

<div class="rc-padding-x--md" style="border: 2px dashed #cecece; position: relative;">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Padding horizontal medium</div>
</div>

Padding horizontal small

<div class="rc-padding-x--sm" style="border: 2px dashed #cecece; position: relative;">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Padding horizontal small</div>
</div>

Padding horizontal extra small

<div class="rc-padding-x--xs" style="border: 2px dashed #cecece; position: relative;">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Padding horizontal extra small</div>
</div>

Padding horizontal none

<div class="rc-padding-x--none" style="border: 2px dashed #cecece; position: relative;">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Padding horizontal none</div>
</div>

Padding - vertical

Padding vertical large

<div class="rc-padding-y--lg" style="border: 2px dashed #cecece; position: relative;">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Padding vertical large</div>
</div>

Padding vertical medium

<div class="rc-padding-y--md" style="border: 2px dashed #cecece; position: relative;">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Padding vertical medium</div>
</div>

Padding vertical small

<div class="rc-padding-y--sm" style="border: 2px dashed #cecece; position: relative;">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Padding vertical small</div>
</div>

Padding vertical extra small

<div class="rc-padding-y--xs" style="border: 2px dashed #cecece; position: relative;">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Padding vertical extra small</div>
</div>

Padding vertical none

<div class="rc-padding-y--none" style="border: 2px dashed #cecece; position: relative;">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Padding vertical none</div>
</div>

Padding - direction and size specific

As well as these general classes you can specify a single direction and padding size. The class pattern is: rc-padding-[bottom, top, left, right]--[xs, sm, md, lg] Some examples are shown below

Padding bottom large

<div class="rc-padding-bottom--lg" style="border: 2px dashed #cecece; position: relative;">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Padding bottom large</div>
</div>

Padding top medium

<div class="rc-padding-top--md" style="border: 2px dashed #cecece; position: relative;">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Padding top medium</div>
</div>

Padding left small

<div class="rc-padding-left--sm" style="border: 2px dashed #cecece; position: relative;">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Padding left small</div>
</div>

Padding right extra small

<div class="rc-padding-right--xs" style="border: 2px dashed #cecece; position: relative;">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Padding right extra small</div>
</div>

Padding right none

<div class="rc-padding-right--none" style="border: 2px dashed #cecece; position: relative;">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Padding right none</div>
</div>

Padding - screen size specific

You can specify on what breakpoints, spacing is going to be used (mobile or desktop). You can modify any padding spacing class. The class pattern is: [rc padding class]--[mobile, desktop]. Some examples are shown below

Padding bottom large on screens below 769px

<div class="rc-padding-bottom--lg--mobile" style="border: 2px dashed #cecece; position: relative;">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Padding bottom large on screens below 769px</div>
</div>

Padding top medium on screens wider than 769px

<div class="rc-padding-top--md--desktop" style="border: 2px dashed #cecece; position: relative;">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Padding top medium on screens wider than 769px</div>
</div>

Padding horizontal small on screens wider than 769px

<div class="rc-padding-x--sm--desktop" style="border: 2px dashed #cecece; position: relative;">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Padding horizontal small on screens wider than 769px</div>
</div>

Padding vertical extra small

<div class="rc-padding-y--xs" style="border: 2px dashed #cecece; position: relative;">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Padding vertical extra small</div>
</div>

Padding right none on screens wider than 769px

<div class="rc-padding-right--none--desktop" style="border: 2px dashed #cecece; position: relative;">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Padding right none on screens wider than 769px</div>
</div>

Margin

Margin large

<div class="rc-margin--lg" style="">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Margin large</div>
</div>

Margin medium

<div class="rc-margin--md" style="">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Margin medium</div>
</div>

Margin small

<div class="rc-margin--sm" style="">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Margin small</div>
</div>

Margin extra small

<div class="rc-margin--xs" style="">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Margin extra small</div>
</div>

Margin none

<div class="rc-margin--none" style="">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Margin none</div>
</div>

Margin - horizontal

Margin horizontal large

<div class="rc-margin-x--lg" style="">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Margin horizontal large</div>
</div>

Margin horizontal medium

<div class="rc-margin-x--md" style="">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Margin horizontal medium</div>
</div>

Margin horizontal small

<div class="rc-margin-x--sm" style="">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Margin horizontal small</div>
</div>

Margin horizontal extra small

<div class="rc-margin-x--xs" style="">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Margin horizontal extra small</div>
</div>

Margin horizontal none

<div class="rc-margin-x--none" style="">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Margin horizontal none</div>
</div>

Margin - vertical

As well as these general classes you can specify a single direction and margin size. The class pattern is: rc-margin-[bottom, top, left, right]--[xs, sm, md, lg] Some examples are shown below

Margin vertical large

<div class="rc-margin-y--lg" style="">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Margin vertical large</div>
</div>

Margin vertical medium

<div class="rc-margin-y--md" style="">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Margin vertical medium</div>
</div>

Margin vertical small

<div class="rc-margin-y--sm" style="">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Margin vertical small</div>
</div>

Margin vertical extra small

<div class="rc-margin-y--xs" style="">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Margin vertical extra small</div>
</div>

Margin vertical none

<div class="rc-margin-y--none" style="">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Margin vertical none</div>
</div>

Margin - direction and size specific

You can specify on what breakpoints, spacing is going to be used (mobile or desktop). You can modify any margin spacing class. The class pattern is: [rc margin class]--[mobile, desktop]. Some examples are shown below

Margin bottom large

<div class="rc-margin-bottom--lg" style="">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Margin bottom large</div>
</div>

Margin top medium

<div class="rc-margin-top--md" style="">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Margin top medium</div>
</div>

Margin left small

<div class="rc-margin-left--sm" style="">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Margin left small</div>
</div>

Margin right extra small

<div class="rc-margin-right--xs" style="">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Margin right extra small</div>
</div>

Margin right none

<div class="rc-margin-right--none" style="">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Margin right none</div>
</div>

Margin - screen size specific

Margin bottom large on screens below 769px

<div class="rc-margin-bottom--lg--mobile" style="">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Margin bottom large on screens below 769px</div>
</div>

Margin top medium on screens wider than 769px

<div class="rc-margin-top--md--desktop" style="">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Margin top medium on screens wider than 769px</div>
</div>

Margin horizontal small on screens wider than 769px

<div class="rc-margin-x--sm--desktop" style="">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Margin horizontal small on screens wider than 769px</div>
</div>

Margin vertical extra small

<div class="rc-margin-y--xs" style="">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Margin vertical extra small</div>
</div>

Margin right none on screens wider than 769px

<div class="rc-margin-right--none--desktop" style="">
  <div class="rc-bg-colour--brand4 rc-border-all rc-border-colour--interface rc-text--center">Margin right none on screens wider than 769px</div>
</div>

Alignment helpers

Utility classes position elements in alignment to their relative container. This is different from positioning inline block with vertical align etc.

Vertical align

<div class="rc-padding--sm rc-vertical-align">Vertical align</div>

Horizontal align

<div class="rc-padding--sm rc-horizontal-align">Horizontal align</div>

Center align

<div class="rc-padding--sm rc-center-align">Center align</div>

Sticky helpers

Classes used to align elements within their parent container.

Stick left

<div class="rc-padding--sm rc-stick-left">Stick left</div>

Stick right

<div class="rc-padding--sm rc-stick-right">Stick right</div>

Stick top

<div class="rc-padding--sm rc-stick-top">Stick top</div>

Stick bottom

<div class="rc-padding--sm rc-stick-bottom">Stick bottom</div>