Level

Examples

Two items

content
content

Three items

content
content
content

With gutters

content with gutter
content with gutter
content with gutter

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-v6-l-level
<div>, <section>, or <article>
Initializes the level layout
.pf-v6-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-v6-l-level
Adds space between children by using the globally defined gutter value.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-l-level--pf-v6-l-level--m-gutter--Gap
1rem