Stack

Examples

Basic

content
pf-m-fill
content

With gutter

content
pf-m-fill
content

Documentation

Overview

The stack layout is designed to position items vertically.

Usage

Class
Applied to
Outcome
.pf-v6-l-stack
*
Initiates the stack layout.
.pf-v6-l-stack__item
*
Initiates a stack item.
.pf-m-gutter
.pf-v6-l-stack
Adds space between children by using the globally defined gutter value.
.pf-m-fill
.pf-v6-l-stack > *, .pf-v6-l-stack__item
Specifies which item(s) should fill the avaiable vertical space.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-l-stack--pf-v6-l-stack--m-gutter--Gap
1rem
  • --pf-v6-l-stack--m-gutter--Gap
  • --pf-t--global--spacer--gutter--default
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem