Container

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.

with defaul border
with cutom border color

Color

Use one of the pallete colors.

Color

Padding and dimensions

See also Responsive props

Semantic spacing value

nameunitrempx
xsmall0.50.25rem4px
small10.5rem8px
medium21rem16px
large31.5rem24px
xlarge52.5rem40px
xxlarge84rem64px

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

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

Padding

<Container paddingTop={['xsmall','small','medium','large']}>
Content
</Container>

Width and Height

<Container
maxWidth={['xsmall','small','medium','large']}
maxHeight={['small','xsmall','large','medium']}
height="100%"
>
Content
</Container>

Responsive demo

Resize the browser

Content

Props

prop
type
default
required
htmlTag
oneOf: 'div', 'header', 'article', 'section', 'nav', 'aside', 'footer', 'main'
'div'
backgroundColor
string
contentColor
string
borderColor
string
radius
oneOf: 'medium'
borderSide
oneOf: 'all', 'left', 'right', 'top', 'bottom'
padding
oneOfType
number
string
array
paddingLeft
oneOfType
number
string
array
paddingRight
oneOfType
number
string
array
paddingTop
oneOfType
number
string
array
paddingBottom
oneOfType
number
string
array
width
oneOfType
number
string
array
height
oneOfType
number
string
array
minWidth
oneOfType
number
string
array
minHeight
oneOfType
number
string
array
maxWidth
oneOfType
number
string
array
maxHeight
oneOfType
number
string
array
children
node