React

Split

ExamplesPropsCSS variables

Examples

Simple split

Copied to clipboard

Split layout with gutter

Copied to clipboard

Props

Split props

The Split component accepts the following props.

NameTypeRequiredDefaultDescription
gutter'sm' | 'md' | 'lg'nullAdds space between children.
childrenReact.ReactNodenullcontent rendered inside the Split layout
classNamestring''additional classes added to the Split layout
componentReact.ReactNode'div'Sets the base component to render. defaults to div

SplitItem props

The SplitItem component accepts the following props.

NameTypeRequiredDefaultDescription
isFilledbooleanfalseFlag indicating if this Split Layout item should fill the available horizontal space.
childrenReact.ReactNodenullcontent rendered inside the Split Layout Item
classNamestring''additional classes added to the Split Layout Item

CSS variables

--pf-l-split--m-gutter--MarginRightl_split_m_gutter_MarginRight1.5rem
--pf-l-split--m-gutter--md--MarginRightl_split_m_gutter_md_MarginRight1rem