Guides

Styles

Components

Layout

Icons

Icon set

Illustrations

Illustration set

Patterns

Utilities

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>