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

name
type
default
all
ResponsiveType
<string | number>
y
ResponsiveType
<string | number>
x
ResponsiveType
<string | number>
left
ResponsiveType
<string | number>
right
ResponsiveType
<string | number>
top
ResponsiveType
<string | number>
bottom
ResponsiveType
<string | number>
isInline
boolean
children
React.ReactNode