Examples
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-v5-l-split | <div>, <section>, or <article> | Initiates the split layout. |
.pf-v5-l-split__item | <div> | Initiates a split item. Required |
.pf-m-gutter | .pf-v5-l-split | Adds space between children by using the globally defined gutter value. |
.pf-m-wrap | .pf-v5-l-split | Sets the split layout to wrap. |
.pf-m-fill | .pf-v5-l-split__item | Specifies which item(s) should fill the avaiable horizontal space. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-l-split | --pf-v5-l-stack--m-gutter--Gap | 1rem | ||
--pf-v5-l-stack--m-gutter--Gap --pf-v5-global--gutter $pf-v5-global--gutter $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
View source on GitHub
