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:

See also Responsive props

Semantic spacing value

This is the most recommended option.

<Spacer left="small" right="large">Content</Spacer>
nameunitrempx
xsmall0.50.25rem4px
small10.5rem8px
medium21rem16px
large31.5rem24px
xlarge52.5rem40px
xxlarge84rem64px

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.

breakpointmin width
xsmall31em (496px)
small48em (768px)
medium64em (1024px)
large75em (1200px)
<Spacer right={['xsmall','small','medium','large']}>Content</Spacer>
<Spacer left="small" right={['small','medium']}>Content</Spacer>

Responsive demo

Resize the browser

Props

prop
type
default
required
left
oneOfType
number
string
array
right
oneOfType
number
string
array
top
oneOfType
number
string
array
bottom
oneOfType
number
string
array
isInline
oneOfType
bool
array
children
node