Aura Design System

Spacing

Aura design system use Aura like a space unit:

  • An aura is equal to 13px.
  • Therefore 2 units would be equal to 26px.

The configuration of these units is free while keeping in whole units or half

(1 or 1.5).

Please keep this in mind

Each time when you are going to set a spacing in your app, respect spacing and beauty will never leave you.

Aura Design has some clase to handle the the most frequent cases of spacing.

const withSpacing = () =>  (
<div className="aura pad wall-pad inside-pad">
<p>Example</p>
</div>
)

Aura

Aura is a css class that has padding: aura.

Use in most cases for horizontal and vertical line jump and in few cases to make a box spacing.

const withVerticalJump = () =>  (
<div>
<span>Your bag is empty</span>
<div className="aura" />
</div>
)
const withHorizontalJump = () =>  (
<div className="aura">
<button> Cancel </button>
<span className="aura" />
<button>Accept </Button>
</div>
)
const withBoxSpacing = () =>  (
<header className="aura">
{/* ... */}
</header>
)

Pad

Pad is a css class that has two spacings:

  1. Desktop padding: (aura * 3.5) (aura) (aura * 1.5)
  2. Mobile padding: (aura * 2) aura aura aura

It is used in almost all cases of space for each section.

const withSectionSpacing = () =>  (
<section>
<div className="pad">
{/* ... */}
</div>
</section>
)

Wall pad

Aura is a css class that has padding: 0 aura.

Use in most cases for "personal space" of elements, left and right.

const withHorizontalSpacing = () =>  (
<span className="wall-pad">This is a tag</span>
)

Each object has a halo of light that surrounds it, it's aura.