Skip to Content
Patternfly Logo

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

The Notification Drawer uses the Drawer component to provide a place for viewing and managing incoming notifications.

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--pf-c-notification-drawer--BackgroundColorc_notification_drawer_BackgroundColor
#fafafa
.pf-c-notification-drawer--pf-c-notification-drawer__header--PaddingTopc_notification_drawer__header_PaddingTop
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__header--PaddingRightc_notification_drawer__header_PaddingRight
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__header--PaddingBottomc_notification_drawer__header_PaddingBottom
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__header--PaddingLeftc_notification_drawer__header_PaddingLeft
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__header--BackgroundColorc_notification_drawer__header_BackgroundColor
#fff
.pf-c-notification-drawer--pf-c-notification-drawer__header--BoxShadowc_notification_drawer__header_BoxShadow
0 0.25rem 0.625rem -0.25rem rgba(3, 3, 3, 0.12)
.pf-c-notification-drawer--pf-c-notification-drawer__header--ZIndexc_notification_drawer__header_ZIndex
200
.pf-c-notification-drawer--pf-c-notification-drawer__header-title--FontSizec_notification_drawer__header_title_FontSize
1.25rem
.pf-c-notification-drawer--pf-c-notification-drawer__header-status--MarginLeftc_notification_drawer__header_status_MarginLeft
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__body--ZIndexc_notification_drawer__body_ZIndex
100
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--PaddingTopc_notification_drawer__list_item_PaddingTop
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--PaddingRightc_notification_drawer__list_item_PaddingRight
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--PaddingBottomc_notification_drawer__list_item_PaddingBottom
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--PaddingLeftc_notification_drawer__list_item_PaddingLeft
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--BackgroundColorc_notification_drawer__list_item_BackgroundColor
#fff
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--BoxShadowc_notification_drawer__list_item_BoxShadow
inset 0 0.25rem 0.625rem -0.25rem rgba(3, 3, 3, 0.12)
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--BorderBottomWidthc_notification_drawer__list_item_BorderBottomWidth
1px
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--BorderBottomColorc_notification_drawer__list_item_BorderBottomColor
transparent
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--OutlineOffsetc_notification_drawer__list_item_OutlineOffset
-0.25rem
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--before--Widthc_notification_drawer__list_item_before_Width
3px
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--before--Topc_notification_drawer__list_item_before_Top
0
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--before--Bottomc_notification_drawer__list_item_before_Bottom
calc(1px * -1)
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-info__list-item-header-icon--Colorc_notification_drawer__list_item_m_info__list_item_header_icon_Color
#73bcf7
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-info__list-item--before--BackgroundColorc_notification_drawer__list_item_m_info__list_item_before_BackgroundColor
#73bcf7
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-warning__list-item-header-icon--Colorc_notification_drawer__list_item_m_warning__list_item_header_icon_Color
#f0ab00
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-warning__list-item--before--BackgroundColorc_notification_drawer__list_item_m_warning__list_item_before_BackgroundColor
#f0ab00
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-danger__list-item-header-icon--Colorc_notification_drawer__list_item_m_danger__list_item_header_icon_Color
#c9190b
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-danger__list-item--before--BackgroundColorc_notification_drawer__list_item_m_danger__list_item_before_BackgroundColor
#c9190b
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-success__list-item-header-icon--Colorc_notification_drawer__list_item_m_success__list_item_header_icon_Color
#92d400
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColorc_notification_drawer__list_item_m_success__list_item_before_BackgroundColor
#92d400
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-read--BackgroundColorc_notification_drawer__list_item_m_read_BackgroundColor
#fafafa
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-read--BorderBottomColorc_notification_drawer__list_item_m_read_BorderBottomColor
#d2d2d2
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-read--before--Topc_notification_drawer__list_item_m_read_before_Top
calc(1px * -1)
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-read--before--Bottomc_notification_drawer__list_item_m_read_before_Bottom
0
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-read--before--BackgroundColorc_notification_drawer__list_item_m_read_before_BackgroundColor
transparent
.pf-c-notification-drawer--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--pf-c-notification-drawer__list-item--list-item--m-read--BoxShadowc_notification_drawer__list_item_list_item_m_read_BoxShadow
inset 0 0.25rem 0.625rem -0.25rem rgba(3, 3, 3, 0.12)
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-hoverable--hover--ZIndexc_notification_drawer__list_item_m_hoverable_hover_ZIndex
100
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-hoverable--hover--BoxShadowc_notification_drawer__list_item_m_hoverable_hover_BoxShadow
0 -0.3125rem 0.625rem -0.25rem rgba(3, 3, 3, 0.25), 0 0.3125rem 0.625rem -0.25rem rgba(3, 3, 3, 0.25)
.pf-c-notification-drawer--pf-c-notification-drawer__list-item-header--MarginBottomc_notification_drawer__list_item_header_MarginBottom
0.25rem
.pf-c-notification-drawer--pf-c-notification-drawer__list-item-header-icon--Colorc_notification_drawer__list_item_header_icon_Color
inherit
.pf-c-notification-drawer--pf-c-notification-drawer__list-item-header-icon--MarginRightc_notification_drawer__list_item_header_icon_MarginRight
0.5rem
.pf-c-notification-drawer--pf-c-notification-drawer__list-item-header-title--FontWeightc_notification_drawer__list_item_header_title_FontWeight
600
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-read__list-item-header-title--FontWeightc_notification_drawer__list_item_m_read__list_item_header_title_FontWeight
400
.pf-c-notification-drawer--pf-c-notification-drawer__list-item-description--MarginBottomc_notification_drawer__list_item_description_MarginBottom
0.5rem
.pf-c-notification-drawer--pf-c-notification-drawer__list-item-timestamp--Colorc_notification_drawer__list_item_timestamp_Color
#737679
.pf-c-notification-drawer--pf-c-notification-drawer__list-item-timestamp--FontSizec_notification_drawer__list_item_timestamp_FontSize
0.875rem
.pf-c-notification-drawer--pf-c-notification-drawer__group--m-expanded--group--BorderTopWidthc_notification_drawer__group_m_expanded_group_BorderTopWidth
1px
.pf-c-notification-drawer--pf-c-notification-drawer__group--m-expanded--group--BorderTopColorc_notification_drawer__group_m_expanded_group_BorderTopColor
#d2d2d2
.pf-c-notification-drawer--pf-c-notification-drawer__group--m-expanded--MinHeightc_notification_drawer__group_m_expanded_MinHeight
18.75rem
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle--PaddingTopc_notification_drawer__group_toggle_PaddingTop
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle--PaddingRightc_notification_drawer__group_toggle_PaddingRight
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle--PaddingBottomc_notification_drawer__group_toggle_PaddingBottom
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle--PaddingLeftc_notification_drawer__group_toggle_PaddingLeft
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle--BackgroundColorc_notification_drawer__group_toggle_BackgroundColor
#fff
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle--BorderColorc_notification_drawer__group_toggle_BorderColor
#d2d2d2
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle--BorderBottomWidthc_notification_drawer__group_toggle_BorderBottomWidth
1px
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle--OutlineOffsetc_notification_drawer__group_toggle_OutlineOffset
-0.25rem
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle-count--MarginRightc_notification_drawer__group_toggle_count_MarginRight
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle-icon--MarginRightc_notification_drawer__group_toggle_icon_MarginRight
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle-icon--Colorc_notification_drawer__group_toggle_icon_Color
#737679
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle-icon--Transitionc_notification_drawer__group_toggle_icon_Transition
.2s ease-in 0s
.pf-c-notification-drawer--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__list-item.pf-m-read--pf-c-notification-drawer__list-item--BoxShadowc_notification_drawer__list_item_BoxShadow
none
.pf-c-notification-drawer__list-item.pf-m-read--pf-c-notification-drawer__list-item--BorderBottomColorc_notification_drawer__list_item_BorderBottomColor
#d2d2d2
.pf-c-notification-drawer__list-item.pf-m-read--pf-c-notification-drawer__list-item--BackgroundColorc_notification_drawer__list_item_BackgroundColor
#fafafa
.pf-c-notification-drawer__list-item.pf-m-read--pf-c-notification-drawer__list-item--before--Topc_notification_drawer__list_item_before_Top
calc(1px * -1)
.pf-c-notification-drawer__list-item.pf-m-read--pf-c-notification-drawer__list-item--before--Bottomc_notification_drawer__list_item_before_Bottom
0
.pf-c-notification-drawer__list-item.pf-m-read--pf-c-notification-drawer__list-item--before--BackgroundColorc_notification_drawer__list_item_before_BackgroundColor
transparent
.pf-c-notification-drawer__list-item.pf-m-read--pf-c-notification-drawer__list-item-header-title--FontWeightc_notification_drawer__list_item_header_title_FontWeight
400
.pf-c-notification-drawer__list-item:not(.pf-m-read) + .pf-c-notification-drawer__list-item.pf-m-read--pf-c-notification-drawer__list-item--BoxShadowc_notification_drawer__list_item_BoxShadow
inset 0 0.25rem 0.625rem -0.25rem rgba(3, 3, 3, 0.12)
.pf-c-notification-drawer__list-item:not(.pf-m-read) + .pf-c-notification-drawer__list-item.pf-m-read--pf-c-notification-drawer__list-item--before--Topc_notification_drawer__list_item_before_Top
0
.pf-c-notification-drawer__list-item.pf-m-info--pf-c-notification-drawer__list-item--before--BackgroundColorc_notification_drawer__list_item_before_BackgroundColor
#73bcf7
.pf-c-notification-drawer__list-item.pf-m-info--pf-c-notification-drawer__list-item-header-icon--Colorc_notification_drawer__list_item_header_icon_Color
#73bcf7
.pf-c-notification-drawer__list-item.pf-m-warning--pf-c-notification-drawer__list-item--before--BackgroundColorc_notification_drawer__list_item_before_BackgroundColor
#f0ab00
.pf-c-notification-drawer__list-item.pf-m-warning--pf-c-notification-drawer__list-item-header-icon--Colorc_notification_drawer__list_item_header_icon_Color
#f0ab00
.pf-c-notification-drawer__list-item.pf-m-danger--pf-c-notification-drawer__list-item--before--BackgroundColorc_notification_drawer__list_item_before_BackgroundColor
#c9190b
.pf-c-notification-drawer__list-item.pf-m-danger--pf-c-notification-drawer__list-item-header-icon--Colorc_notification_drawer__list_item_header_icon_Color
#c9190b
.pf-c-notification-drawer__list-item.pf-m-success--pf-c-notification-drawer__list-item--before--BackgroundColorc_notification_drawer__list_item_before_BackgroundColor
#92d400
.pf-c-notification-drawer__list-item.pf-m-success--pf-c-notification-drawer__list-item-header-icon--Colorc_notification_drawer__list_item_header_icon_Color
#92d400
.pf-c-notification-drawer__group .pf-c-notification-drawer__list-item:last-child--pf-c-notification-drawer__list-item--BorderBottomWidthc_notification_drawer__list_item_BorderBottomWidth
0