Skip to Content
Patternfly Logo

Level

Use a Level layout to evenly distribute content horizontally within a container.

ExamplesPropsCSS Variables

Examples

Basic

Level Item
Level Item
Level Item

With gutters

Level Item
Level Item
Level Item

Props

Level properties
NameTypeRequiredDefaultDescription
gutter'sm' | 'md' | 'lg'NonullAdds space between children.
classNamestringNo''additional classes added to the Level layout
childrenReact.ReactNodeNonullcontent rendered inside the Level layout
LevelItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullcontent rendered inside the Level Layout Item

CSS Variables

--pf-l-level--m-gutter--MarginRightl_level_m_gutter_MarginRight
1.5rem
--pf-l-level--m-gutter--md--MarginRightl_level_m_gutter_md_MarginRight
1rem