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

Align and justify

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

Grow shrink and basis

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

Wrap

Resize to wrap

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

breakpointmin width
xsmall31em (496px)
small48em (768px)
medium64em (1024px)
large75em (1200px)

Responsive examples

Resize the browser to see the effect.

More examples

See Layout recipes.

Props

Split

name
type
default
gap
ResponsiveType
<number | string>
'initial'
alignItems
ResponsiveType
< 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline' >
'center'
wrap
ResponsiveType
<'nowrap' | 'wrap' | 'wrap-reverse'>
'wrap'
width
ResponsiveType
<number | string>
height
ResponsiveType
<number | string>
minWidth
ResponsiveType
<number | string>
minHeight
ResponsiveType
<number | string>
maxWidth
ResponsiveType
<number | string>
maxHeight
ResponsiveType
<number | string>
children
React.ReactNode
justifyContent
ResponsiveType
< | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' >
alignContent
| 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'start' | 'end' | 'baseline'
direction
ResponsiveType
<'column' | 'row'>
className
never
style
never

SplitSection

name
type
default
width
ResponsiveType
<number | string>
height
ResponsiveType
<number | string>
minWidth
ResponsiveType
<number | string>
minHeight
ResponsiveType
<number | string>
maxWidth
ResponsiveType
<number | string>
maxHeight
ResponsiveType
<number | string>
children
React.ReactNode
grow
ResponsiveType
<number | string>
shrink
ResponsiveType
<number | string>
basis
ResponsiveType
<number | string>
className
never
style
never