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>
name | unit | rem | px |
---|---|---|---|
xsmall | 0.5 | 0.25rem | 4px |
small | 1 | 0.5rem | 8px |
medium | 2 | 1rem | 16px |
large | 3 | 1.5rem | 24px |
xlarge | 5 | 2.5rem | 40px |
xxlarge | 8 | 4rem | 64px |
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.
breakpoint | min width |
---|---|
xsmall | 31em (496px) |
small | 48em (768px) |
medium | 64em (1024px) |
large | 75em (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