Skip to content
Patternfly Logo

Split

Examples

Basic

content
pf-m-fill
content

With gutter

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

CSS variables

.pf-l-split--pf-l-split--m-gutter--MarginRight
1rem

View source on GitHub