Split

Examples

Basic

content
pf-m-fill
content

With gutter

content
pf-m-fill
content

Wrappable

content
content
content
content
content
content
content
content
content
content
content
content
content
content

Documentation

Overview

The split layout is designed to position items horizontally, with one item filling the available horizontal space.

Usage

Class
Applied to
Outcome
.pf-v6-l-split
<div>, <section>, or <article>
Initiates the split layout.
.pf-v6-l-split__item
<div>
Initiates a split item. Required
.pf-m-gutter
.pf-v6-l-split
Adds space between children by using the globally defined gutter value.
.pf-m-wrap
.pf-v6-l-split
Sets the split layout to wrap.
.pf-m-fill
.pf-v6-l-split__item
Specifies which item(s) should fill the avaiable horizontal space.

CSS variables

Expand or collapse columnSelectorVariableValue
:where(:root, .pf-v6-l-split)--pf-v6-l-stack--m-gutter--Gap
1rem