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

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

breakpointmin width
xsmall31em (496px)
small48em (768px)
medium64em (1024px)
large75em (1200px)

Responsive examples

Resize the browser to see the effect.

Props

prop
type
default
all
oneOfType
number
string
array
object
y
oneOfType
number
string
array
object
x
oneOfType
number
string
array
object
left
oneOfType
number
string
array
object
right
oneOfType
number
string
array
object
top
oneOfType
number
string
array
object
bottom
oneOfType
number
string
array
object
isInline
bool
children
node