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

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-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