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.

<Distribute gap="medium">
  <Container padding="small" borderSide='all'>
    with defaul border
  </Container>
  <Container padding="small" borderSide='all' borderColor='grey6'>
    with cutom border color
  </Container>
</Distribute>

Color

Use one of the pallete colors.

<Container
  borderColor='primary'
  contentColor='primary'
  backgroundColor='highlight'
  borderSide='all'
  padding='medium'
>
  Color
</Container>

Padding and dimensions

• Semantic spacing value
• Number value
• String value

See also Responsive props

Semantic spacing value

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

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

<Container
  paddingTop={['small','medium','large','xlarge']}
  maxWidth={['100%', '50%', 15, 20]}
  borderSide="all"
>
  Content
</Container>

Props