Split

Examples

Simple Split Layout

Secondary content
Primary Content
Secondary content
Copied to clipboard

Split Layout With Gutter

Secondary content
Primary Content
Secondary content
Copied to clipboard

Split Props

The Split component accepts the following props.

NameTypeRequiredDefaultDescription
gutter
enum: sm, md, lg
nullAdds space between children. Options are sm, md or lg
children
node
nullcontent rendered inside the Split layout
className
string
''additional classes added to the Split layout
component
custom
'div'Sets the base component to render. defaults to div

SplitItem Props

The SplitItem component accepts the following props.

NameTypeRequiredDefaultDescription
isMain
bool
falseFlag indicating if this Split Layout item contains the primary content
children
node
nullcontent rendered inside the Split Layout Item
className
string
''additional classes added to the Split Layout Item