PF Next

Stack

Stack Example

Preview

secondary content
main content
secondary content
<div class="pf-l-stack Documentation-container-xtall">
  <div class="pf-l-stack__item">
    secondary content
  </div>
  <div class="pf-l-stack__item pf-m-main">
    main content
  </div>
  <div class="pf-l-stack__item">
    secondary content
  </div>
</div>

Stack Example with Gutter

Preview

secondary content
main content
secondary content
<div class="pf-l-stack pf-m-gutter Documentation-container-xtall">
  <div class="pf-l-stack__item">
    secondary content
  </div>
  <div class="pf-l-stack__item pf-m-main">
    main content
  </div>
  <div class="pf-l-stack__item">
    secondary content
  </div>
</div>

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-main .pf-l-stack__item Specifies the main item of the layout, which expands vertically when needed.
.pf-m-gutter .pf-l-stack Adds space between items.