HTML

Empty state

ExamplesDocumentationCSS variables

Examples

Empty state

Copied to clipboard

Empty state small

Copied to clipboard

Empty state large

Copied to clipboard

Empty state w/ primary element

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>, <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-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#737679
--pf-c-empty-state__body--MarginTopc_empty_state__body_MarginTop1rem
--pf-c-empty-state__icon--Colorc_empty_state__icon_Color#737679
--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