Versions Compared

Version Old Version 7 New Version 8
Changes made by

Nick Harris

Nick Harris

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents
minLevel1
maxLevel2
typeflat
separatorpipe
Panel
panelIconId1f517
panelIcon:link:
panelIconText🔗
bgColor#F4F5F7

Figma component

Panel
panelIconId1f517
panelIcon:link:
panelIconText🔗
bgColor#F4F5F7

Storybook component

The Spacer is a simple invisible utility component that allows you to space out content when creating your own components or blocks. Spacer’s sizes are tied to css variables which can be overridden, changing the spacing across the whole site.

Usage

Tip

Do’s

  • Use a spacer to create consistence spacing when building your own components or blocks.

Warning

Dont’s

  • Use a spacer when you could adjust a components individual style by using the classNames prop or changing a components css variables.

Anatomy

Item

Component type

Content type

Notes

1

Spacer

n/a

n/a

Visual style

n/a

Spacer css variable

Default value

--cds-space-0

0

--cds-space-1

0.25rem

--cds-space-2

0.5rem

--cds-space-3

1rem

--cds-space-4

1.25rem

--cds-space-5

1.5rem

--cds-space-6

2rem

--cds-space-7

3rem

--cds-space-8

4rem

--cds-space-9

6rem

--cds-space-10

9rem

Editorial

n/a

Behaviour

n/a

Accessibility

n/a