HTML

Stack

ExamplesDocumentationCSS variables

Examples

Stack example

Copied to clipboard

Stack example with gutter

Copied to clipboard

Documentation

Overview

The stack layout is designed to position items vertically, with one item filling the available vertical space.

Usage

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

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