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.

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

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

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

Responsive examples

Resize the browser to see the effect.

<Container
  borderSide="all"
  padding={{
    default: 'xsmall',
    xsmall: 'small',
    small: 'medium',
    medium: 'large',
    large: 'xlarge'
  }}
  maxWidth={{
    xsmall: '100%',
    small: '50%',
    medium: 25,
    large: 40
  }}
>
  Content
</Container>

Props