Notification drawer

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum
ExamplesCSS Variables

Examples

Basic

Notifications

3 unread
  • Info notification:Unread info notification title

    This is an info notification description.
    5 minutes ago
  • Danger notification:Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.

    This is a danger notification description. This is a long description to show how the title will wrap if it is long and wraps to multiple lines.
    10 minutes ago
  • Warning notification:Read warning notification title

    This is a warning notification description.
    20 minutes ago
  • Success notification:Read success notification title

    This is a success notification description.
    30 minutes ago

Groups

Notifications

3 unread

  • Info notification:Unread info notification title

    This is an info notification description.
    5 minutes ago
  • Danger notification:Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.

    This is a danger notification description. This is a long description to show how the title will wrap if it is long and wraps to multiple lines.
    10 minutes ago
  • Warning notification:Read warning notification title

    This is a warning notification description.
    20 minutes ago
  • Success notification:Read success notification title

    This is a success notification description.
    30 minutes ago

Accessibility

AttributeApplied toOutcome
aria-expanded="false".pf-c-notification-drawer__group-toggleIndicates that the group notification list is hidden.
aria-expanded="true".pf-c-notification-drawer__group-toggleIndicates that the group notification list is visible.
hidden.pf-c-notification-drawer__listIndicates 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-c-notification-drawer__list-item.pf-m-hoverableInserts the hoverable list item into the tab order of the page so that it is focusable.
aria-hidden="true".pf-c-notification-drawer__group-toggle-icon > *, .pf-c-notification-drawer__list-item-header-icon > *Hides icon for assistive technologies.

Usage

ClassApplied toOutcome
.pf-c-notification-drawer<div>Initiates the notification drawer. Required
.pf-c-notification-drawer__header<div>Initiates the notification drawer header. Required
.pf-c-notification-drawer__header-title<h1>Initiates the notification drawer header title. Required
.pf-c-notification-drawer__header-status<span>Initiates the notification drawer header status.
.pf-c-notification-drawer__header-action<div>Initiates the notification drawer header action.
.pf-c-notification-drawer__body<div>Initiates the notification drawer body. Required
.pf-c-notification-drawer__list<ul>Initiates a notification list. Required
.pf-c-notification-drawer__list-item<li>Initiates a notification list item. Always use with a state modifier - one of .pf-m-info, .pf-m-warning, .pf-m-danger, .pf-m-success. Required
.pf-c-notification-drawer__list-item-header<div>Initiates a notification list item header. Required
.pf-c-notification-drawer__list-item-header-icon<span>Initiates a notification list item header icon. Required
.pf-c-notification-drawer__list-item-header-title<h2>Initiates a notification list item header title. Required
.pf-c-notification-drawer__list-item-action<div>Initiates a notification list item action.
.pf-c-notification-drawer__list-item-description<div>Initiates a notification list item description. Required
.pf-c-notification-drawer__list-item-timestamp<div>Initiates a notification list item timestamp. Required
.pf-c-notification-drawer__group-list<div>Initiates a notification group list. Required when notifications are grouped
.pf-c-notification-drawer__group<section>Initiates a notification group. Required
.pf-c-notification-drawer__group-toggle<button>Initiates a notification group toggle. Required
.pf-c-notification-drawer__group-title<div>Initiates a notification group toggle title. Required
.pf-c-notification-drawer__group-count<div>Initiates a notification group toggle count.
.pf-c-notification-drawer__group-icon<span>Initiates a notification group toggle icon. Required
.pf-m-info.pf-c-notification-drawer__list-itemModifies a notification list item for the info state.
.pf-m-warning.pf-c-notification-drawer__list-itemModifies a notification list item for the warning state.
.pf-m-danger.pf-c-notification-drawer__list-itemModifies a notification list item for the danger state.
.pf-m-success.pf-c-notification-drawer__list-itemModifies a notification list item for the success state.
.pf-m-read.pf-c-notification-drawer__list-itemModifies a notification list item for the read state.
.pf-m-hoverable.pf-c-notification-drawer__list-itemModifies a notification list item hover states to inidicate it is clickable.
.pf-m-expanded.pf-c-notification-drawer__groupModifies a notification group for the expanded state.

CSS Variables