HTML

Split

ExamplesDocumentationCSS variables

Examples

Split example

Copied to clipboard

Split example with gutter

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
--pf-l-split--m-gutter--md--MarginRightl_split_m_gutter_md_MarginRight1rem