HTML

Empty state

ExamplesDocumentationCSS Variables

Examples

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.

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.

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. 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-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

CSS Variables

--pf-c-empty-state__body--Colorc_empty_state__body_Color
#737679
--pf-c-empty-state__body--MarginTopc_empty_state__body_MarginTop
1rem
--pf-c-empty-state__icon--Colorc_empty_state__icon_Color
#737679
--pf-c-empty-state__icon--FontSizec_empty_state__icon_FontSize
3.375rem
--pf-c-empty-state__icon--MarginBottomc_empty_state__icon_MarginBottom
1.5rem
--pf-c-empty-state__secondary--c-button--MarginBottomc_empty_state__secondary_c_button_MarginBottom
0.25rem
--pf-c-empty-state__secondary--c-button--MarginRightc_empty_state__secondary_c_button_MarginRight
0.25rem
--pf-c-empty-state__secondary--MarginBottomc_empty_state__secondary_MarginBottom
calc(0.25rem*-1)
--pf-c-empty-state__secondary--MarginRightc_empty_state__secondary_MarginRight
calc(0.25rem*-1)
--pf-c-empty-state__secondary--MarginTopc_empty_state__secondary_MarginTop
2rem
--pf-c-empty-state--c-button__secondary--MarginTopc_empty_state_c_button__secondary_MarginTop
0.5rem
--pf-c-empty-state--c-button--MarginTopc_empty_state_c_button_MarginTop
2rem
--pf-c-empty-state--m-lg--MaxWidthc_empty_state_m_lg_MaxWidth
37.5rem
--pf-c-empty-state--m-sm--MaxWidthc_empty_state_m_sm_MaxWidth
25rem
--pf-c-empty-state--Paddingc_empty_state_Padding
2rem