Notification drawer

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

--pf-c-notification-drawer__body--ZIndexc_notification_drawer__body_ZIndex
var(--pf-global--ZIndex--xs)
--pf-c-notification-drawer__group--m-expanded__group-toggle-icon--Transformc_notification_drawer__group_m_expanded__group_toggle_icon_Transform
rotate(90deg)
--pf-c-notification-drawer__group--m-expanded--group--BorderTopColorc_notification_drawer__group_m_expanded_group_BorderTopColor
var(--pf-global--BorderColor--dark-100)
--pf-c-notification-drawer__group--m-expanded--group--BorderTopWidthc_notification_drawer__group_m_expanded_group_BorderTopWidth
var(--pf-global--BorderWidth--sm)
--pf-c-notification-drawer__group--m-expanded--MinHeightc_notification_drawer__group_m_expanded_MinHeight
18.75rem
--pf-c-notification-drawer__group-toggle--BackgroundColorc_notification_drawer__group_toggle_BackgroundColor
var(--pf-global--BackgroundColor--light-100)
--pf-c-notification-drawer__group-toggle--BorderBottomWidthc_notification_drawer__group_toggle_BorderBottomWidth
var(--pf-global--BorderWidth--sm)
--pf-c-notification-drawer__group-toggle--BorderColorc_notification_drawer__group_toggle_BorderColor
var(--pf-global--BorderColor--dark-100)
--pf-c-notification-drawer__group-toggle-count--MarginRightc_notification_drawer__group_toggle_count_MarginRight
var(--pf-global--spacer--md)
--pf-c-notification-drawer__group-toggle-icon--Colorc_notification_drawer__group_toggle_icon_Color
var(--pf-global--Color--dark-200)
--pf-c-notification-drawer__group-toggle-icon--MarginRightc_notification_drawer__group_toggle_icon_MarginRight
var(--pf-global--spacer--md)
--pf-c-notification-drawer__group-toggle-icon--Transitionc_notification_drawer__group_toggle_icon_Transition
.2s ease-in 0s
--pf-c-notification-drawer__group-toggle--OutlineOffsetc_notification_drawer__group_toggle_OutlineOffset
-0.25rem
--pf-c-notification-drawer__group-toggle--PaddingBottomc_notification_drawer__group_toggle_PaddingBottom
var(--pf-global--spacer--md)
--pf-c-notification-drawer__group-toggle--PaddingLeftc_notification_drawer__group_toggle_PaddingLeft
var(--pf-global--spacer--md)
--pf-c-notification-drawer__group-toggle--PaddingRightc_notification_drawer__group_toggle_PaddingRight
var(--pf-global--spacer--md)
--pf-c-notification-drawer__group-toggle--PaddingTopc_notification_drawer__group_toggle_PaddingTop
var(--pf-global--spacer--md)
--pf-c-notification-drawer__header--BackgroundColorc_notification_drawer__header_BackgroundColor
var(--pf-global--BackgroundColor--light-100)
--pf-c-notification-drawer__header--BoxShadowc_notification_drawer__header_BoxShadow
var(--pf-global--BoxShadow--sm-bottom)
--pf-c-notification-drawer__header--PaddingBottomc_notification_drawer__header_PaddingBottom
var(--pf-global--spacer--md)
--pf-c-notification-drawer__header--PaddingLeftc_notification_drawer__header_PaddingLeft
var(--pf-global--spacer--md)
--pf-c-notification-drawer__header--PaddingRightc_notification_drawer__header_PaddingRight
var(--pf-global--spacer--md)
--pf-c-notification-drawer__header--PaddingTopc_notification_drawer__header_PaddingTop
var(--pf-global--spacer--md)
--pf-c-notification-drawer__header-status--MarginLeftc_notification_drawer__header_status_MarginLeft
var(--pf-global--spacer--md)
--pf-c-notification-drawer__header-title--FontSizec_notification_drawer__header_title_FontSize
var(--pf-global--FontSize--xl)
--pf-c-notification-drawer__header--ZIndexc_notification_drawer__header_ZIndex
var(--pf-global--ZIndex--sm)
--pf-c-notification-drawer__list-item--BackgroundColorc_notification_drawer__list_item_BackgroundColor
var(--pf-global--BackgroundColor--200)
--pf-c-notification-drawer__list-item--before--BackgroundColorc_notification_drawer__list_item_before_BackgroundColor
transparent
--pf-c-notification-drawer__list-item--before--Bottomc_notification_drawer__list_item_before_Bottom
0
--pf-c-notification-drawer__list-item--before--Topc_notification_drawer__list_item_before_Top
calc(var(--pf-global--BorderWidth--sm) * -1)
--pf-c-notification-drawer__list-item--before--Widthc_notification_drawer__list_item_before_Width
var(--pf-global--BorderWidth--lg)
--pf-c-notification-drawer__list-item--BorderBottomColorc_notification_drawer__list_item_BorderBottomColor
var(--pf-global--BorderColor--dark-100)
--pf-c-notification-drawer__list-item--BorderBottomWidthc_notification_drawer__list_item_BorderBottomWidth
0
--pf-c-notification-drawer__list-item--BoxShadowc_notification_drawer__list_item_BoxShadow
inset var(--pf-global--BoxShadow--sm-bottom)
--pf-c-notification-drawer__list-item-description--MarginBottomc_notification_drawer__list_item_description_MarginBottom
var(--pf-global--spacer--sm)
--pf-c-notification-drawer__list-item-header-icon--Colorc_notification_drawer__list_item_header_icon_Color
var(--pf-global--success-color--100)
--pf-c-notification-drawer__list-item-header-icon--MarginRightc_notification_drawer__list_item_header_icon_MarginRight
var(--pf-global--spacer--sm)
--pf-c-notification-drawer__list-item-header--MarginBottomc_notification_drawer__list_item_header_MarginBottom
var(--pf-global--spacer--xs)
--pf-c-notification-drawer__list-item-header-title--FontWeightc_notification_drawer__list_item_header_title_FontWeight
var(--pf-global--FontWeight--normal)
--pf-c-notification-drawer__list-item--list-item--m-read--before--Topc_notification_drawer__list_item_list_item_m_read_before_Top
0
--pf-c-notification-drawer__list-item--list-item--m-read--BoxShadowc_notification_drawer__list_item_list_item_m_read_BoxShadow
inset var(--pf-global--BoxShadow--sm-bottom)
--pf-c-notification-drawer__list-item--m-danger__list-item--before--BackgroundColorc_notification_drawer__list_item_m_danger__list_item_before_BackgroundColor
var(--pf-global--danger-color--100)
--pf-c-notification-drawer__list-item--m-danger__list-item-header-icon--Colorc_notification_drawer__list_item_m_danger__list_item_header_icon_Color
var(--pf-global--danger-color--100)
--pf-c-notification-drawer__list-item--m-hoverable--hover--BoxShadowc_notification_drawer__list_item_m_hoverable_hover_BoxShadow
var(--pf-global--BoxShadow--md-top), var(--pf-global--BoxShadow--md-bottom)
--pf-c-notification-drawer__list-item--m-hoverable--hover--ZIndexc_notification_drawer__list_item_m_hoverable_hover_ZIndex
var(--pf-global--ZIndex--xs)
--pf-c-notification-drawer__list-item--m-info__list-item--before--BackgroundColorc_notification_drawer__list_item_m_info__list_item_before_BackgroundColor
var(--pf-global--info-color--100)
--pf-c-notification-drawer__list-item--m-info__list-item-header-icon--Colorc_notification_drawer__list_item_m_info__list_item_header_icon_Color
var(--pf-global--info-color--100)
--pf-c-notification-drawer__list-item--m-read__list-item-header-title--FontWeightc_notification_drawer__list_item_m_read__list_item_header_title_FontWeight
var(--pf-global--FontWeight--normal)
--pf-c-notification-drawer__list-item--m-read--BackgroundColorc_notification_drawer__list_item_m_read_BackgroundColor
var(--pf-global--BackgroundColor--200)
--pf-c-notification-drawer__list-item--m-read--before--BackgroundColorc_notification_drawer__list_item_m_read_before_BackgroundColor
transparent
--pf-c-notification-drawer__list-item--m-read--before--Bottomc_notification_drawer__list_item_m_read_before_Bottom
0
--pf-c-notification-drawer__list-item--m-read--before--Topc_notification_drawer__list_item_m_read_before_Top
calc(var(--pf-global--BorderWidth--sm) * -1)
--pf-c-notification-drawer__list-item--m-read--BorderBottomColorc_notification_drawer__list_item_m_read_BorderBottomColor
var(--pf-global--BorderColor--dark-100)
--pf-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColorc_notification_drawer__list_item_m_success__list_item_before_BackgroundColor
var(--pf-global--success-color--100)
--pf-c-notification-drawer__list-item--m-success__list-item-header-icon--Colorc_notification_drawer__list_item_m_success__list_item_header_icon_Color
var(--pf-global--success-color--100)
--pf-c-notification-drawer__list-item--m-warning__list-item--before--BackgroundColorc_notification_drawer__list_item_m_warning__list_item_before_BackgroundColor
var(--pf-global--warning-color--100)
--pf-c-notification-drawer__list-item--m-warning__list-item-header-icon--Colorc_notification_drawer__list_item_m_warning__list_item_header_icon_Color
var(--pf-global--warning-color--100)
--pf-c-notification-drawer__list-item--OutlineOffsetc_notification_drawer__list_item_OutlineOffset
-0.25rem
--pf-c-notification-drawer__list-item--PaddingBottomc_notification_drawer__list_item_PaddingBottom
var(--pf-global--spacer--md)
--pf-c-notification-drawer__list-item--PaddingLeftc_notification_drawer__list_item_PaddingLeft
var(--pf-global--spacer--md)
--pf-c-notification-drawer__list-item--PaddingRightc_notification_drawer__list_item_PaddingRight
var(--pf-global--spacer--md)
--pf-c-notification-drawer__list-item--PaddingTopc_notification_drawer__list_item_PaddingTop
var(--pf-global--spacer--md)
--pf-c-notification-drawer__list-item-timestamp--Colorc_notification_drawer__list_item_timestamp_Color
var(--pf-global--Color--dark-200)
--pf-c-notification-drawer__list-item-timestamp--FontSizec_notification_drawer__list_item_timestamp_FontSize
var(--pf-global--FontSize--sm)
--pf-c-notification-drawer--BackgroundColorc_notification_drawer_BackgroundColor
var(--pf-global--BackgroundColor--200)