Usage
import { Container } from '@loomhq/lens'<Container>Content</Container>
Border
Use borderSide
to specify the border side and it will render with the default border color. To override the default border color use borderColor
.
Color
Use one of the pallete colors.
Padding and dimensions
See also Responsive props
Semantic spacing value
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 |
<Container padding="medium" maxWidth="xlarge">Content</Container>
Number value
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
).
<Container padding="large" maxWidth={20}>Content</Container>
String value
Any valid CSS measurement value, for example, auto
, 50%
, or 10vw
.
<Container padding="1rem" maxWidth="50%">Content</Container>
Semantic HTML
Use htmlTag
prop to render a more suited element tag. Only default to div
if no other element works better. More about Html5 Semantic Elements.
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) |
Padding
<Container paddingTop={['xsmall','small','medium','large']}>Content</Container>
Width and Height
<ContainermaxWidth={['xsmall','small','medium','large']}maxHeight={['small','xsmall','large','medium']}height="100%">Content</Container>
Responsive demo
Resize the browser