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.

Spacer utility classes

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
html
            <div class="rc-padding--lg">Padding large</div>
        
Padding medium
html
            <div class="rc-padding--md">Padding medium</div>
        
Padding small
html
            <div class="rc-padding--sm">Padding small</div>
        
Padding extra small
html
            <div class="rc-padding--xs">Padding extra small</div>
        
Padding none
html
            <div class="rc-padding--none">Padding none</div>
        

Padding - horizontal

Padding horizontal large
html
            <div class="rc-padding-x--lg">Padding horizontal large</div>
        
Padding horizontal medium
html
            <div class="rc-padding-x--md">Padding horizontal medium</div>
        
Padding horizontal small
html
            <div class="rc-padding-x--sm">Padding horizontal extra small</div>
        
Padding horizontal extra small
html
            <div class="rc-padding-x--xs">Padding horizontal extra small</div>
        
Padding horizontal none
html
            <div class="rc-padding-x--none">Padding horizontal none</div>
        

Padding - vertical

Padding vertical large
html
            <div class="rc-padding-y--lg">Padding vertical large</div>
        
Padding vertical medium
html
            <div class="rc-padding-y--md">Padding vertical medium</div>
        
Padding vertical small
html
            <div class="rc-padding-y--sm">Padding vertical small</div>
        
Padding vertical extra small
html
            <div class="rc-padding-y--xs">Padding vertical extra small</div>
        
Padding vertical none
html
            <div class="rc-padding-y--none">Padding vertical none</div>
        

Padding - direction and size specific

As well as these general classe 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
html
            <div class="rc-padding-bottom--lg">Padding bottom large</div>
        
Padding top medium
html
            <div class="rc-padding-top--md">Padding top medium</div>
        
Padding left small
html
            <div class="rc-padding-left--sm">Padding left small</div>
        
Padding right extra small
html
            <div class="rc-padding-right--xs">Padding right extra small</div>
        
Padding right none
html
            <div class="rc-padding-right--none">Padding right none</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
html
            <div class="rc-padding-bottom--lg--mobile">Padding bottom large on screens below 769px</div>
        
Padding top medium on screens wider than 769px
html
            <div class="rc-padding-top--md--desktop">Padding top medium on screens wider than 769px</div>
        
Padding horizontal small on screens wider than 769px
html
            <div class="rc-padding-x--sm--desktop">Padding horizontal small on screens wider than 769px</div>
        
Padding vertical extra small on screens below 769px
html
            <div class="rc-padding-y--xs--mobile">Padding vertical extra small on screens below 769px</div>
        
Padding right none on screens wider than 769px
html
            <div class="rc-padding-right--none--desktop">Padding right none on screens wider than 769px</div>
        

Margin - all

Margin large
html
            <div class="rc-margin--lg">Margin large</div>
        
Margin medium
html
            <div class="rc-margin--md">Margin medium</div>
        
Margin small
html
            <div class="rc-margin--sm">Margin small</div>
        
Margin extra small
html
            <div class="rc-margin--xs">Margin extra small</div>
        
Margin none
html
            <div class="rc-margin--none">Margin none</div>
        

Margin - horizontal

Margin horizontal large
html
            <div class="rc-margin-x--lg">Margin horizontal large</div>
        
Margin horizontal medium
html
            <div class="rc-margin-x--md">Margin horizontal medium</div>
        
Margin horizontal small
html
            <div class="rc-margin-x--sm">Margin horizontal small</div>
        
Margin horizontal extra small
html
            <div class="rc-margin-x--xs">Margin horizontal extra small</div>
        
Margin horizontal none
html
            <div class="rc-margin-x--none">Margin horizontal none</div>
        

Margin - vertical

Margin vertical large
html
            <div class="rc-margin-y--lg">Margin vertical large</div>
        
Margin vertical medium
html
            <div class="rc-margin-y--md">Margin vertical medium</div>
        
Margin vertical small
html
            <div class="rc-margin-y--sm">Margin vertical small</div>
        
Margin vertical extra small
html
            <div class="rc-margin-y--xs">Margin vertical extra small</div>
        
Margin vertical none
html
            <div class="rc-margin-y--none">Margin vertical none</div>
        

Margin - direction and size specific

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 bottom large
html
            <div class="rc-margin-bottom--lg">Margin bottom large</div>
        
Margin top medium
html
            <div class="rc-margin-top--md">Margin top medium</div>
        
Margin left small
html
            <div class="rc-margin-left--sm">Margin left small</div>
        
Margin right extra small
html
            <div class="rc-margin-right--xs">Margin right extra small</div>
        
Margin right none
html
            <div class="rc-margin-right--none">Margin right none</div>
        

Margin - screen 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 on screens below 769px
html
            <div class="rc-margin-bottom--lg--mobile">Margin bottom large on screens below 769px</div>
        
Margin top medium on screens wider than 769px
html
            <div class="rc-margin-top--md--desktop">Margin top medium on screens wider than 769px</div>
        
Margin horizontal small on screens wider than 769px
html
            <div class="rc-margin-x--sm--desktop">Margin horizontal small on screens wider than 769px</div>
        
Margin vertical extra small on screens below 769px
html
            <div class="rc-margin-y--xs--mobile">Margin vertical extra small on screens below 769px</div>
        
Margin right none on screens wider than 769px
html
            <div class="rc-margin-right--none--desktop">Margin right none on screens wider than 769px</div>
        

Width helpers

Utility classes for element widths.

Full width
html
            <div class="rc-full-width">Full width</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
html
            <div class="rc-vertical-align">vertical-align</div>
        
center-align
html
            <div class="rc-center-align">center-align</div>
        

Sticky classes

Classes used to align elements within their parent container

stick-left
html
            <div class="rc-stick-left">stick-left</div>
        
stick-right
html
            <div class="rc-stick-right">stick-right</div>
        

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo