package.docs.components.EmptyState.examples.EmptyState.md Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation
Assets, source, tooling, and content for PatternFly 4
The newest version!
---
id: Empty state
section: components
cssPrefix: pf-v6-c-empty-state
---## Examples

### Basic

```html

  
    
      
        
      
      
        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

```html

  
    
      
        
      
      
        Empty state
      
    

    This represents an the empty state pattern in PatternFly. The icon is optional.

    
      
        
        
        
        
        
        
      
    
  


```

### Small

```html

  
    
      
        
      
      
        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

```html

  
    
      
        
      
      
        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

```html

  
    
      
        
      
      
        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

```html

  
    
      
        
      
      
        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` | `` |  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` | `` |  Creates the content container. **Required** |
| `.pf-v6-c-empty-state__header` | `` |  Creates the header container. **Required** |
| `.pf-v6-c-empty-state__title` | `` |  Creates the empty state title container. **Required** |
| `.pf-v6-c-empty-state__title-text` | ``, `
`, `
`, `
`, `
`, ``, `` |  Creates the empty state title text container. |
| `.pf-v6-c-empty-state__icon` | `` |  Creates the empty state icon container. |
| `.pf-v6-c-empty-state__body` | `` |  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` | `` |  Creates the footer container. **Required** |
| `.pf-v6-c-empty-state__actions` | `` |  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. |