Skip to Content
Patternfly Logo

Split

Use a Split layout to position items horizontally in a container, with one item filling the remaining horizontal space as the viewport is resized.

ExamplesPropsCSS Variables

Examples

Basic

content
pf-m-fill
content

With gutter

content
pf-m-fill
content

Props

Split properties
NameTypeRequiredDefaultDescription
gutter'sm' | 'md' | 'lg'NonullAdds space between children.
childrenReact.ReactNodeNonullcontent rendered inside the Split layout
classNamestringNo''additional classes added to the Split layout
componentReact.ReactNodeNo'div'Sets the base component to render. defaults to div
SplitItem properties
NameTypeRequiredDefaultDescription
isFilledbooleanNofalseFlag indicating if this Split Layout item should fill the available horizontal space.
childrenReact.ReactNodeNonullcontent rendered inside the Split Layout Item
classNamestringNo''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