joyent-portal/packages/ui-toolkit/src/grids

Large Grid

const big = require('./big.svg');

<img
  style={{
    maxWidth: '100%',
    marginTop: 22,
    marginBottom: 40
  }}
  src={big}
/>;

Medium Grid

const medium = require('./medium.svg');

<img
  style={{
    maxWidth: '100%',
    marginTop: 22,
    marginBottom: 40
  }}
  src={medium}
/>;

Small Grid

const small = require('./small.svg');

<img
  style={{
    maxWidth: '100%',
    marginTop: 22,
    marginBottom: 40
  }}
  src={small}
/>;

Baseline & Spacing

Most of the horizontal spacing between different elements and components is derived from 6 px. For example, the most common horizontal distance between elements of a component or components is 18 px. Another, less frequent, measurement is 12 px. The choice between 6, 12 or 18 px is based on visual and functional proximity of objects.

const baseline = require('./baseline.svg');

<img
  style={{
    maxWidth: '100%',
    marginTop: 22,
    marginBottom: 40
  }}
  src={baseline}
/>;