Components

Just like your color scale, working from a defined spacing system allows you to work faster and more consistently. Consistent and scalable spacing helps you eliminate guesswork whilst designing and developing because you're designing with a limited set of options..

ChildMargin

Set the padding of all children of the element.
The dot (.) will set no value on the position.
Positions logic are: top, right, bottom, left.

Type	Default Value
string	null

<NVBlock ChildMargin="1 . ."></NVBlock>

<div class="cmt-1"></div>

<NVBlock ChildMargin="1"></NVBlock>

<div class="cm-1"></div>

<NVBlock ChildMargin="1 2"></NVBlock>

<div class="cmy-1 cmx-2"></div>

<NVBlock ChildMargin="1 2 3"></NVBlock>

<div class="cmt-1 cmx-2 cmb-3"></div>

<NVBlock ChildMargin="1 2 3 4"></NVBlock>

<div class="cmt-1 cmr-2 cmb-3 cml-4"></div>

ChildPadding

Set the padding of all children of the element.
The dot (.) will set no value on the position.
Positions logic are: top, right, bottom, left.

Type	Default Value
string	null

<NVBlock ChildPadding="1 . ."></NVBlock>

<div class="cpt-1"></div>

<NVBlock ChildPadding="1"></NVBlock>

<div class="cp-1"></div>

<NVBlock ChildPadding="1 2"></NVBlock>

<div class="cpy-1 cpx-2"></div>

<NVBlock ChildPadding="1 2 3"></NVBlock>

<div class="cpt-1 cpx-2 cpb-3"></div>

<NVBlock ChildPadding="1 2 3 4"></NVBlock>

<div class="cpt-1 cpr-2 cpb-3 cpl-4"></div>

CM

Shortcut for ChildMargin.

Type	Default Value
string	null

CMB

Add child margin bottom class.

Type	Default Value
string	null

<NVBlock CMB="1"></NVBlock>

<div class="cmb-1"></div>

CML

Add child margin left class.

Type	Default Value
string	null

<NVBlock CML="1"></NVBlock>

<div class="cml-1"></div>

CMR

Add child margin right class.

Type	Default Value
string	null

<NVBlock CMR="1"></NVBlock>

<div class="cmr-1"></div>

CMT

Add child margin top class.

Type	Default Value
string	null

<NVBlock CMT="1"></NVBlock>

<div class="cmt-1"></div>

CMX

Add child margin left and right class.

Type	Default Value
string	null

<NVBlock CMX="1"></NVBlock>

<div class="cmx-1"></div>

CMY

Add child margin top and bottom class.

Type	Default Value
string	null

<NVBlock CMY="1"></NVBlock>

<div class="cmy-1"></div>

CP

Shortcut for ChildPadding.

Type	Default Value
string	null

CPB

Add child padding bottom class.

Type	Default Value
string	null

<NVBlock CPB="1">
  <div>Child with padding bottom of 4px</div>
  <div>Child with padding bottom of 4px</div>
</NVBlock>

<div class="cpb-1">
  <div>Child with padding bottom of 4px</div>
  <div>Child with padding bottom of 4px</div>
</div>

CPL

Add child padding left class.

Type	Default Value
string	null

<NVBlock CPL="1">
  <div>Child with padding left of 4px</div>
  <div>Child with padding left of 4px</div>
</NVBlock>

<div class="cpl-1">
  <div>Child with padding left of 4px</div>
  <div>Child with padding left of 4px</div>
</div>

CPR

Add child padding right class.

Type	Default Value
string	null

<NVBlock CPR="1">
  <div>Child with padding right of 4px</div>
  <div>Child with padding right of 4px</div>
</NVBlock>

<div class="cpr-1">
  <div>Child with padding right of 4px</div>
  <div>Child with padding right of 4px</div>
</div>

CPT

Add child padding top class.

Type	Default Value
string	null

<NVBlock CPT="1">
  <div>Child with padding top of 4px</div>
  <div>Child with padding top of 4px</div>
</NVBlock>

<div class="cpt-1">
  <div>Child with padding top of 4px</div>
  <div>Child with padding top of 4px</div>
</div>

CPX

Add child padding left and right class.

Type	Default Value
string	null

<NVBlock CPX="1">
  <div>Child with padding left and right of 4px</div>
  <div>Child with padding left and right of 4px</div>
</NVBlock>

<div class="cpx-1">
  <div>Child with padding left and right of 4px</div>
  <div>Child with padding left and right of 4px</div>
</div>

CPY

Add child padding top and bottom class.

Type	Default Value
string	null

<NVBlock CPY="1">
  <div>Child with padding top and bottom of 4px</div>
  <div>Child with padding top and bottom of 4px</div>
</NVBlock>

<div class="cpy-1">
  <div>Child with padding left of 4px</div>
  <div>Child with padding left of 4px</div>
</div>

GCM

Shortcut for GrandChildMargin.

Type	Default Value
string	null

GCMB

Add grand child margin bottom class.

Type	Default Value
string	null

<NVBlock GCMB="1"></NVBlock>

<div class="gcmb-1"></div>

GCML

Add grand child margin left class.

Type	Default Value
string	null

<NVBlock GCML="1"></NVBlock>

<div class="gcml-1"></div>

GCMR

Add grand child margin right class.

Type	Default Value
string	null

<NVBlock GCMR="1"></NVBlock>

<div class="gcmr-1"></div>

GCMT

Add grand child margin top class.

Type	Default Value
string	null

<NVBlock GCMT="1"></NVBlock>

<div class="gcmt-1"></div>

GCMX

Add grand child margin left and right class.

Type	Default Value
string	null

<NVBlock GCMX="1"></NVBlock>

<div class="gcmx-1"></div>

GCMY

Add grand child margin top and bottom class.

Type	Default Value
string	null

<NVBlock GCMY="1"></NVBlock>

<div class="gcmy-1"></div>

GCP

Shortcut for GrandChildPadding.

Type	Default Value
string	null

GCPB

Add grand child padding bottom class.

Type	Default Value
string	null

<NVBlock GCPB="1">
  <div>
    <div>Grand Child with padding bottom of 4px</div>
    <div>Grand Child with padding bottom of 4px</div>
  </div>
</NVBlock>

<div class="gcpb-1">
  <div>
    <div>Grand Child with padding bottom of 4px</div>
    <div>Grand Child with padding bottom of 4px</div>
  </div>
</div>

GCPL

Add grand child padding left class.

Type	Default Value
string	null

<NVBlock GCPL="1">
  <div>
    <div>Grand Child with padding left of 4px</div>
    <div>Grand Child with padding left of 4px</div>
  </div>
</NVBlock>

<div class="gcpl-1">
  <div>
    <div>Grand Child with padding left of 4px</div>
    <div>Grand Child with padding left of 4px</div>
  </div>
</div>

GCPR

Add grand child padding right class.

Type	Default Value
string	null

<NVBlock GCPR="1">
  <div>
    <div>Grand Child with padding right of 4px</div>
    <div>Grand Child with padding right of 4px</div>
  </div>
</NVBlock>

<div class="gcpr-1">
  <div>
    <div>Grand Child with padding right of 4px</div>
    <div>Grand Child with padding right of 4px</div>
  </div>
</div>

GCPT

Add grand child padding top class.

Type	Default Value
string	null

<NVBlock GCPT="1">
  <div>
    <div>Grand Child with padding top of 4px</div>
    <div>Grand Child with padding top of 4px</div>
  </div>
</NVBlock>

<div class="gcpt-1">
  <div>
    <div>Grand Child with padding top of 4px</div>
    <div>Grand Child with padding top of 4px</div>
  </div>
</div>

GCPX

Add grand child padding left and right class.

Type	Default Value
string	null

<NVBlock GCPX="1">
  <div>
    <div>
      Grand Child with padding left and right of 4px
    </div>
    <div>
      Grand Child with padding left and right of 4px
    </div>
  </div>
</NVBlock>

<div class="gcpx-1">
  <div>
    <div>
      Grand Child with padding left and right of 4px
    </div>
    <div>
      Grand Child with padding left and right of 4px
    </div>
  </div>
</div>

GCPY

Add grand child padding top and bottom class.

Type	Default Value
string	null

<NVBlock GCPY="1">
  <div>
    <div>
      Grand Child with padding top and bottom of 4px
    </div>
    <div>
      Grand Child with padding top and bottom of 4px
    </div>
  </div>
</NVBlock>

<div class="gcpy-1">
  <div>
    <div>
      Grand Child with padding top and bottom of 4px
    </div>
    <div>
      Grand Child with padding top and bottom of 4px
    </div>
  </div>
</div>

GrandChildMargin

Set the margin of all children of children of the element.
The dot (.) will set no value on the position.
Positions logic are: top, right, bottom, left.

Type	Default Value
string	null

<NVBlock GrandChildMargin="1 . ."></NVBlock>

<div class="gcmt-1"></div>

<NVBlock GrandChildMargin="1"></NVBlock>

<div class="gcm-1"></div>

<NVBlock GrandChildMargin="1 2"></NVBlock>

<div class="gcmy-1 gcmx-2"></div>

<NVBlock GrandChildMargin="1 2 3"></NVBlock>

<div class="gcmt-1 gcmx-2 gcmb-3"></div>

<NVBlock GrandChildMargin="1 2 3 4"></NVBlock>

<div class="gcmt-1 gcmr-2 gcmb-3 gcml-4"></div>

GrandChildPadding

Set the padding of all children of children of the element.
The dot (.) will set no value on the position.
positions logic are: top, right, bottom, left.

Type	Default Value
string	null

<NVBlock GrandChildPadding="1 . ."></NVBlock>

<div class="gcpt-1"></div>

<NVBlock GrandChildPadding="1"></NVBlock>

<div class="gcp-1"></div>

<NVBlock GrandChildPadding="1 2"></NVBlock>

<div class="gcpy-1 gcpx-2"></div>

<NVBlock GrandChildPadding="1 2 3"></NVBlock>

<div class="gcpt-1 gcpx-2 gcpb-3"></div>

<NVBlock GrandChildPadding="1 2 3 4"></NVBlock>

<div class="gcpt-1 gcpr-2 gcpb-3 gcpl-4"></div>

M

Shortcut for Margin.

Type	Default Value
string	null

Margin

Set the margin of the element.
The dot (.) will set no value on the position.
Positions logic are: top, right, bottom, left.

Type	Default Value
string	null

<NVBlock Margin="1 . ."></NVBlock>

<div class="mt-1"></div>

<NVBlock Margin="1"></NVBlock>

<div class="m-1"></div>

<NVBlock Margin="1 2"></NVBlock>

<div class="my-1 mx-2"></div>

<NVBlock Margin="1 2 3"></NVBlock>

<div class="mt-1 mx-2 mb-3"></div>

<NVBlock Margin="1 2 3 4"></NVBlock>

<div class="mt-1 mr-2 mb-3 ml-4"></div>

<NVBlock Margin="1px . ."></NVBlock>

<div style="margin-top:1px;"></div>

<NVBlock Margin="1px">

<div style="margin-top:1px;margin-right:1px;margin-bottom:1px;margin-left:1px;"></div>

<NVBlock Margin="1px 2px"></NVBlock>

<div style="margin-top:1px;margin-right:2px;margin-bottom:1px;margin-left:2px;"></div>

<NVBlock Margin="1px 2px 3px"></NVBlock>

<div style="margin-top:1px;margin-right:2px;margin-bottom:3px;margin-left:2px;"></div>

<NVBlock Margin="1px 2px 3px 4px"></NVBlock>

<div style="margin-top:1px;margin-right:2px;margin-bottom:3px;margin-left:4px;"></div>

MB

Add margin bottom class.

Type	Default Value
string	null

<NVBlock MB="1"></NVBlock>

<div class="mb-1"></div>

ML

Add margin left class.

Type	Default Value
string	null

<NVBlock ML="1"></NVBlock>

<div class="ml-1"></div>

MR

Add margin right class.

Type	Default Value
string	null

<NVBlock MR="1"></NVBlock>

<div class="mr-1"></div>

MT

Add margin top class.

Type	Default Value
string	null

<NVBlock MT="1"></NVBlock>

<div class="mt-1"></div>

MX

Add margin left and right class.

Type	Default Value
string	null

<NVBlock MX="1"></NVBlock>

<div class="mx-1"></div>

MY

Add margin top and bottom class.

Type	Default Value
string	null

<NVBlock MY="1"></NVBlock>

<div class="my-1"></div>

P

Shortcut for Padding.

Type	Default Value
string	null

Padding

Set the padding of the element.
The dot (.) will set no value on the position.
Positions logic are: top, right, bottom, left.

Type	Default Value
string	null

<NVBlock Padding="1 . ."></NVBlock>

<div class="pt-1"></div>

<NVBlock Padding="1"></NVBlock>

<div class="p-1"></div>

<NVBlock Padding="1 2"></NVBlock>

<div class="py-1 px-2"></div>

<NVBlock Padding="1 2 3"></NVBlock>

<div class="pt-1 px-2 pb-3"></div>

<NVBlock Padding="1 2 3 4"></NVBlock>

<div class="pt-1 pr-2 pb-3 pl-4"></div>

<NVBlock Padding="1px . ."></NVBlock>

<div style="padding-top:1px;"></div>

<NVBlock Padding="1px">

<div style="padding-top:1px;padding-right:1px;padding-bottom:1px;padding-left:1px;"></div>

<NVBlock Padding="1em 2px">

<div style="padding-top:1em;padding-right:2px;padding-bottom:1em;padding-left:2px;"></div>

<NVBlock Padding="1% 2em 3px">

<div style="padding-top:1%;padding-right:2em;padding-bottom:3px;padding-left:2em;"></div>

<NVBlock Padding="1px 2px 3px 4px">

<div style="padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;"></div>

PB

Add padding bottom class.

Type	Default Value
string	null

<NVBlock PB="1"></NVBlock>

<div class="pb-1"></div>

PL

Add padding left class.

Type	Default Value
string	null

<NVBlock PL="1"></NVBlock>

<div class="pl-1"></div>

PR

Add padding right class.

Type	Default Value
string	null

<NVBlock PR="1"></NVBlock>

<div class="pr-1"></div>

PT

Add padding top class.

Type	Default Value
string	null

<NVBlock PT="1"></NVBlock>

<div class="pt-1"></div>

PX

Add padding left and right class.

Type	Default Value
string	null

<NVBlock PX="1"></NVBlock>

<div class="px-1"></div>

PY

Add padding top and bottom class.

Type	Default Value
string	null

<NVBlock PY="1"></NVBlock>

<div class="py-1"></div>