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.

with defaul border

with cutom border color

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

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

Color

Use one of the pallete colors.

Color

<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

Content

<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

The textures generated by Clouds are extremely thick, partly because of the large number of concurrent grains (up to 60), partly because of a built-in allpass diffuser and reverberator, smearing the shortest transient into a wash of noise - giving the illusion of an even larger number of simultaneous grains.

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

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.

Content

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

<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

name

type

default

borderWidth

string | number

'1px'

htmlTag

'div'

backgroundColor

string

contentColor

string

borderColor

string

radius

literal

borderSide

'all' | 'left' | 'right' | 'top' | 'bottom'

shadow

'small' | 'medium' | 'large'

padding

ResponsiveType