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

All valid HTML elements can be a child of a Split component, but SplitSection is needed to use the flex-item properties grow, shrink and basis.

import { Split, SplitSection } from '@loomhq/lens'
<Split>
  <div>Content</div>
  <SplitSection grow={1}>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

Use gap to set both the row and column gap to the same value.

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

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

Use rowGap and/or columnGap to set independent spacing values for each axis. These values will override any values set using gap.

<DemoBox boxType="outline">
  <Split rowGap="medium" columnGap="small">
    <DemoBox padding="small">{demoText.medium}</DemoBox>
    <DemoBox padding="small">Content</DemoBox>
    <DemoBox padding="small">Content</DemoBox>
  </Split>
</DemoBox>

<DemoBox boxType="outline">
  <Split rowGap="medium" columnGap="small">
    <DemoBox padding="small">{demoText.medium}</DemoBox>
    <DemoBox padding="small">Content</DemoBox>
    <DemoBox padding="small">Content</DemoBox>
  </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}>
      <DemoBox padding="medium">Content</DemoBox>
      <DemoBox padding="small">Content</DemoBox>
      <DemoBox padding="xsmall">Content</DemoBox>
    </Split>
  </DemoBox>
  <br />
  <DemoBox boxType="outline">
    <Split alignContent="flex-end" height={15}>
      <DemoBox padding="medium">Content</DemoBox>
      <DemoBox padding="small">Content</DemoBox>
      <DemoBox padding="xsmall">Content</DemoBox>
    </Split>
  </DemoBox>
  <br />
  <DemoBox boxType="outline">
    <Split justifyContent="space-between">
      <DemoBox padding="medium">Content</DemoBox>
      <DemoBox padding="xsmall">Content</DemoBox>
      <DemoBox padding="small">Content</DemoBox>
    </Split>
  </DemoBox>
</>

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

Grow, shrink and basis

Wrap child elements in a SplitSection container to use grow, shrink, and basis in the same way you would use CSS flexbox.

<>
  <DemoBox boxType="outline">
    <Split>
      <DemoBox padding="small">Content</DemoBox>
      <SplitSection grow={1} shrink={1} basis={10}>
        <DemoBox padding="small">Content</DemoBox>
      </SplitSection>
    </Split>
  </DemoBox>
  <br />
  <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>
      <DemoBox padding="small">Content</DemoBox>
      <SplitSection grow={1} shrink={1} basis={10}>
        <DemoBox padding="small">Content</DemoBox>
      </SplitSection>
    </Split>
  </DemoBox>
  <br />
  <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>
</>

When using Split as a list, use the htmlTag prop to generate semantic list markup. All child Split and SplitSection will automatically be rendered as an <li> element. All other child elements should be wrapped in or transformed into <li> tags.

<>
  List of items
  <DemoBox boxType="outline">
    <Split gap="small" htmlTag="ul">
      <li>
        <DemoBox padding="small">Item 1</DemoBox>
      </li>
      <SplitSection grow={1}>
        <DemoBox padding="small">Item 2</DemoBox>
      </SplitSection>
      <Split>
        <DemoBox padding="small">Item 3</DemoBox>
      </Split>
    </Split>
  </DemoBox>
  </>

<>
  List of items
  <DemoBox boxType="outline">
    <Split gap="small" htmlTag="ul">
      <li>
        <DemoBox padding="small">Item 1</DemoBox>
      </li>
      <SplitSection grow={1}>
        <DemoBox padding="small">Item 2</DemoBox>
      </SplitSection>
      <Split>
        <DemoBox padding="small">Item 3</DemoBox>
      </Split>
    </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'
    }}
  >
    <DemoBox padding="small">Content</DemoBox>
    <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'
    }}
  >
    <DemoBox padding="small">Content</DemoBox>
    <SplitSection
      grow={{
        'default': '0',
        'medium': '1',
      }}
    >
      <DemoBox padding="small">Content</DemoBox>
    </SplitSection>
  </Split>
</DemoBox>

More examples

See Layout recipes.

Props

Split

name

type

default

gap

ResponsiveType

'initial'

Guides

Styles

Components

Layout

Icons

Illustrations

Patterns

Utilities

Playground

Split

Usage

Based on CSS flexbox

Gap

Align and justify

Grow, shrink and basis

Wrap

HTML list tags

Responsive props

Available breakpoints

Responsive examples

More examples

Props

Split

SplitSection