HTML

Stack

ExamplesDocumentationCSS Variables

Examples

Basic

content
pf-m-fill
content

With gutter

content
pf-m-fill
content

Documentation

Overiew

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

Usage

ClassApplied toOutcome
.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-stackAdds space between children by using the globally defined gutter value.
.pf-m-fill.pf-l-stack__itemSpecifies which item(s) should fill the avaiable vertical space.

CSS Variables

--pf-l-stack--m-gutter--MarginBottoml_stack_m_gutter_MarginBottom
1.5rem
--pf-l-stack--m-gutter--md--MarginBottoml_stack_m_gutter_md_MarginBottom
1rem