Split

Examples

content

pf-m-fill

content

content

pf-m-fill

content

content

The split layout is designed to position items horizontally, with one item filling the available horizontal space.

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.


	.pf-l-split	--pf-l-split--m-gutter--MarginRight	1rem
--pf-l-split--m-gutter--MarginRight --pf-global--gutter $pf-global--gutter $pf-global--spacer--md pf-size-prem(16px) 1rem

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH