React

Stack

ExamplesPropsCSS Variables

Examples

Simple stack layout

Copied to clipboard

Simple stack layout with gutter

Copied to clipboard

Props

Stack Props

The Stack component accepts the following props.

NameTypeRequiredDefaultDescription
gutterenumnullAdds space between children. Options are sm, md or lg
childrennodenullcontent rendered inside the Stack layout
classNamestring''additional classes added to the Stack layout
componentcustom'div'Sets the base component to render. defaults to div

StackItem Props

The StackItem component accepts the following props.

NameTypeRequiredDefaultDescription
isFilledboolfalseFlag indicating if this Stack Layout item should fill the available horizontal space.
childrennodenulladditional classes added to the Stack Layout Item
classNamestring''content rendered inside the Stack Layout Item

CSS Variables

--pf-l-stack--m-gutter--MarginBottoml_stack_m_gutter_MarginBottom1.5rem
--pf-l-stack--m-gutter--md--MarginBottoml_stack_m_gutter_md_MarginBottom1rem