Stack

Examples

content

pf-m-fill

content

content

pf-m-fill

content

The stack layout is designed to position items vertically, with one item filling the available vertical space.

Class	Applied to	Outcome
`.pf-l-stack`	`<div>`, `<section>`, or `<article>`	Initiates the stack layout.
`.pf-l-stack__item`	`<div>`	Initiates a stack item. Required
`.pf-m-gutter`	`.pf-l-stack`	Adds space between children by using the globally defined gutter value.
`.pf-m-fill`	`.pf-l-stack__item`	Specifies which item(s) should fill the avaiable vertical space.


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

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH