Spacing

Spacing tokens based on the 8px unit.

Default

space-1
space-2
space-3
space-4
space-6
space-8 
<div class="ui-column ui-column--xs ui-items-center">
  <div style="width: var(--ui-space-1); height: var(--ui-space-4); background: var(--ui-color-primary)"></div>
  <small>space-1</small>
</div>
<div class="ui-column ui-column--xs ui-items-center">
  <div style="width: var(--ui-space-2); height: var(--ui-space-4); background: var(--ui-color-primary)"></div>
  <small>space-2</small>
</div>
<div class="ui-column ui-column--xs ui-items-center">
  <div style="width: var(--ui-space-3); height: var(--ui-space-4); background: var(--ui-color-primary)"></div>
  <small>space-3</small>
</div>
<div class="ui-column ui-column--xs ui-items-center">
  <div style="width: var(--ui-space-4); height: var(--ui-space-4); background: var(--ui-color-primary)"></div>
  <small>space-4</small>
</div>
<div class="ui-column ui-column--xs ui-items-center">
  <div style="width: var(--ui-space-6); height: var(--ui-space-4); background: var(--ui-color-primary)"></div>
  <small>space-6</small>
</div>
<div class="ui-column ui-column--xs ui-items-center">
  <div style="width: var(--ui-space-8); height: var(--ui-space-4); background: var(--ui-color-primary)"></div>
  <small>space-8</small>
</div>