Spacer

Spacer component adds space between surrounding content. It has two orientations — horizontal (default) and vertical. It inherits parent color, so can be placed inside the Cell to increase the height of it, or outside of it, to increase the spacing between the Cells.

Spacer component can be several sizes:

  • Small — 2px
  • Medium — 4px
  • Default — 8px
  • Large — 12px
  • X-Large — 16px
  • XX-Large — 24px
  • XXX-Large — 32px

You can also have multiple Spacer components.

Specifications

// Base

$spacer-sizes: (
  small         : unit(0.5),           // 2
  medium        : unit(1),             // 4
  default       : unit(2),             // 8
  large         : unit(3),             // 12
  x-large       : unit(4),             // 16
  xx-large      : unit(6),             // 24
  xxx-large     : unit(8),             // 32
);

API

name type default
orientation horizontal / vertical horizontal
size small / medium / default / large / x-large / xx-large / xxx-large default