Space

The distance between elements and how these proportions affect design.

Usage

Spacing values are used for padding and margin throughout the design system and are relative to the standard type size of 1em/16px. Applying one spacing size consistently throughout a page will help bring visual consistency to its layout and components.

In the examples below, the gray shows padding and margin. These colors will not appear in your application.

Guidelines

• There are five built in spacing sizes:
  • Extra Small (4px, .25rem)
  • Small (8px, .5rem)
  • Medium (16px, 1rem)
  • Large (32px, 2rem)
  • Extra Large (64px, 4rem)

Variants

Inset

Inset spacing adds equal padding to all four sides of an element. Our Box component is a convenient way to apply this spacing style.

Inset Short

Inset Short behaves just like Inset, except the top and bottom padding is reduced by 50%. For example, Inset Short Small has 8px of padding on the left and right sides, but 4px padding on the top and bottom.

Inset Tall

Inset Tall behaves just like Inset, except the top and bottom padding is increased by 50%. For example, Inset Tall Small has 8px padding on the left and right sides, but 12px padding on the top and bottom.

Stack

Stack spacing adds margin to the bottom of elements.

Inline

Inline spacing proportions create consistent right margins to elements. Note that this utility only creates horizontal space. Use the Stack utility to include vertical space.

Misc Sizes

These are additional sizing proportions to supplement our existing XS-XL sizes:

• Misc A (24px, 1.5rem)
• Misc B (40px, 2.5rem)
• Misc C (48px, 3rem)
• Misc D (80px, 5rem)