Spacer

Usage

import { Spacer } from '@loomhq/lens'
<Spacer right={1}>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

See also Responsive props

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, auto, 50%, or 10vw.

<Spacer left="auto" right="1px">Content</Spacer>

Responsive props

Use an array with a maximum of 4 values that will be paired with the 4 breakpoints. The array items use the same type of values as their corresponding non-responsive values.

<Spacer right={['xsmall','small','medium','large']}>Content</Spacer>
<Spacer left="small" right={['small','medium']}>Content</Spacer>

Responsive demo

Resize the browser

<>
  <Spacer isInline right={[0,'small','medium','xlarge']}>
    <DemoBox width={8} height={4} />
  </Spacer>
  <Spacer isInline>
    <DemoBox width={8} height={4} />
  </Spacer>
</>

Props