HTML

Stack

ExamplesDocumentationCSS Variables

Examples

Stack example

content
pf-m-fill
content
Copied to clipboard

Stack example with gutter

content
pf-m-fill
content
Copied to clipboard

Documentation

Overview

A stack layout is a layout that positions its items vertically. In a Stack layout there is one primary item that will expand vertically to fill the container if needed.

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 items.
.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