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

prop
type
default
alignItems
oneOfType
object
oneOf: : 'stretch', 'flex-start', 'flex-end', 'center', 'baseline'
'center'
wrap
oneOfType
oneOf: : 'nowrap', 'wrap', 'wrap-reverse'
array
object
'wrap'
gap
oneOfType
number
string
array
object
'initial'
htmlTag
string
'div'
justifyContent
oneOfType
object
oneOf: : 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'
direction
oneOfType
oneOf: : 'column', 'row'
array
object
width
oneOfType
number
string
array
object
height
oneOfType
number
string
array
object
minWidth
oneOfType
number
string
array
object
minHeight
oneOfType
number
string
array
object
maxWidth
oneOfType
number
string
array
object
maxHeight
oneOfType
number
string
array
object

SplitSection

prop
type
default
grow
oneOfType
number
array
object
shrink
oneOfType
number
array
object
basis
oneOfType
number
string
object
width
oneOfType
number
string
array
object
height
oneOfType
number
string
array
object
minWidth
oneOfType
number
string
array
object
minHeight
oneOfType
number
string
array
object
maxWidth
oneOfType
number
string
array
object
maxHeight
oneOfType
number
string
array
object