Guides
Get started Component definition Designing custom elements Development best practices
Styles
Colors Typography Spacing Shadows Radii
Components
Avatar Button Checkbox ColorPicker Dropdown FormField Icon IconButton Illustration Link List Loader Logo LogoLoader Menu Modal NotificationBar Pill Radio Select Skeleton Switch Tabs Text Textarea TextButton TextInput Typeahead Toast Tooltip
Layout
Align Arrange Backdrop Container ErrorContainer Popover Spacer Split
Icons
Icon set
Illustrations
Illustration set
Patterns
Disabled styles Errors Forms Discovery Plan upgrade Settings
Utilities
CSS utilities CSS variables Responsive
Playground
Layout recipes Showcase

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 default border
  </Container>
  <Container padding="small" borderSide='all' borderColor='primary'>
    with custom border color
  </Container>
  <Container padding="small" borderSide='all' borderColor='primary' borderWidth="2px">
    with custom border color
  </Container>
</Arrange>

<Arrange gap="medium">
  <Container padding="small" borderSide='all'>
    with default border
  </Container>
  <Container padding="small" borderSide='all' borderColor='primary'>
    with custom border color
  </Container>
  <Container padding="small" borderSide='all' borderColor='primary' borderWidth="2px">
    with custom border color
  </Container>
</Arrange>

Radius

To change border radius, use the radius prop.

<Split gap="medium">
  {availableRadii.map(radius => (
    <Container
      radius={radius}
      borderSide="all"
      borderWidth='2px'
      padding="large"
    >
      with radius {radius}
    </Container>
  ))}
</Split>

<Split gap="medium">
  {availableRadii.map(radius => (
    <Container
      radius={radius}
      borderSide="all"
      borderWidth='2px'
      padding="large"
    >
      with radius {radius}
    </Container>
  ))}
</Split>

Color

Use one of the palette colors.

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

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

Position

<Container
  position="relative"
  paddingY="xlarge"
  paddingX="medium"
  borderSide='all'
  borderWidth='2px'
  radius="medium"
  maxWidth={36}
>
  <Container
    position="absolute"
    top="xsmall"
    right="xsmall"
  >
    <IconButton icon={<SvgClose />}/>
  </Container>
  Content
</Container>

<Container
  position="relative"
  paddingY="xlarge"
  paddingX="medium"
  borderSide='all'
  borderWidth='2px'
  radius="medium"
  maxWidth={36}
>
  <Container
    position="absolute"
    top="xsmall"
    right="xsmall"
  >
    <IconButton icon={<SvgClose />}/>
  </Container>
  Content
</Container>

Position and overflow

<Container
  borderSide='all'
  borderWidth='2px'
  radius="medium"
  maxWidth={36}
  height={19}
  overflow="auto"
>
  {demoText.alphabet.map((letter, index) => (
    <div key={index}>
      <Container
        position="sticky"
        top={0}
        paddingY="small"
        paddingX="medium"
        borderSide="bottom"
        backgroundColor="background"
        contentColor="primary"
      >
        {letter}
      </Container>
      <Container
        paddingY="small"
        paddingX="medium"
        contentColor="bodyDimmed"
      >
        {demoText.long}
      </Container>
    </div>
  ))}
</Container>

<Container
  borderSide='all'
  borderWidth='2px'
  radius="medium"
  maxWidth={36}
  height={19}
  overflow="auto"
>
  {demoText.alphabet.map((letter, index) => (
    <div key={index}>
      <Container
        position="sticky"
        top={0}
        paddingY="small"
        paddingX="medium"
        borderSide="bottom"
        backgroundColor="background"
        contentColor="primary"
      >
        {letter}
      </Container>
      <Container
        paddingY="small"
        paddingX="medium"
        contentColor="bodyDimmed"
      >
        {demoText.long}
      </Container>
    </div>
  ))}
</Container>

Spacing and dimensions

<>
  <Container
    padding='medium'
    marginBottom='small'
    minHeight={10}
    borderSide="all"
  >
    With padding, marginBottom, and minHeight
  </Container>
  <Container
    padding='medium'
    marginLeft='xlarge'
    maxWidth={40}
    borderSide="all"
  >
    With padding, marginLeft, and maxWidth
  </Container>
</>

<>
  <Container
    padding='medium'
    marginBottom='small'
    minHeight={10}
    borderSide="all"
  >
    With padding, marginBottom, and minHeight
  </Container>
  <Container
    padding='medium'
    marginLeft='xlarge'
    maxWidth={40}
    borderSide="all"
  >
    With padding, marginLeft, and maxWidth
  </Container>
</>

Spacing and dimensions value types:

Semantic spacing value
Number value
String value

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

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

breakpoint	min width
`xsmall`	`31em (496px)`
`small`	`48em (768px)`
`medium`	`64em (1024px)`
`large`	`75em (1200px)`

Responsive examples

Resize the browser to see the effect.

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

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

Refs

Use the refHandler prop to pass down a function that creates/sets your ref from Container's parent component.

() => {
  const ref = useRef();

  const refHandler = (newRef) => {
    ref.current = newRef;
  }

  return (
    <>
      <Container refHandler={refHandler}>
        <Text>I have a ref value</Text>
      </Container>
    </>
  )
}

() => {
  const ref = useRef();

  const refHandler = (newRef) => {
    ref.current = newRef;
  }

  return (
    <>
      <Container refHandler={refHandler}>
        <Text>I have a ref value</Text>
      </Container>
    </>
  )
}