HTML

Split

ExamplesDocumentationCSS Variables

Examples

Split example

content
pf-m-fill
content
Copied to clipboard

Split example with gutter

content
pf-m-fill
content
Copied to clipboard

Documentation

Overview

Split layouts are meant for use in positioning items horizontally, with one of the items being the main content area.

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 items.
.pf-m-fill .pf-l-split__item Specifies which item(s) should fill the avaiable horizontal space.

CSS Variables

--pf-l-split--m-gutter--MarginRightl_split_m_gutter_MarginRight1.5rem