Skip to Content
Patternfly Logo

Notification drawer

DemosDocumentation

Demos

Collapsed

Skip to content
Avatar image

Main title

This is a demo of the Page component.

Expanded basics

Skip to content
Avatar image

Main title

This is a demo of the Page component.

Notifications

2 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
  • Default notification:Unread recommendation 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 recommendation notification description. This is a long description to show how the title will wrap if it is long and wraps to multiple lines.
    20 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
  • Success notification:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis odio risus. Ut dictum vitae sapien at posuere. Nullam suscipit massa quis lacus pellentesque scelerisque. Donec non maximus neque, quis ornare nunc. Vivamus in nibh sed libero feugiat feugiat. Nulla lacinia rutrum est, a commodo odio vestibulum suscipit. Nullam id quam et quam porttitor interdum quis nec tellus. Vestibulum arcu dui, pulvinar eu tellus in, semper mattis diam. Sed commodo tincidunt lacus non pulvinar. Curabitur tempor molestie vestibulum. Vivamus vel mi dignissim, efficitur neque eget, efficitur massa. Mauris vitae nunc augue. Donec augue lorem, malesuada et quam vitae, volutpat mattis nisi. Nullam nec venenatis ex, quis lobortis purus. Sed nisl dolor, mattis sit amet tincidunt quis, mollis sed massa.

    This example uses ".pf-m-truncate" to limit the title to a single line and truncate any overflow text with ellipses.
    40 minutes ago
  • Success notification:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis odio risus. Ut dictum vitae sapien at posuere. Nullam suscipit massa quis lacus pellentesque scelerisque. Donec non maximus neque, quis ornare nunc. Vivamus in nibh sed libero feugiat feugiat. Nulla lacinia rutrum est, a commodo odio vestibulum suscipit. Nullam id quam et quam porttitor interdum quis nec tellus. Vestibulum arcu dui, pulvinar eu tellus in, semper mattis diam. Sed commodo tincidunt lacus non pulvinar. Curabitur tempor molestie vestibulum. Vivamus vel mi dignissim, efficitur neque eget, efficitur massa. Mauris vitae nunc augue. Donec augue lorem, malesuada et quam vitae, volutpat mattis nisi. Nullam nec venenatis ex, quis lobortis purus. Sed nisl dolor, mattis sit amet tincidunt quis, mollis sed massa.

    This example uses ".pf-m-truncate" and sets "--pf-c-notification-drawer__list-item-header-title--max-lines: 2" to limit title to two lines and truncate any overflow text with ellipses.
    50 minutes ago

Expanded groups

Skip to content
Avatar image

Main title

This is a demo of the Page component.

Notifications

2 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
  • Default notification:Unread recommendation 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 recommendation notification description. This is a long description to show how the title will wrap if it is long and wraps to multiple lines.
    20 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
  • Success notification:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis odio risus. Ut dictum vitae sapien at posuere. Nullam suscipit massa quis lacus pellentesque scelerisque. Donec non maximus neque, quis ornare nunc. Vivamus in nibh sed libero feugiat feugiat. Nulla lacinia rutrum est, a commodo odio vestibulum suscipit. Nullam id quam et quam porttitor interdum quis nec tellus. Vestibulum arcu dui, pulvinar eu tellus in, semper mattis diam. Sed commodo tincidunt lacus non pulvinar. Curabitur tempor molestie vestibulum. Vivamus vel mi dignissim, efficitur neque eget, efficitur massa. Mauris vitae nunc augue. Donec augue lorem, malesuada et quam vitae, volutpat mattis nisi. Nullam nec venenatis ex, quis lobortis purus. Sed nisl dolor, mattis sit amet tincidunt quis, mollis sed massa.

    This example uses ".pf-m-truncate" to limit the title to a single line and truncate any overflow text with ellipses.
    40 minutes ago
  • Success notification:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis odio risus. Ut dictum vitae sapien at posuere. Nullam suscipit massa quis lacus pellentesque scelerisque. Donec non maximus neque, quis ornare nunc. Vivamus in nibh sed libero feugiat feugiat. Nulla lacinia rutrum est, a commodo odio vestibulum suscipit. Nullam id quam et quam porttitor interdum quis nec tellus. Vestibulum arcu dui, pulvinar eu tellus in, semper mattis diam. Sed commodo tincidunt lacus non pulvinar. Curabitur tempor molestie vestibulum. Vivamus vel mi dignissim, efficitur neque eget, efficitur massa. Mauris vitae nunc augue. Donec augue lorem, malesuada et quam vitae, volutpat mattis nisi. Nullam nec venenatis ex, quis lobortis purus. Sed nisl dolor, mattis sit amet tincidunt quis, mollis sed massa.

    This example uses ".pf-m-truncate" and sets "--pf-c-notification-drawer__list-item-header-title--max-lines: 2" to limit title to two lines and truncate any overflow text with ellipses.
    50 minutes ago

Documentation

This demo implements the notification drawer in context of the page component.