Skip to content
Designer Decisions

Space Examples

Space values

SpaceValue
<ShowDecision d="Space Unit" viz="square" />
8px

Space scales

SpaceScale (default viz / xs size)
<ShowDecision d="Layout Space Scale" size="xs" />
8px
16px
32px
64px
128px
SpaceScale (vertical bar viz)
<ShowDecision d="Layout Rhythm Scale" viz="bar-v" />
32px
48px
72px
108px
SpaceScale (square viz vs circle viz)
<ShowDecision d="Sizing Space Scale" viz="square" />
<ShowDecision d="Sizing Space Scale" viz="circle" />
32px
48px
72px
108px
32px
48px
72px
108px

Cards

SpaceValue (DecisionCard / model and params shown)
<ShowDecisionCard d="Space Unit" model params>
Space Unit
8px

Base unit for space scales

Model:

space-value/explicit

Params:

  • value

    8

SpaceScale (DecisionCard / column layout)
<ShowDecisionCard d="Sizing Space Scale" layout={["column","row"]}>
Sizing Space Scale
32px
48px
72px
108px

Space scale for component sizing

See also