PatternFly

Empty state

Examples

Basic

Empty state

This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.

Extra small

Empty state

This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.

Small

Empty state

This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.

Large

Empty state

This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.

Extra large

Empty state

This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.

Documentation

Accessibility

Attribute
Applied to
Outcome
aria-hidden="true"
.pf-v5-c-empty-state__icon
Hides icon for assistive technologies. Required

Usage

Class
Applied to
Outcome
.pf-v5-c-empty-state
<div>
Initiates an empty state component. The empty state centers its content (.pf-v5-c-empty-state__content) vertically and horizontally. Required
.pf-v5-c-empty-state__content
<div>
Creates the content container. Required
.pf-v5-c-empty-state__header
<div>
Creates the header container. Required
.pf-v5-c-empty-state__title
<div>
Creates the empty state title container. Required
.pf-v5-c-empty-state__title-text
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <div>
Creates the empty state title text container.
.pf-v5-c-empty-state__icon
<div>
Creates the empty state icon container.
.pf-v5-c-empty-state__body
<div>
Creates the empty state body content. There can be more than one .pf-v5-c-empty-state__body elements.
.pf-v5-c-empty-state__footer
<div>
Creates the footer container. Required
.pf-v5-c-empty-state__actions
<div>
Container for actions. Required
.pf-m-xs
.pf-v5-c-empty-state
Modifies the empty state for an extra small variation and max-width.
.pf-m-sm
.pf-v5-c-empty-state
Modifies the empty state for a small max-width.
.pf-m-lg
.pf-v5-c-empty-state
Modifies the empty state for a large max-width.
.pf-m-xl
.pf-v5-c-empty-state
Modifies the empty state for an extra large variation and max-width.
.pf-m-full-height
.pf-v5-c-empty-state
Modifies the empty state to be height: 100%. If you need the empty state content to be centered vertically, you can use this modifier to make the empty state fill the height of its container, and center .pf-v5-c-empty-state__content. Note: this modifier requires the parent of .pf-v5-c-empty-state have an implicit or explicit height defined.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-empty-state--pf-v5-c-empty-state--PaddingTop
2rem
.pf-v5-c-empty-state--pf-v5-c-empty-state--PaddingRight
2rem
.pf-v5-c-empty-state--pf-v5-c-empty-state--PaddingBottom
2rem
.pf-v5-c-empty-state--pf-v5-c-empty-state--PaddingLeft
2rem
.pf-v5-c-empty-state--pf-v5-c-empty-state--m-xs--PaddingTop
1rem
.pf-v5-c-empty-state--pf-v5-c-empty-state--m-xs--PaddingRight
1rem
.pf-v5-c-empty-state--pf-v5-c-empty-state--m-xs--PaddingBottom
1rem
.pf-v5-c-empty-state--pf-v5-c-empty-state--m-xs--PaddingLeft
1rem
.pf-v5-c-empty-state--pf-v5-c-empty-state__content--MaxWidth
none
.pf-v5-c-empty-state--pf-v5-c-empty-state--m-xs__content--MaxWidth
21.875rem
.pf-v5-c-empty-state--pf-v5-c-empty-state--m-sm__content--MaxWidth
25rem
.pf-v5-c-empty-state--pf-v5-c-empty-state--m-lg__content--MaxWidth
37.5rem
.pf-v5-c-empty-state--pf-v5-c-empty-state__icon--MarginBottom
1.5rem
.pf-v5-c-empty-state--pf-v5-c-empty-state__icon--FontSize
3.375rem
.pf-v5-c-empty-state--pf-v5-c-empty-state__icon--Color
#6a6e73
.pf-v5-c-empty-state--pf-v5-c-empty-state--m-xs__icon--MarginBottom
1rem
.pf-v5-c-empty-state--pf-v5-c-empty-state--m-xl__icon--MarginBottom
2rem
.pf-v5-c-empty-state--pf-v5-c-empty-state--m-xl__icon--FontSize
6.25rem
.pf-v5-c-empty-state--pf-v5-c-empty-state__title-text--FontFamily
'"RedHatDisplay", helvetica, arial, sans-serif'
.pf-v5-c-empty-state--pf-v5-c-empty-state__title-text--FontSize
1.25rem
.pf-v5-c-empty-state--pf-v5-c-empty-state__title-text--FontWeight
400
.pf-v5-c-empty-state--pf-v5-c-empty-state__title-text--LineHeight
1.5
.pf-v5-c-empty-state--pf-v5-c-empty-state--m-xs__title-text--FontSize
1rem
.pf-v5-c-empty-state--pf-v5-c-empty-state--m-xl__title-text--FontSize
2.25rem
.pf-v5-c-empty-state--pf-v5-c-empty-state--m-xl__title-text--LineHeight
1.3
.pf-v5-c-empty-state--pf-v5-c-empty-state__body--MarginTop
1rem
.pf-v5-c-empty-state--pf-v5-c-empty-state__body--Color
#6a6e73
.pf-v5-c-empty-state--pf-v5-c-empty-state--body--FontSize
1rem
.pf-v5-c-empty-state--pf-v5-c-empty-state--m-xs__body--FontSize
0.875rem
.pf-v5-c-empty-state--pf-v5-c-empty-state--m-xs__body--MarginTop
1rem
.pf-v5-c-empty-state--pf-v5-c-empty-state--m-xl__body--FontSize
1.25rem
.pf-v5-c-empty-state--pf-v5-c-empty-state--m-xl__body--MarginTop
1.5rem
.pf-v5-c-empty-state--pf-v5-c-empty-state__footer--RowGap
0.5rem
.pf-v5-c-empty-state--pf-v5-c-empty-state__footer--MarginTop
2rem
.pf-v5-c-empty-state--pf-v5-c-empty-state--m-xs__footer--MarginTop
1rem
.pf-v5-c-empty-state--pf-v5-c-empty-state__actions--RowGap
0.25rem
.pf-v5-c-empty-state--pf-v5-c-empty-state__actions--ColumnGap
0.25rem
.pf-v5-c-empty-state.pf-m-xs--pf-v5-c-empty-state--PaddingTop
1rem
.pf-v5-c-empty-state.pf-m-xs--pf-v5-c-empty-state--PaddingRight
1rem
.pf-v5-c-empty-state.pf-m-xs--pf-v5-c-empty-state--PaddingBottom
1rem
.pf-v5-c-empty-state.pf-m-xs--pf-v5-c-empty-state--PaddingLeft
1rem
.pf-v5-c-empty-state.pf-m-xs--pf-v5-c-empty-state__title-text--FontSize
1rem
.pf-v5-c-empty-state.pf-m-xs--pf-v5-c-empty-state__content--MaxWidth
21.875rem
.pf-v5-c-empty-state.pf-m-xs--pf-v5-c-empty-state__icon--MarginBottom
1rem
.pf-v5-c-empty-state.pf-m-xs--pf-v5-c-empty-state__body--MarginTop
1rem
.pf-v5-c-empty-state.pf-m-xs--pf-v5-c-empty-state--body--FontSize
0.875rem
.pf-v5-c-empty-state.pf-m-xs--pf-v5-c-empty-state__footer--MarginTop
1rem
.pf-v5-c-empty-state.pf-m-sm--pf-v5-c-empty-state__content--MaxWidth
25rem
.pf-v5-c-empty-state.pf-m-lg--pf-v5-c-empty-state__content--MaxWidth
37.5rem
.pf-v5-c-empty-state.pf-m-xl--pf-v5-c-empty-state__body--MarginTop
1.5rem
.pf-v5-c-empty-state.pf-m-xl--pf-v5-c-empty-state--body--FontSize
1.25rem
.pf-v5-c-empty-state.pf-m-xl--pf-v5-c-empty-state__icon--MarginBottom
2rem
.pf-v5-c-empty-state.pf-m-xl--pf-v5-c-empty-state__icon--FontSize
6.25rem
.pf-v5-c-empty-state.pf-m-xl--pf-v5-c-empty-state__title-text--FontSize
2.25rem
.pf-v5-c-empty-state.pf-m-xl--pf-v5-c-empty-state__title-text--LineHeight
1.3

View source on GitHub