Spacing-specific utilities

Used to adjust the default spacing between components Use with great care!

<type>-<breakpoint>-<direction>-<size>

type:

  • margin
  • padding

Breakpoint:

  • xs = small spartphones
  • sm = tablets
  • md = small desktop
  • lg = large desktop

Direction:

  • a = all
  • t = top
  • r = right
  • b = bottom
  • l = left
  • h = horizontal
  • v = vertical

Size:

  • n = none
  • s = small
  • m = medium
  • l = large
  • xl = extra-large

margins

paddings