HTML

Level

ExamplesDocumentationCSS Variables

Examples

Two items

content
content

Three items

content
content
content

With gutters

content with gutter
content with gutter
content with gutter

Documentation

Overiew

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

ClassApplied toOutcome
.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-levelAdds space between children by using the globally defined gutter value.

CSS Variables

--pf-l-level--m-gutter--MarginRightl_level_m_gutter_MarginRight
1.5rem
--pf-l-level--m-gutter--md--MarginRightl_level_m_gutter_md_MarginRight
1rem