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.

Color

Use one of the palette colors.

Position

Position and overflow

Spacing and dimensions

Spacing and dimensions value types:

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

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
borderWidth
string | number
'1px'
htmlTag
'div' | 'header' | 'article' | 'section' | 'nav' | 'aside' | 'footer' | 'main' | 'span'
'div'
backgroundColor
string
contentColor
string
borderColor
string
radius
literal
borderSide
'all' | 'left' | 'right' | 'top' | 'bottom'
shadow
'small' | 'medium' | 'large'
padding
ResponsiveType
<string | number>
paddingX
ResponsiveType
<string | number>
paddingY
ResponsiveType
<string | number>
paddingLeft
ResponsiveType
<string | number>
paddingRight
ResponsiveType
<string | number>
paddingTop
ResponsiveType
<string | number>
paddingBottom
ResponsiveType
<string | number>
margin
ResponsiveType
<string | number>
marginX
ResponsiveType
<string | number>
marginY
ResponsiveType
<string | number>
marginLeft
ResponsiveType
<string | number>
marginRight
ResponsiveType
<string | number>
marginTop
ResponsiveType
<string | number>
marginBottom
ResponsiveType
<string | number>
width
ResponsiveType
<string | number>
height
ResponsiveType
<string | number>
minWidth
ResponsiveType
<string | number>
minHeight
ResponsiveType
<string | number>
maxWidth
ResponsiveType
<string | number>
maxHeight
ResponsiveType
<string | number>
children
React.ReactNode
position
string
overflow
string
top
ResponsiveType
<string | number>
bottom
ResponsiveType
<string | number>
left
ResponsiveType
<string | number>
right
ResponsiveType
<string | number>
zIndex
number