PatternFly

Stack

The stack layout positions items vertically, with one or more items filling the available vertical space.

Elements

PatternFly website screenshot showing modal created with bullseye layout.
  1. Stack: The stack container, which holds all stack items.
  2. Stack item: An individual section of content to be placed in the stack.

Usage

When to use stack vs other layouts

Use the stack layout when you do not need your content to wrap. If you need a layout that wraps, instead choose the flex, gallery, level, or split layout.

Variations

Multiple items that fill space

You can specify which stack items fill the remaining vertical space in the layout. More than one item can be set to fill, and they will share the remaining space equally.

Gutters around items

To adjust spacing between items, you can apply gutters, as shown in the related React and HTML examples.


View source on GitHub