Guides

Styles

Components

Layout

Icons

Icon set

Illustrations

Illustration set

Patterns

Utilities

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

The default border radius is medium (8px). To change it, use the radius prop.

<Arrange gap="medium">
  <Container padding="large" borderSide='all' borderWidth='2px' radius="medium">
    with default radius
  </Container>
  <Container padding="large" borderSide='all' borderWidth='2px' radius="large">
    with large radius
  </Container>
  <Container padding="large" borderSide='all' borderWidth='2px' radius="xlarge">
    with xlarge radius
  </Container>
  <Container padding="large" borderSide='all' borderWidth='2px' radius="full">
    with full radius
  </Container>
</Arrange>

<Arrange gap="medium">
  <Container padding="large" borderSide='all' borderWidth='2px' radius="medium">
    with default radius
  </Container>
  <Container padding="large" borderSide='all' borderWidth='2px' radius="large">
    with large radius
  </Container>
  <Container padding="large" borderSide='all' borderWidth='2px' radius="xlarge">
    with xlarge radius
  </Container>
  <Container padding="large" borderSide='all' borderWidth='2px' radius="full">
    with full radius
  </Container>
</Arrange>

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>
    </>
  )
}