Spacer

Consistent spacing makes clean and clear interface

This page contains information for Legion Phoenix (Version 2) design system. If you wish to see Legion UI (Version 1) design system please visit this link.

Usage

Spacers is good spacing systems are based on simple mathematical principles with increments that are visually. This toolkit gives designers and developers guidelines for effectively applying layout spacing, resulting in a more consistent application of space across our product. You can chek out the guideline for more detail description.

import { spacer } from "@legion-ui/core";

Preview

Token Name	Spacing	Pixels
`spacing1`	0.25 rem	4px
`spacing2`	0.5 rem	8px
`spacing3`	0.75 rem	12px
`spacing4`	1 rem	16px
`spacing5`	1.25 rem	20px
`spacing6`	1.5 rem	24px
`spacing7`	1.75 rem	28px
`spacing8`	2 rem	32px
`spacing9`	2.25 rem	36px
`spacing10`	2.5 rem	40px
`spacing11`	3 rem	48px
`spacing12`	3.5 rem	56px
`spacing13`	4 rem	64px
`spacing14`	5 rem	80px
`spacing15`	6 rem	96px
`spacing16`	7 rem	112px
`spacing17`	8 rem	128px
`spacing18`	9 rem	144px
`spacing19`	10 rem	160px
`spacing20`	11 rem	176px
`spacing21`	12 rem	192px
`spacing23`	14 rem	228px
`spacing22`	13 rem	208px
`spacing24`	15 rem	240px
`spacing25`	16 rem	256px
`spacing26`	18 rem	288px
`spacing27`	20 rem	320px
`spacing28`	24 rem	384px

There are two ways on how you can use the spacing toolkit. First by using Legion V2’s components and second by using HTML elements.

Component

The spacing toolkit can be used on other properties too, for example the pt, pb, pr, pl etc. Please refer to each component’s documentation page for more information.

<Box mb="spacing1">...</Box>
<Box mb="spacing2">...</Box>
<Box mb="spacing3">...</Box>
<Box mb="spacing4">...</Box>
<Box mb="spacing5">...</Box>
<Box mb="spacing6">...</Box>
<Box mb="spacing7">...</Box>
<Box mb="spacing8">...</Box>
<Box mb="spacing9">...</Box>

HTML

  <div style={{ marginBottom: `${spacer.spacing1}` }}>...</div>
  <div style={{ marginBottom: `${spacer.spacing2}` }}>...</div>
  <div style={{ marginBottom: `${spacer.spacing3}` }}>...</div>
  <div style={{ marginBottom: `${spacer.spacing4}` }}>...</div>
  <div style={{ marginBottom: `${spacer.spacing5}` }}>...</div>
  <div style={{ marginBottom: `${spacer.spacing6}` }}>...</div>
  <div style={{ marginBottom: `${spacer.spacing7}` }}>...</div>
  <div style={{ marginBottom: `${spacer.spacing8}` }}>...</div>
  <div style={{ marginBottom: `${spacer.spacing9}` }}>...</div>