Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback

Foundation

Spacer

Consistent spacing makes clean and clear interface

banner-Spacer

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

SpaceToken NameSpacingPixels
spacing10.25 rem4px
spacing20.5 rem8px
spacing30.75 rem12px
spacing41 rem16px
spacing51.25 rem20px
spacing61.5 rem24px
spacing71.75 rem28px
spacing82 rem32px
spacing92.25 rem36px
spacing102.5 rem40px
spacing113 rem48px
spacing123.5 rem56px
spacing134 rem64px
spacing145 rem80px
spacing156 rem96px
spacing167 rem112px
spacing178 rem128px
spacing189 rem144px
spacing1910 rem160px
spacing2011 rem176px
spacing2112 rem192px
spacing2314 rem228px
spacing2213 rem208px
spacing2415 rem240px
spacing2516 rem256px
spacing2618 rem288px
spacing2720 rem320px
spacing2824 rem384px

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 Elements

<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>