Foundations

Spacing

Spacing is the standard padding and margin size that one can adjust to customize the layout of an interface.
View source
Content
1
// red is margin
2
// blue is padding
3
// highlight-padding and highlight-margin classes are only available on the Plasma website
4


5
export default () => (
6
    <div className="highlight-padding highlight-margin">
7
        <div className="p2 m2">Content</div>
8
    </div>
9
);

The spacing mechanism

Spacing can be applied to any element by setting one or more of the spacing classes.

Considering N is a level (see the available spacing levels in the section bellow), here are the 7 different targets supported by our spacing mechanism.

  • pN: uniform (all sides)
  • pyN: vertical (top and bottom sides)
  • pxN: horizontal (left and right sides)
  • ptN: top side
  • prN: right side
  • pbN: bottom side
  • plN: left side

The spacing levels

With each level, the size of the spacing increases proportionally.

Only padding is showcased in the section below for the sake of simplicity, but the exact same classes exist for the margin as well. Just replace the p by a m to apply a spacing to the margin.

Level 1
.p1
.py1
.px1
.pt1
.pr1
.pb1
.pl1
Level 2
.p2
.py2
.px2
.pt2
.pr2
.pb2
.pl2
Level 3
.p3
.py3
.px3
.pt3
.pr3
.pb3
.pl3
Level 4
.p4
.py4
.px4
.pt4
.pr4
.pb4
.pl4
Level 5
.p5
.py5
.px5
.pt5
.pr5
.pb5
.pl5

No guidelines exist for Spacing yet.

Create guidelines