Spacing

Spacing

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

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.

Concepts

The Cedar spacing system is built on three core concepts: inset, stack and inline. Whether applying space within a container or between two components, the included options make for easier and more consistent design decisions.

Inset

An inset is the space within a block from which elements—typography, images, icons, and more—are separated from the edge. Cedar offers different options for inset tokens including default, squish and stretch.

examples demoing spacing of inset, inset squish, and inset stretch

The base inset tokens have all four sides matching in value, resulting in consistent space within the container. The base inset is 16px with options ranging from 2px to 64px. Names are tied to the base 16 and increase or decrease accordingly.

inset examples

Inset-Squish

An inset-squish reduces top and bottom spacing by 50% relative to the default inset value, resulting in a vertically condensed visual display.

inset squish examples

Inset-Stretch

An inset-stretch increases top and bottom spacing by 50% relative to the default inset value, resulting in a vertically expanded visual display.

inset stretch examples

Stack vs Inline

Inset tokens are for space within a container, while stack and inline tokens adjust the space outside of a component/object. In CSS terms, think of inset as padding and stack & inline as margin.

image showing stack vs inline

Stack

Use stack tokens to separate components arranged vertically. The last instance of a component should omit this space. The default stack is 16px with options ranging from 2px to 64px. Names are tied to the base 16 and increase or decrease accordingly.

stack examples

Inline

Use inline tokens to separate elements arranged horizontally and that may wrap on the right. The last instance of a component should omit this space. The default inline is 16px with options ranging from 2px to 64px. Names are tied to the base 16 and increase or decrease accordingly.

inline examples

Generic Space Values

The specific options for inset may not fit every solution. When this is the case, use the generic spacing tokens to keep consistent spatial concepts and maintenance in code.

space-eighth-x: 2px
space-quarter-x: 4px
space-half-x: 8px
space-three-quarter-x: 12px
space-1-x: 16px
space-1-and-a-half-x: 24px
space-2-x: 32px
space-4-x: 64px