HTML

Empty state

ExamplesDocumentationCSS Variables

Examples

Empty state

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.
Copied to clipboard

Empty state 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.
Copied to clipboard

Empty state 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.
Copied to clipboard

Documentation

Accessibility

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

Usage

Class Applied To Outcome
.pf-c-empty-state <div> Initiates an empty state component. Required
.pf-c-empty-state__icon <i> Creates the empty state icon.
.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__secondary <div> Creates area for secondary actions.
.pf-m-sm .pf-c-empty-state Modifies the empty state for a small max-width
.pf-m-lg .pf-c-empty-state Modifies the empty state for a large max-width

CSS Variables

--pf-c-empty-state--Paddingc_empty_state_Padding2rem
--pf-c-empty-state__body--Colorc_empty_state__body_Color#72767b
--pf-c-empty-state__body--MarginTopc_empty_state__body_MarginTop1rem
--pf-c-empty-state__icon--Colorc_empty_state__icon_Color#72767b
--pf-c-empty-state__icon--FontSizec_empty_state__icon_FontSize3.375rem
--pf-c-empty-state__icon--MarginBottomc_empty_state__icon_MarginBottom1.5rem
--pf-c-empty-state__secondary--MarginBottomc_empty_state__secondary_MarginBottomcalc(0.25rem * -1)
--pf-c-empty-state__secondary--MarginRightc_empty_state__secondary_MarginRightcalc(0.25rem * -1)
--pf-c-empty-state__secondary--MarginTopc_empty_state__secondary_MarginTop2rem
--pf-c-empty-state__secondary--c-button--MarginBottomc_empty_state__secondary_c_button_MarginBottom0.25rem
--pf-c-empty-state__secondary--c-button--MarginRightc_empty_state__secondary_c_button_MarginRight0.25rem
--pf-c-empty-state--c-button--MarginTopc_empty_state_c_button_MarginTop2rem
--pf-c-empty-state--c-button__secondary--MarginTopc_empty_state_c_button__secondary_MarginTop0.5rem
--pf-c-empty-state--m-lg--MaxWidthc_empty_state_m_lg_MaxWidth37.5rem
--pf-c-empty-state--m-sm--MaxWidthc_empty_state_m_sm_MaxWidth25rem