---
id: 'Hero'
beta: true
section: components
cssPrefix: pf-v6-c-hero
---## Examples

### Basic

```html isBeta
<div class="pf-v6-c-hero">
  <div class="pf-v6-c-hero__body">Basic hero content</div>
</div>

```

## Documentation

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-hero` | `<div>` | Initiates the hero. **Required** |
| `.pf-v6-c-hero__body` | `<div>` | Initiates the hero body. |
| `.pf-m-glass` | `.pf-v6-c-hero` | Applies glass styles when glass theme is enabled. |
