Spacing

Cedar provides easy-to-use, preset values to apply consistent spacing within and between components. Spacing tokens help maintain a cohesive visual style across all REI properties by:

  • Stores pixel values that are converted to the proper spacing unit for web and native platforms
  • Specifies a hierarchical and semantically defined system

Spacing symbols are available within the Cedar UI Toolkit and directly reflect the token names in the code ensuring a more efficient handoff between design and development.



Web and mobile spacing tokens have identical values but the naming pattern differs. For example, spacing token names are:

  • For Web: cdr-space-one-and-a-half-x
  • For Android: cdr_space_one_and_a_half_x
  • For iOS: CdrSpaceOneAndAHalfX

Default Spacing

These spacing values are in use throughout Cedar components and design recommendations. Use these tokens to keep consistent spatial concepts.

cdr-space-eighth-x 2px

cdr-space-quarter-x 4px

cdr-space-half-x 8px

cdr-space-three-quarter-x 12px

cdr-space-one-x 16px

cdr-space-one-and-a-half-x 24px

cdr-space-two-x 32px

cdr-space-four-x 64px


Base Inset

Use to create a consistent space within the content container:

  • All four sides have equal values
  • Base Inset token value is 16 pixels
  • Options range from 2 pixels to 64 pixels
  • Default spacing model
  • Examples: Buttons, Data Tables, and Tabs


content
cdr-space-inset-eighth-x 2px

content
cdr-space-inset-quarter-x 4px

content
cdr-space-inset-half-x 8px

content
cdr-space-inset-three-quarter-x 12px

content
cdr-space-inset-one-x 16px

content
cdr-space-inset-one-and-a-half-x 24px

content
cdr-space-inset-two-x 32px

content
cdr-space-inset-four-x 64px


Inset - Squish

Use to create a compact vertical space within the content container:

  • Reduces top and bottom padding by 50% relative to left and right padding
  • Options range from:
    • 0 to 32 pixels for top and bottom values
    • 2 pixels to 64 pixels for left and right values
  • Compact spacing model, best used with stacking lists or menu items
  • Examples: Compact versions for Accordion and Lists

content
cdr-space-inset-eighth-x-squish 0 2px
cdr-space-inset-eighth-x-squish-top-bottom 0
cdr-space-inset-eighth-x-squish-left-right 2px

content
cdr-space-inset-quarter-x-squish 2px 4px
cdr-space-inset-quarter-x-squish-top-bottom 2px
cdr-space-inset-quarter-x-squish-left-right 4px

content
cdr-space-inset-half-x-squish 4px 8px
cdr-space-inset-half-x-squish-top-bottom 4px
cdr-space-inset-half-x-squish-left-right 8px

content
cdr-space-inset-three-quarter-x-squish 6px 12px
cdr-space-inset-three-quarter-x-squish-top-bottom 6px
cdr-space-inset-three-quarter-x-squish-left-right 12px

content
cdr-space-inset-one-x-squish 8px 16px
cdr-space-inset-one-x-squish-top-bottom 8px
cdr-space-inset-one-x-squish-left-right 16px

content
cdr-space-inset-one-and-a-half-x-squish 12px 24px
cdr-space-inset-one-and-a-half-x-squish-top-bottom 12px
cdr-space-inset-one-and-a-half-x-squish-left-right 24px

content
cdr-space-inset-two-x-squish 16px 32px
cdr-space-inset-two-x-squish-top-bottom 16px
cdr-space-inset-two-x-squish-left-right 32px

content
cdr-space-inset-four-x-squish 32px 64px
cdr-space-inset-four-x-squish-top-bottom 32px
cdr-space-inset-four-x-squish-left-right 64px


Inset - Stretch

Use to create an expanded vertical space within the content container:

  • Increases top and bottom padding by 50% relative to left and right padding
  • Options range from:
    • 4 pixels to 96 pixels for top and bottom values
    • 2 pixels to 64 pixels for left and right values
  • Expanded spacing model, best used with multi-line input (textareas) or other form elements
  • Example: Large version for Inputs

content
cdr-space-inset-eighth-x-stretch 4px 2px
cdr-space-inset-eighth-x-stretch-top-bottom 4px
cdr-space-inset-eighth-x-stretch-left-right 2px

content
cdr-space-inset-quarter-x-stretch 6px 4px
cdr-space-inset-quarter-x-stretch-top-bottom 6px
cdr-space-inset-quarter-x-stretch-left-right 4px

content
cdr-space-inset-half-x-stretch 12px 8px
cdr-space-inset-half-x-stretch-top-bottom 12px
cdr-space-inset-half-x-stretch-left-right 8px

content
cdr-space-inset-three-quarter-x-stretch 18px 12px
cdr-space-inset-three-quarter-x-stretch-top-bottom 18px
cdr-space-inset-three-quarter-x-stretch-left-right 12px

content
cdr-space-inset-one-x-stretch 24px 16px
cdr-space-inset-one-x-stretch-top-bottom 24px
cdr-space-inset-one-x-stretch-left-right 16px

content
cdr-space-inset-one-and-a-half-x-stretch 36px 24px
cdr-space-inset-one-and-a-half-x-stretch-top-bottom 36px
cdr-space-inset-one-and-a-half-x-stretch-left-right 24px

content
cdr-space-inset-two-x-stretch 48px 32px
cdr-space-inset-two-x-stretch-top-bottom 48px
cdr-space-inset-two-x-stretch-left-right 32px

content
cdr-space-inset-four-x-stretch 96px 64px
cdr-space-inset-four-x-stretch-top-bottom 96px
cdr-space-inset-four-x-stretch-left-right 64px