Spacer

Usage

import { Spacer } from '@loomhq/lens'
<Spacer bottom="medium">Content</Spacer>

Spacing

Use left right top bottom props to create space between components. These props can accept 3 types of values:

• Semantic spacing value
• Number value
• String value

Semantic spacing value

This is the most recommended option.

<Spacer left="small" right="large">Content</Spacer>

Number value

<Spacer left={1} right={3}>Content</Spacer>

The number value will be mutiplied by 8. For example, if we pass 3 it will result in 24px(3*8). The result is converted to REMs, so the final value is 1.5rem (24/16).

String value

Any valid CSS measurement value, for example, 1rem, 50%, or 10vw.

<Spacer right="1rem">Content</Spacer>

Responsive props

See available responsive props

For responsive props pass an object where the key is the min-width breakpoint.

prop={{
  default: 'xsmall',
  xsmall: 'xsmall',
  small: 'xsmall',
  medium: 'large',
  large: 'xlarge',
}}

Custom breakpoint

prop={{
  '12em': 'xsmall',
  '28em': 'large',
}}

Available breakpoints

Responsive examples

Resize the browser to see the effect.

<>
  <Spacer
    bottom={{
      default: 0,
      xsmall: 'small',
      small: 'medium',
      medium: 'xlarge',
      large: 'xxlarge'
    }}
  >
    <DemoBox width={12} height={4} />
  </Spacer>
  <Spacer>
    <DemoBox width={12} height={4} />
  </Spacer>
</>

Props