Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents
minLevel1
maxLevel2
typeflat
separatorpipe
Panel
panelIconId1f517293035db-a48a-4d92-a968-8e1e6c7285d6
panelIcon:linkFigma:
panelIconText🔗:Figma:
bgColor#F4F5F7

Figma component

Panel
panelIconId1f517efa8ba60-1dab-4e63-8948-4ff4366ce32a
panelIcon:linkStorybook:
panelIconText🔗:Storybook:
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.

Table of Contents
minLevel1
maxLevel2
indent0
stylecircle
separatorpipe

Usage

Tip

Do’s

  • Enter text here

Dont’s

  • Enter text here

Anatomy

Warning

Insert image here

  • 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

Image Added

Item

Component type

Content type

Notes

1

Spacer

n/a

n/a

Visual style

Spacer css variable

Default value

--cds-space-0

0

--cds-space-1

0.25rem

--cds-space-2

0.5rem

--cds-space-3

Visual style

Editorial

Behaviour

Accessibility

Related components

Image Removed

Component

A very brief description

Image Removed

Component

A very brief description

Image Removed

Component

A very brief description

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