## Examples

### Basic


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### Secondary


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### Header


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

### Footer


import Example4 from './Example4.html?raw'

<LiveExample html={Example4} />

### Header and footer


import Example5 from './Example5.html?raw'

<LiveExample html={Example5} />

### No body


import Example6 from './Example6.html?raw'

<LiveExample html={Example6} />

### Raised


import Example7 from './Example7.html?raw'

<LiveExample html={Example7} />

### Bordered


import Example8 from './Example8.html?raw'

<LiveExample html={Example8} />

### Scrollable


import Example9 from './Example9.html?raw'

<LiveExample html={Example9} />

### Scrollable with header and footer


import Example10 from './Example10.html?raw'

<LiveExample html={Example10} />

## Documentation

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-panel` | `<div>` | Initiates the panel. **Required** |
| `.pf-v6-c-panel__header` | `<div>` | Initiates the panel header. |
| `.pf-v6-c-panel__main` | `<div>` | Initiates the panel main content. |
| `.pf-v6-c-panel__main-body` | `<div>` | Initiates a panel content body container. |
| `.pf-v6-c-panel__menu` | `<div>` | Initiates a panel menu container. |
| `.pf-v6-c-panel__footer` | `<div>` | Initiates the panel footer. |
| `.pf-m-bordered` | `.pf-v6-c-panel` | Modifies the panel for bordered styles. |
| `.pf-m-raised` | `.pf-v6-c-panel` | Modifies the panel for raised styles. |
| `.pf-m-scrollable` | `.pf-v6-c-panel` | Modifies the panel for scrollable styles. |
| `.pf-m-secondary` | `.pf-v6-c-panel` | Modifies the panel for secondary styles. |