## Examples

### Basic


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

<LiveExample html={Example1} />

### Groups


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

<LiveExample html={Example2} />

### Accessibility

| Attribute | Applied to | Outcome |
| -- | -- | -- |
| `aria-expanded="false"` | `.pf-v6-c-notification-drawer__group-toggle` | Indicates that the group notification list is hidden. |
| `aria-expanded="true"` | `.pf-v6-c-notification-drawer__group-toggle` | Indicates that the group notification list is visible. |
| `hidden` | `.pf-v6-c-notification-drawer__list` | Indicates that the group notification list is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
| `tabindex="0"` | `.pf-v6-c-notification-drawer__list-item.pf-m-hoverable` | Inserts the hoverable list item into the tab order of the page so that it is focusable. |
| `aria-hidden="true"` | `.pf-v6-c-notification-drawer__group-toggle-icon > *`, `.pf-v6-c-notification-drawer__list-item-header-icon > *` | Hides icon for assistive technologies. |

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-notification-drawer` | `<div>` | Initiates the notification drawer. **Required** |
| `.pf-v6-c-notification-drawer__header` | `<div>` | Initiates the notification drawer header. **Required** |
| `.pf-v6-c-notification-drawer__header-title` | `<h1>` | Initiates the notification drawer header title. **Required** |
| `.pf-v6-c-notification-drawer__header-status` | `<span>` | Initiates the notification drawer header status. |
| `.pf-v6-c-notification-drawer__header-action` | `<div>` | Initiates the notification drawer header action. |
| `.pf-v6-c-notification-drawer__header-action-close` | `<div>` | Initiates the notification drawer header action button. |
| `.pf-v6-c-notification-drawer__body` | `<div>` | Initiates the notification drawer body. **Required** |
| `.pf-v6-c-notification-drawer__list` | `<ul>` | Initiates a notification list. **Required** |
| `.pf-v6-c-notification-drawer__list-item` | `<li>` | Initiates a notification list item. Always use with a state modifier class. **Required** |
| `.pf-v6-c-notification-drawer__list-item-header` | `<div>` | Initiates a notification list item header. **Required** |
| `.pf-v6-c-notification-drawer__list-item-header-icon` | `<span>` | Initiates a notification list item header icon. **Required** |
| `.pf-v6-c-notification-drawer__list-item-header-title` | `<h2>` | Initiates a notification list item header title. **Required** |
| `.pf-v6-c-notification-drawer__list-item-action` | `<div>` | Initiates a notification list item action. |
| `.pf-v6-c-notification-drawer__list-item-description` | `<div>` | Initiates a notification list item description. **Required** |
| `.pf-v6-c-notification-drawer__list-item-timestamp` | `<div>` | Initiates a notification list item timestamp. **Required** |
| `.pf-v6-c-notification-drawer__group-list` | `<div>` | Initiates a notification group list. **Required when notifications are grouped** |
| `.pf-v6-c-notification-drawer__group` | `<section>` | Initiates a notification group. **Required** |
| `.pf-v6-c-notification-drawer__group-toggle` | `<button>` | Initiates a notification group toggle. **Required** |
| `.pf-v6-c-notification-drawer__group-title` | `<div>` | Initiates a notification group toggle title. **Required** |
| `.pf-v6-c-notification-drawer__group-count` | `<div>` | Initiates a notification group toggle count. |
| `.pf-v6-c-notification-drawer__group-icon` | `<span>` | Initiates a notification group toggle icon. **Required** |
| `.pf-m-custom` | `.pf-v6-c-notification-drawer__list-item` | Modifies a notification list item for the custom state. |
| `.pf-m-info` | `.pf-v6-c-notification-drawer__list-item` | Modifies a notification list item for the info state. |
| `.pf-m-warning` | `.pf-v6-c-notification-drawer__list-item` | Modifies a notification list item for the warning state. |
| `.pf-m-danger` | `.pf-v6-c-notification-drawer__list-item` | Modifies a notification list item for the danger state. |
| `.pf-m-success` | `.pf-v6-c-notification-drawer__list-item` | Modifies a notification list item for the success state. |
| `.pf-m-read` | `.pf-v6-c-notification-drawer__list-item` | Modifies a notification list item for the read state. |
| `.pf-m-hoverable` | `.pf-v6-c-notification-drawer__list-item` | Modifies a notification list item hover states to inidicate it is clickable. |
| `.pf-m-expanded` | `.pf-v6-c-notification-drawer__group` | Modifies a notification group for the expanded state. |
| `.pf-m-truncate` | `.pf-v6-c-notification-drawer__list-item-header-title` |  Modifies the title to display a single line and truncate any overflow text with ellipses. **Note:** you can specify the max number of lines to show by setting the `--pf-v6-c-notification-drawer__list-item-header-title--max-lines` (the default value is `1`). |
| `.pf-m-no-offset` | `.pf-v6-c-notification-drawer__list-item-action` | Modifies a notification item action to remove the vertical offset for action alignment. |