PF Next

Level

Level Example

(with 2 children)

Preview

content
content
<div class="pf-l-level Documentation-container-tall">
  <div class="pf-l-level__item">
    content
  </div>
  <div class="pf-l-level__item">
    content
  </div>
</div>

Level Example

(with 3 children)

Preview

content
content
content
<div class="pf-l-level Documentation-container-tall">
  <div class="pf-l-level__item">
    content
  </div>
  <div class="pf-l-level__item">
    content
  </div>
  <div class="pf-l-level__item">
    content
  </div>
</div>

Level Example with Gutters

(with 3 children)

Preview

content with gutter
content with gutter
content with gutter
<div class="pf-l-level pf-m-gutter Documentation-container-tall">
  <div class="pf-l-level__item">
    content with gutter
  </div>
  <div class="pf-l-level__item">
    content with gutter
  </div>
  <div class="pf-l-level__item">
    content with gutter
  </div>
</div>

Documentation

Overview

A level is a layout that distributes the space between children evenly and it centers children on the x-axis. By default it positions the children horizontally, but on smaller devices it will position the children vertically.

Usage

Class Applied To Outcome
.pf-l-level <div>, <section>, or <article> Initializes the level layout
.pf-l-level__item <div> Explicitly sets a child of the level. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers.
.pf-m-gutter .pf-l-level Adds space between children