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
gutter'sm' | 'md' | 'lg'nullAdds space between children.
childrenReact.ReactNodenullcontent rendered inside the Stack layout
classNamestring''additional classes added to the Stack layout
componentReact.ReactNode'div'Sets the base component to render. defaults to div

StackItem props

The StackItem component accepts the following props.

NameTypeRequiredDefaultDescription
isFilledbooleanfalseFlag indicating if this Stack Layout item should fill the available vertical space.
childrenReact.ReactNodenulladditional 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