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

Content
Content

Align and justify

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

Content
Content
Content

Content
Content
Content

Grow shrink and basis

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

Content
Content

Content
Content

Wrap

Resize to wrap
Will wrap
Clouds is focused on the realtime granularization of incoming audio signals, and their transformation into amorphous textures.
Clouds is focused on the realtime granularization of incoming audio signals, and their transformation into amorphous textures.

No not wrap
Clouds is focused on the realtime granularization of incoming audio signals, and their transformation into amorphous textures.
Clouds is focused on the realtime granularization of incoming audio signals, and their transformation into amorphous textures.

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.

Content
Content

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