Split

Examples

Basic

content
pf-m-fill
content

With gutter

content
pf-m-fill
content

Wrappable

content
content
content
content
content
content
content
content
content
content
content
content
content
content

Props

Split

*required
NameTypeDefaultDescription
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
hasGutterbooleanfalseAdds space between children.
isWrappablebooleanfalseAllows children to wrap

SplitItem

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

CSS variables

Expand or collapse columnSelectorVariableValue
:where(:root, .pf-v6-l-split)--pf-v6-l-stack--m-gutter--Gap
24px

View source on GitHub