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 |
