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
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. 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-state | Modifies the empty state for a extra small variation and max-width. |
.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. |
.pf-m-xl | .pf-c-empty-state | Modifies the empty state for an x-large variation and max-width. |
.pf-m-full-height | .pf-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-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-xs__content--MaxWidth | 21.875rem | ||
| .pf-c-empty-state | --pf-c-empty-state--m-xs__body--FontSize | 0.875rem | ||
| .pf-c-empty-state | --pf-c-empty-state--m-xs--button--FontSize | 0.875rem | ||
| .pf-c-empty-state | --pf-c-empty-state--m-xs--PaddingTop | 1rem | ||
| .pf-c-empty-state | --pf-c-empty-state--m-xs--PaddingRight | 1rem | ||
| .pf-c-empty-state | --pf-c-empty-state--m-xs--PaddingBottom | 1rem | ||
| .pf-c-empty-state | --pf-c-empty-state--m-xs--PaddingLeft | 1rem | ||
| .pf-c-empty-state | --pf-c-empty-state--m-xs__icon--MarginBottom | 1rem | ||
| .pf-c-empty-state | --pf-c-empty-state--m-xs__body--MarginTop | 1rem | ||
| .pf-c-empty-state | --pf-c-empty-state--m-xs__primary--MarginTop | 1rem | ||
| .pf-c-empty-state | --pf-c-empty-state--m-xs__secondary--MarginTop | 1rem | ||
| .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-xs | --pf-c-empty-state--PaddingTop | 1rem | ||
| .pf-c-empty-state.pf-m-xs | --pf-c-empty-state--PaddingRight | 1rem | ||
| .pf-c-empty-state.pf-m-xs | --pf-c-empty-state--PaddingBottom | 1rem | ||
| .pf-c-empty-state.pf-m-xs | --pf-c-empty-state--PaddingLeft | 1rem | ||
| .pf-c-empty-state.pf-m-xs | --pf-c-empty-state__content--MaxWidth | 21.875rem | ||
| .pf-c-empty-state.pf-m-xs | --pf-c-empty-state__icon--MarginBottom | 1rem | ||
| .pf-c-empty-state.pf-m-xs | --pf-c-empty-state__body--MarginTop | 1rem | ||
| .pf-c-empty-state.pf-m-xs | --pf-c-empty-state__primary--MarginTop | 1rem | ||
| .pf-c-empty-state.pf-m-xs | --pf-c-empty-state__secondary--MarginTop | 1rem | ||
| .pf-c-empty-state.pf-m-xs .pf-c-button | --pf-c-button--FontSize | 0.875rem | ||
| .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