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

Split

Usage

import { Split, SplitSection } from '@loomhq/lens'
<Split>
  <SplitSection>Content</SplitSection>
  <SplitSection>Content</SplitSection>
</Split>

Based on CSS flexbox

Split component is built with CSS flexbox. Learn more about CSS flexbox A Complete Guide to Flexbox.

Gap

<DemoBox boxType="outline">
  <Split gap="medium">
    <SplitSection>
      <DemoBox padding="small">Content</DemoBox>
    </SplitSection>
    <SplitSection>
      <DemoBox padding="small">Content</DemoBox>
    </SplitSection>
  </Split>
</DemoBox>

<DemoBox boxType="outline">
  <Split gap="medium">
    <SplitSection>
      <DemoBox padding="small">Content</DemoBox>
    </SplitSection>
    <SplitSection>
      <DemoBox padding="small">Content</DemoBox>
    </SplitSection>
  </Split>
</DemoBox>

Align and justify

Use alignItems, alignContent, and justifyContent in the same way you would use CSS flexbox.

<>
  <DemoBox boxType="outline">
    <Split alignItems="flex-end" height={15}>
      <SplitSection>
        <DemoBox padding="medium">Content</DemoBox>
      </SplitSection>
      <SplitSection>
        <DemoBox padding="small">Content</DemoBox>
      </SplitSection>
      <SplitSection>
        <DemoBox padding="xsmall">Content</DemoBox>
      </SplitSection>
    </Split>
  </DemoBox>
  <br />
  <DemoBox boxType="outline">
    <Split alignContent="flex-end" height={15}>
      <SplitSection>
        <DemoBox padding="medium">Content</DemoBox>
      </SplitSection>
      <SplitSection>
        <DemoBox padding="small">Content</DemoBox>
      </SplitSection>
      <SplitSection>
        <DemoBox padding="xsmall">Content</DemoBox>
      </SplitSection>
    </Split>
  </DemoBox>
  <br />
  <DemoBox boxType="outline">
    <Split justifyContent="space-between">
      <SplitSection>
        <DemoBox padding="medium">Content</DemoBox>
      </SplitSection>
      <SplitSection>
        <DemoBox padding="xsmall">Content</DemoBox>
      </SplitSection>
      <SplitSection>
        <DemoBox padding="small">Content</DemoBox>
      </SplitSection>
    </Split>
  </DemoBox>
</>

<>
  <DemoBox boxType="outline">
    <Split alignItems="flex-end" height={15}>
      <SplitSection>
        <DemoBox padding="medium">Content</DemoBox>
      </SplitSection>
      <SplitSection>
        <DemoBox padding="small">Content</DemoBox>
      </SplitSection>
      <SplitSection>
        <DemoBox padding="xsmall">Content</DemoBox>
      </SplitSection>
    </Split>
  </DemoBox>
  <br />
  <DemoBox boxType="outline">
    <Split alignContent="flex-end" height={15}>
      <SplitSection>
        <DemoBox padding="medium">Content</DemoBox>
      </SplitSection>
      <SplitSection>
        <DemoBox padding="small">Content</DemoBox>
      </SplitSection>
      <SplitSection>
        <DemoBox padding="xsmall">Content</DemoBox>
      </SplitSection>
    </Split>
  </DemoBox>
  <br />
  <DemoBox boxType="outline">
    <Split justifyContent="space-between">
      <SplitSection>
        <DemoBox padding="medium">Content</DemoBox>
      </SplitSection>
      <SplitSection>
        <DemoBox padding="xsmall">Content</DemoBox>
      </SplitSection>
      <SplitSection>
        <DemoBox padding="small">Content</DemoBox>
      </SplitSection>
    </Split>
  </DemoBox>
</>

Grow shrink and basis

Use grow, shrink, and basis in the same way you would use CSS flexbox.

<>
  <DemoBox boxType="outline">
    <Split>
      <SplitSection grow={1} shrink={0} basis={20}>
        <DemoBox padding="small">Content</DemoBox>
      </SplitSection>
      <SplitSection grow={1} shrink={1} basis={10}>
        <DemoBox padding="small">Content</DemoBox>
      </SplitSection>
    </Split>
  </DemoBox>
  <br />
  <DemoBox boxType="outline">
    <Split>
      <SplitSection grow={1}>
        <DemoBox padding="small">Content</DemoBox>
      </SplitSection>
      <SplitSection grow={11}>
        <DemoBox padding="small">Content</DemoBox>
      </SplitSection>
    </Split>
  </DemoBox>
</>

<>
  <DemoBox boxType="outline">
    <Split>
      <SplitSection grow={1} shrink={0} basis={20}>
        <DemoBox padding="small">Content</DemoBox>
      </SplitSection>
      <SplitSection grow={1} shrink={1} basis={10}>
        <DemoBox padding="small">Content</DemoBox>
      </SplitSection>
    </Split>
  </DemoBox>
  <br />
  <DemoBox boxType="outline">
    <Split>
      <SplitSection grow={1}>
        <DemoBox padding="small">Content</DemoBox>
      </SplitSection>
      <SplitSection grow={11}>
        <DemoBox padding="small">Content</DemoBox>
      </SplitSection>
    </Split>
  </DemoBox>
</>

Wrap

Resize to wrap

<>
  Will wrap
  <DemoBox boxType="outline">
    <Split>
      <SplitSection grow={1} basis={30}>
        <DemoBox padding="small">{demoText.medium}</DemoBox>
      </SplitSection>
      <SplitSection grow={1} basis={30}>
        <DemoBox padding="small">{demoText.medium}</DemoBox>
      </SplitSection>
    </Split>
  </DemoBox>
  <br />
  No not wrap
  <DemoBox boxType="outline">
    <Split wrap="nowrap">
      <SplitSection grow={1} basis={30}>
        <DemoBox padding="small">{demoText.medium}</DemoBox>
      </SplitSection>
      <SplitSection grow={1} basis={30}>
        <DemoBox padding="small">{demoText.medium}</DemoBox>
      </SplitSection>
    </Split>
  </DemoBox>
</>

<>
  Will wrap
  <DemoBox boxType="outline">
    <Split>
      <SplitSection grow={1} basis={30}>
        <DemoBox padding="small">{demoText.medium}</DemoBox>
      </SplitSection>
      <SplitSection grow={1} basis={30}>
        <DemoBox padding="small">{demoText.medium}</DemoBox>
      </SplitSection>
    </Split>
  </DemoBox>
  <br />
  No not wrap
  <DemoBox boxType="outline">
    <Split wrap="nowrap">
      <SplitSection grow={1} basis={30}>
        <DemoBox padding="small">{demoText.medium}</DemoBox>
      </SplitSection>
      <SplitSection grow={1} basis={30}>
        <DemoBox padding="small">{demoText.medium}</DemoBox>
      </SplitSection>
    </Split>
  </DemoBox>
</>

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.

<DemoBox boxType="outline">
  <Split
    gap={{
      'default': 'xsmall',
      'xsmall': 'small',
      'small': 'medium',
      'medium': 'large',
      'large': 'large'
    }}
  >
    <SplitSection>
      <DemoBox padding="small">Content</DemoBox>
    </SplitSection>
    <SplitSection
      grow={{
        'default': '0',
        'medium': '1',
      }}
    >
      <DemoBox padding="small">Content</DemoBox>
    </SplitSection>
  </Split>
</DemoBox>

<DemoBox boxType="outline">
  <Split
    gap={{
      'default': 'xsmall',
      'xsmall': 'small',
      'small': 'medium',
      'medium': 'large',
      'large': 'large'
    }}
  >
    <SplitSection>
      <DemoBox padding="small">Content</DemoBox>
    </SplitSection>
    <SplitSection
      grow={{
        'default': '0',
        'medium': '1',
      }}
    >
      <DemoBox padding="small">Content</DemoBox>
    </SplitSection>
  </Split>
</DemoBox>