Foundation

Spacer

Consistent spacing makes clean and clear interface

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 { tokens } from 'legion-ui';

Preview

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

  <div style="margin-bottom: tokens.spacing1"/>
  <div style="margin-bottom: tokens.spacing2"/>
  <div style="margin-bottom: tokens.spacing3"/>
  <div style="margin-bottom: tokens.spacing4"/>
  <div style="margin-bottom: tokens.spacing5"/>
  <div style="margin-bottom: tokens.spacing6"/>
  <div style="margin-bottom: tokens.spacing7"/>
  <div style="margin-bottom: tokens.spacing8"/>
  <div style="margin-bottom: tokens.spacing9"/>

Do you have feedback?

Please let us know to make it better

Send Feedback