React

Level

ExamplesPropsCSS Variables

Examples

Simple level layout

Copied to clipboard

Level with gutters

Copied to clipboard

Props

Level Props

The Level component accepts the following props.

NameTypeRequiredDefaultDescription
gutter'sm' | 'md' | 'lg'nullAdds space between children. Options are sm, md or lg
classNamestring''additional classes added to the Level layout
childrenReact.ReactNodenullcontent rendered inside the Level layout

LevelItem Props

The LevelItem component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullcontent rendered inside the Level Layout Item

CSS Variables

--pf-l-level--m-gutter--MarginRightl_level_m_gutter_MarginRight1.5rem
--pf-l-level--m-gutter--md--MarginRightl_level_m_gutter_md_MarginRight1rem