Patternfly Logo

Empty state

Examples

Basic

Empty state

This represents an the empty state pattern in PatternFly 4. 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 4. 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 4. 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 4. 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 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.

With primary element

Empty State

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

Documentation

Accessibility

AttributeApplied toOutcome
aria-hidden="true".pf-c-empty-state__iconHides icon for assistive technologies. Required

Usage

ClassApplied toOutcome
.pf-c-empty-state<div>Initiates an empty state component. The empty state centers its content (.pf-c-empty-state__content) vertically and horizontally. Required
.pf-c-empty-state__content<div>Creates the content container. Required
.pf-c-empty-state__icon<i>, <div>Creates the empty state icon or icon container when used as a <div>.
.pf-c-title<h1>, <h2>, <h3>, <h4>, <h5>, <h6>Creates the empty state title. Required
.pf-c-empty-state__body<div>Creates the empty state body content. You can have more than one .pf-c-empty-state__body elements.
.pf-c-button.pf-m-primary<button>Creates the primary action button.
.pf-c-empty-state__primary<div>Container for primary actions. Can be used in lieu of using .pf-c-button.pf-m-primary.
.pf-c-empty-state__secondary<div>Container secondary actions.
.pf-m-xs.pf-c-empty-stateModifies the empty state for a extra small variation and max-width.
.pf-m-sm.pf-c-empty-stateModifies the empty state for a small max-width.
.pf-m-lg.pf-c-empty-stateModifies the empty state for a large max-width.
.pf-m-xl.pf-c-empty-stateModifies the empty state for an x-large variation and max-width.
.pf-m-full-height.pf-c-empty-stateModifies 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-c-empty-state__content. Note: this modifier requires the parent of .pf-c-empty-state have an implicit or explicit height defined.

CSS variables

.pf-c-empty-state--pf-c-empty-state--PaddingTop
2rem
.pf-c-empty-state--pf-c-empty-state--PaddingRight
2rem
.pf-c-empty-state--pf-c-empty-state--PaddingBottom
2rem
.pf-c-empty-state--pf-c-empty-state--PaddingLeft
2rem
.pf-c-empty-state--pf-c-empty-state__content--MaxWidth
none
.pf-c-empty-state--pf-c-empty-state__icon--MarginBottom
1.5rem
.pf-c-empty-state--pf-c-empty-state__icon--FontSize
3.375rem
.pf-c-empty-state--pf-c-empty-state__icon--Color
#6a6e73
.pf-c-empty-state--pf-c-empty-state__content--c-title--m-lg--FontSize
1.25rem
.pf-c-empty-state--pf-c-empty-state__body--MarginTop
1rem
.pf-c-empty-state--pf-c-empty-state__body--Color
#6a6e73
.pf-c-empty-state--pf-c-empty-state__primary--MarginTop
2rem
.pf-c-empty-state--pf-c-empty-state__primary--secondary--MarginTop
0.5rem
.pf-c-empty-state--pf-c-empty-state__secondary--MarginTop
2rem
.pf-c-empty-state--pf-c-empty-state__secondary--MarginBottom
calc(0.25rem * -1)
.pf-c-empty-state--pf-c-empty-state__secondary--child--MarginRight
calc(0.25rem / 2)
.pf-c-empty-state--pf-c-empty-state__secondary--child--MarginBottom
0.25rem
.pf-c-empty-state--pf-c-empty-state__secondary--child--MarginLeft
calc(0.25rem / 2)
.pf-c-empty-state--pf-c-empty-state--m-sm__content--MaxWidth
25rem
.pf-c-empty-state--pf-c-empty-state--m-lg__content--MaxWidth
37.5rem
.pf-c-empty-state--pf-c-empty-state--m-xl__body--FontSize
1.25rem
.pf-c-empty-state--pf-c-empty-state--m-xl__body--MarginTop
1.5rem
.pf-c-empty-state--pf-c-empty-state--m-xl__icon--MarginBottom
2rem
.pf-c-empty-state--pf-c-empty-state--m-xl__icon--FontSize
6.25rem
.pf-c-empty-state--pf-c-empty-state--m-xl--c-button__secondary--MarginTop
1rem
.pf-c-empty-state.pf-m-sm--pf-c-empty-state__content--MaxWidth
25rem
.pf-c-empty-state.pf-m-lg--pf-c-empty-state__content--MaxWidth
37.5rem
.pf-c-empty-state.pf-m-xl--pf-c-empty-state__body--MarginTop
1.5rem
.pf-c-empty-state.pf-m-xl--pf-c-empty-state__icon--MarginBottom
2rem
.pf-c-empty-state.pf-m-xl--pf-c-empty-state__icon--FontSize
6.25rem
.pf-c-empty-state.pf-m-xl--pf-c-empty-state--c-button__secondary--MarginTop
1rem

View source on Github