Examples
Basic
Empty state
This represents an the empty state pattern in PatternFly. 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. The icon is optional.
Small
Empty state
This represents an the empty state pattern in PatternFly. 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. 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. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.
With status
You're all set
This represents an the empty state pattern in PatternFly. 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-v6-c-empty-state__icon | Hides icon for assistive technologies. Required |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v6-c-empty-state | <div> | Initiates an empty state component. The empty state centers its content ( .pf-v6-c-empty-state__content) vertically and horizontally. Required |
.pf-v6-c-empty-state__content | <div> | Creates the content container. Required |
.pf-v6-c-empty-state__header | <div> | Creates the header container. Required |
.pf-v6-c-empty-state__title | <div> | Creates the empty state title container. Required |
.pf-v6-c-empty-state__title-text | <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <div> | Creates the empty state title text container. |
.pf-v6-c-empty-state__icon | <div> | Creates the empty state icon container. |
.pf-v6-c-empty-state__body | <div> | Creates the empty state body content. There can be more than one .pf-v6-c-empty-state__body elements. |
.pf-v6-c-empty-state__footer | <div> | Creates the footer container. Required |
.pf-v6-c-empty-state__actions | <div> | Container for actions. Required |
.pf-m-xs | .pf-v6-c-empty-state | Modifies the empty state for an extra small variation and max-width. |
.pf-m-sm | .pf-v6-c-empty-state | Modifies the empty state for a small max-width. |
.pf-m-lg | .pf-v6-c-empty-state | Modifies the empty state for a large max-width. |
.pf-m-xl | .pf-v6-c-empty-state | Modifies the empty state for an extra large variation and max-width. |
.pf-m-full-height | .pf-v6-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-v6-c-empty-state__content. Note: this modifier requires the parent of .pf-v6-c-empty-state have an implicit or explicit height defined. |
.pf-m-danger | .pf-v6-c-empty-state | Modifies the empty state for danger status. |
.pf-m-warning | .pf-v6-c-empty-state | Modifies the empty state for warning status. |
.pf-m-success | .pf-v6-c-empty-state | Modifies the empty state for success status. |
.pf-m-info | .pf-v6-c-empty-state | Modifies the empty state for info status. |
.pf-m-custom | .pf-v6-c-empty-state | Modifies the empty state for custom status. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state--PaddingBlockStart | 2rem | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state--PaddingInlineEnd | 2rem | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state--PaddingBlockEnd | 2rem | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state--PaddingInlineStart | 2rem | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state--m-xs--PaddingBlockStart | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state--m-xs--PaddingInlineEnd | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state--m-xs--PaddingBlockEnd | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state--m-xs--PaddingInlineStart | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state__content--MaxWidth | none | ||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state--m-xs__content--MaxWidth | 21.875rem | ||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state--m-sm__content--MaxWidth | 25rem | ||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state--m-lg__content--MaxWidth | 37.5rem | ||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state__icon--MarginBlockEnd | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state__icon--FontSize | 3.5rem | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state__icon--Color | (In light theme) #707070 | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state--m-xs__icon--MarginBlockEnd | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state--m-xl__icon--MarginBlockEnd | 2rem | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state--m-xl__icon--FontSize | 6rem | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state--m-danger__icon--Color | (In light theme) #b1380b | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state--m-warning__icon--Color | (In light theme) #dca614 | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state--m-success__icon--Color | (In light theme) #3d7317 | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state--m-info__icon--Color | (In light theme) #5e40be | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state--m-custom__icon--Color | (In light theme) #147878 | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state__title-text--FontFamily | "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state__title-text--FontSize | 1.25rem | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state__title-text--FontWeight | 700 | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state__title-text--LineHeight | 1.3 | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state--m-xs__title-text--FontSize | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state--m-xl__title-text--FontSize | 2.25rem | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state--m-xl__title-text--LineHeight | 1.3 | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state__body--MarginBlockStart | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state__body--Color | (In light theme) #4d4d4d | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state--body--FontSize | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state--m-xs__body--FontSize | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state--m-xs__body--MarginBlockStart | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state--m-xl__body--FontSize | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state--m-xl__body--MarginBlockStart | 2rem | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state__footer--RowGap | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state__footer--MarginBlockStart | 2rem | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state--m-xs__footer--MarginBlockStart | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state__actions--RowGap | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-empty-state) | --pf-v6-c-empty-state__actions--ColumnGap | 1rem | ||
| ||||
| .pf-v6-c-empty-state.pf-m-xs | --pf-v6-c-empty-state--PaddingBlockStart | 1rem | ||
| ||||
| .pf-v6-c-empty-state.pf-m-xs | --pf-v6-c-empty-state--PaddingInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-empty-state.pf-m-xs | --pf-v6-c-empty-state--PaddingBlockEnd | 1rem | ||
| ||||
| .pf-v6-c-empty-state.pf-m-xs | --pf-v6-c-empty-state--PaddingInlineStart | 1rem | ||
| ||||
| .pf-v6-c-empty-state.pf-m-xs | --pf-v6-c-empty-state__title-text--FontSize | 1rem | ||
| ||||
| .pf-v6-c-empty-state.pf-m-xs | --pf-v6-c-empty-state__content--MaxWidth | 21.875rem | ||
| ||||
| .pf-v6-c-empty-state.pf-m-xs | --pf-v6-c-empty-state__icon--MarginBlockEnd | 1.5rem | ||
| ||||
| .pf-v6-c-empty-state.pf-m-xs | --pf-v6-c-empty-state__body--MarginBlockStart | 1rem | ||
| ||||
| .pf-v6-c-empty-state.pf-m-xs | --pf-v6-c-empty-state--body--FontSize | 1rem | ||
| ||||
| .pf-v6-c-empty-state.pf-m-xs | --pf-v6-c-empty-state__footer--MarginBlockStart | 1rem | ||
| ||||
| .pf-v6-c-empty-state.pf-m-sm | --pf-v6-c-empty-state__content--MaxWidth | 25rem | ||
| ||||
| .pf-v6-c-empty-state.pf-m-lg | --pf-v6-c-empty-state__content--MaxWidth | 37.5rem | ||
| ||||
| .pf-v6-c-empty-state.pf-m-xl | --pf-v6-c-empty-state__body--MarginBlockStart | 2rem | ||
| ||||
| .pf-v6-c-empty-state.pf-m-xl | --pf-v6-c-empty-state--body--FontSize | 1rem | ||
| ||||
| .pf-v6-c-empty-state.pf-m-xl | --pf-v6-c-empty-state__icon--MarginBlockEnd | 2rem | ||
| ||||
| .pf-v6-c-empty-state.pf-m-xl | --pf-v6-c-empty-state__icon--FontSize | 6rem | ||
| ||||
| .pf-v6-c-empty-state.pf-m-xl | --pf-v6-c-empty-state__title-text--FontSize | 2.25rem | ||
| ||||
| .pf-v6-c-empty-state.pf-m-xl | --pf-v6-c-empty-state__title-text--LineHeight | 1.3 | ||
| ||||
| .pf-v6-c-empty-state.pf-m-danger | --pf-v6-c-empty-state__icon--Color | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-empty-state.pf-m-warning | --pf-v6-c-empty-state__icon--Color | (In light theme) #dca614 | ||
| ||||
| .pf-v6-c-empty-state.pf-m-success | --pf-v6-c-empty-state__icon--Color | (In light theme) #3d7317 | ||
| ||||
| .pf-v6-c-empty-state.pf-m-info | --pf-v6-c-empty-state__icon--Color | (In light theme) #5e40be | ||
| ||||
| .pf-v6-c-empty-state.pf-m-custom | --pf-v6-c-empty-state__icon--Color | (In light theme) #147878 | ||
| ||||
