React

Split

ExamplesPropsCSS Variables

Examples

Basic

content
pf-m-fill
content

With gutter

content
pf-m-fill
content

Props

Split properties
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 properties
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_MarginRight
1.5rem
--pf-l-split--m-gutter--md--MarginRightl_split_m_gutter_md_MarginRight
1rem