HTML

Level

ExamplesDocumentationCSS variables

Examples

Level example

(with 2 children)

Copied to clipboard

Level example

(with 3 children)

Copied to clipboard

Level example with gutters

(with 3 children)

Copied to clipboard

Documentation

Overview

The level layout is designed to distribute space between children evenly and center them on the x-axis. By default the children are placed horizontally and wrap responsively.

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 by using the globally defined gutter value.

CSS variables

--pf-l-level--m-gutter--MarginRightl_level_m_gutter_MarginRight1.5rem
--pf-l-level--m-gutter--md--MarginRightl_level_m_gutter_md_MarginRight1rem