PF Next

Split

Split Example

Preview

secondary content
main content
secondary content
<div class="pf-l-split">
  <div class="pf-l-split__item">
    secondary content
  </div>
  <div class="pf-l-split__item pf-m-main">
    main content
  </div>
  <div class="pf-l-split__item">
    secondary content
  </div>
</div>

Split Example with gutter

Preview

secondary content
main content
secondary content
<div class="pf-l-split pf-m-gutter">
  <div class="pf-l-split__item">
    secondary content
  </div>
  <div class="pf-l-split__item pf-m-main">
    main content
  </div>
  <div class="pf-l-split__item">
    secondary content
  </div>
</div>

Documentation

Overview

Split layouts are meant for use in positioning items horizontally, with one of the items being the main content area.

Usage

Class Applied To Outcome
.pf-l-split <div>, <section>, or <article> Initiates the split layout.
.pf-l-split__item <div> Initiates a split item. Required
.pf-m-main .pf-l-stack__item Specifies the main item of the layout, which expands horizontally when needed.
.pf-m-gutter .pf-l-split Adds space between items.