Skip to Content
Patternfly Logo

Stack

Use a Stack layout to position items vertically in a container, with one item filling the available vertical space.

ExamplesPropsCSS Variables

Examples

Basic

content
pf-m-fill
content

With gutter

content
pf-m-fill
content

Props

Stack properties
NameTypeRequiredDefaultDescription
gutter'sm' | 'md' | 'lg'NonullAdds space between children.
childrenReact.ReactNodeNonullcontent rendered inside the Stack layout
classNamestringNo''additional classes added to the Stack layout
componentReact.ReactNodeNo'div'Sets the base component to render. defaults to div
StackItem properties
NameTypeRequiredDefaultDescription
isFilledbooleanNofalseFlag indicating if this Stack Layout item should fill the available vertical space.
childrenReact.ReactNodeNonulladditional classes added to the Stack Layout Item
classNamestringNo''content rendered inside the Stack Layout Item

CSS Variables

--pf-l-stack--m-gutter--MarginBottoml_stack_m_gutter_MarginBottom
1.5rem
--pf-l-stack--m-gutter--md--MarginBottoml_stack_m_gutter_md_MarginBottom
1rem