package.docs.demos.NotificationDrawer.examples.NotificationDrawer.md Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation
Assets, source, tooling, and content for PatternFly 4
The newest version!
---
id: Notification drawer
section: components
---## Demos

### Collapsed

```html isFullscreen

  
    
      Skip to content
    
  
  
    
      
        
      
      
        
          
        
      
    
    
      
        
          
            
              
                
              

              
                
                  
                
                
                  
                
                
                  
                
              

              
                
              
            
          
        
      
    
  
  
    
      
        
          
            
              System panel
            
          
          
            
              Policy
            
          
          
            
              Authentication
            
          
          
            
              Network services
            
          
          
            
              Server
            
          
        
      
    
  
  
    
      
        
          
            
              
                
                  
                    
                      
                        Section home
                      
                      
                        
                          
                        

                        Section title
                      
                      
                        
                          
                        

                        Section title
                      
                      
                        
                          
                        

                        Section landing
                      
                    
                  
                
              
              
                
                  
                    Main title
                    This is a full page demo.
                  
                
              
              
                
                  
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                  
                
              
            
          
        
        
          
            
              
                Notifications
                0 unread
                
                  
                
              
              
                
                  
                    
                      
                        
                      
                      
                        Info notification:
                        Read
                        info notification title
                      
                    
                    
                      
                    
                    This is an info notification description.
                    5 minutes ago
                  

                  
                    
                      
                        
                      
                      
                        Custom notification:
                        Read
                        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.
                    10 minutes ago
                  

                  
                    
                      
                        
                      
                      
                        Custom notification:
                        Read
                        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-v6-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
                  
                  
                    
                      
                        
                      
                      
                        Success notification:
                        Notification drawer item title
                      
                    
                    
                      
                    
                    This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.
                    55 minutes ago
                  
                
              
            
          
        
      
    
  


```

### Expanded read

```html isFullscreen

  
    
      Skip to content
    
  
  
    
      
        
      
      
        
          
        
      
    
    
      
        
          
            
              
                
              

              
                
                  
                
                
                  
                
                
                  
                
              

              
                
              
            
          
        
      
    
  
  
    
      
        
          
            
              System panel
            
          
          
            
              Policy
            
          
          
            
              Authentication
            
          
          
            
              Network services
            
          
          
            
              Server
            
          
        
      
    
  
  
    
      
        
          
            
              
                
                  
                    
                      
                        Section home
                      
                      
                        
                          
                        

                        Section title
                      
                      
                        
                          
                        

                        Section title
                      
                      
                        
                          
                        

                        Section landing
                      
                    
                  
                
              
              
                
                  
                    Main title
                    This is a full page demo.
                  
                
              
              
                
                  
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                  
                
              
            
          
        
        
          
            
              
                Notifications
                0 unread
                
                  
                
              
              
                
                  
                    
                      
                        
                      
                      
                        Info notification:
                        Read
                        info notification title
                      
                    
                    
                      
                    
                    This is an info notification description.
                    5 minutes ago
                  

                  
                    
                      
                        
                      
                      
                        Custom notification:
                        Read
                        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.
                    10 minutes ago
                  

                  
                    
                      
                        
                      
                      
                        Custom notification:
                        Read
                        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-v6-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
                  
                  
                    
                      
                        
                      
                      
                        Success notification:
                        Notification drawer item title
                      
                    
                    
                      
                    
                    This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.
                    55 minutes ago
                  
                
              
            
          
        
      
    
  


```

### Expanded unread

```html isFullscreen

  
    
      Skip to content
    
  
  
    
      
        
      
      
        
          
        
      
    
    
      
        
          
            
              
                
              

              
                
                  
                
                
                  
                
                
                  
                
              

              
                
              
            
          
        
      
    
  
  
    
      
        
          
            
              System panel
            
          
          
            
              Policy
            
          
          
            
              Authentication
            
          
          
            
              Network services
            
          
          
            
              Server
            
          
        
      
    
  
  
    
      
        
          
            
              
                
                  
                    
                      
                        Section home
                      
                      
                        
                          
                        

                        Section title
                      
                      
                        
                          
                        

                        Section title
                      
                      
                        
                          
                        

                        Section landing
                      
                    
                  
                
              
              
                
                  
                    Main title
                    This is a full page demo.
                  
                
              
              
                
                  
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                  
                
              
            
          
        
        
          
            
              
                Notifications
                3 unread
                
                  
                
              
              
                
                  
                    
                      
                        
                      
                      
                        Info notification:
                        Unread
                        info notification title
                      
                    
                    
                      
                    
                    This is an info notification description.
                    5 minutes ago
                  

                  
                    
                      
                        
                      
                      
                        Custom 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.
                    10 minutes ago
                  

                  
                    
                      
                        
                      
                      
                        Custom 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-v6-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
                  
                  
                    
                      
                        
                      
                      
                        Success notification:
                        Notification drawer item title
                      
                    
                    
                      
                    
                    This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.
                    55 minutes ago
                  
                
              
            
          
        
      
    
  


```

### Expanded attention

```html isFullscreen

  
    
      Skip to content
    
  
  
    
      
        
      
      
        
          
        
      
    
    
      
        
          
            
              
                
              

              
                
                  
                
                
                  
                
                
                  
                
              

              
                
              
            
          
        
      
    
  
  
    
      
        
          
            
              System panel
            
          
          
            
              Policy
            
          
          
            
              Authentication
            
          
          
            
              Network services
            
          
          
            
              Server
            
          
        
      
    
  
  
    
      
        
          
            
              
                
                  
                    
                      
                        Section home
                      
                      
                        
                          
                        

                        Section title
                      
                      
                        
                          
                        

                        Section title
                      
                      
                        
                          
                        

                        Section landing
                      
                    
                  
                
              
              
                
                  
                    Main title
                    This is a full page demo.
                  
                
              
              
                
                  
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                  
                
              
            
          
        
        
          
            
              
                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
                  

                  
                    
                      
                        
                      
                      
                        Custom 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-v6-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
                  
                  
                    
                      
                        
                      
                      
                        Success notification:
                        Notification drawer item title
                      
                    
                    
                      
                    
                    This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.
                    55 minutes ago
                  
                
              
            
          
        
      
    
  


```

### Expanded with groups

```html isFullscreen

  
    
      Skip to content
    
  
  
    
      
        
      
      
        
          
        
      
    
    
      
        
          
            
              
                
              

              
                
                  
                
                
                  
                
                
                  
                
              

              
                
              
            
          
        
      
    
  
  
    
      
        
          
            
              System panel
            
          
          
            
              Policy
            
          
          
            
              Authentication
            
          
          
            
              Network services
            
          
          
            
              Server
            
          
        
      
    
  
  
    
      
        
          
            
              
                
                  
                    
                      
                        Section home
                      
                      
                        
                          
                        

                        Section title
                      
                      
                        
                          
                        

                        Section title
                      
                      
                        
                          
                        

                        Section landing
                      
                    
                  
                
              
              
                
                  
                    Main title
                    This is a full page demo.
                  
                
              
              
                
                  
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                    
                      This is a card
                    
                  
                
              
            
          
        
        
          
            
              
                Notifications
                9 unread
                
                  
                
              
              
                
                  
                    
                      
                    
                    
                      
                        
                          
                            
                          
                          
                            Info notification:
                            Unread
                            info notification title
                          
                        
                        
                          
                        
                        This is an info notification description.
                        5 minutes ago
                      

                      
                        
                          
                            
                          
                          
                            Custom 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.
                        10 minutes ago
                      

                      
                        
                          
                            
                          
                          
                            Custom 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-v6-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
                      
                      
                        
                          
                            
                          
                          
                            Success notification:
                            Notification drawer item title
                          
                        
                        
                          
                        
                        This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.
                        55 minutes ago
                      
                    
                  
                  
                    
                      
                    
                    
                      
                        
                          
                            
                          
                          
                            Info notification:
                            Unread
                            info notification title
                          
                        
                        
                          
                        
                        This is an info notification description.
                        5 minutes ago
                      

                      
                        
                          
                            
                          
                          
                            Custom 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.
                        10 minutes ago
                      

                      
                        
                          
                            
                          
                          
                            Custom 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-v6-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
                      
                      
                        
                          
                            
                          
                          
                            Success notification:
                            Notification drawer item title
                          
                        
                        
                          
                        
                        This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.
                        55 minutes ago
                      
                    
                  
                  
                    
                      
                    
                    
                      
                        
                          
                            
                          
                          
                            Info notification:
                            Unread
                            info notification title
                          
                        
                        
                          
                        
                        This is an info notification description.
                        5 minutes ago
                      

                      
                        
                          
                            
                          
                          
                            Custom 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.
                        10 minutes ago
                      

                      
                        
                          
                            
                          
                          
                            Custom 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-v6-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
                      
                      
                        
                          
                            
                          
                          
                            Success notification:
                            Notification drawer item title
                          
                        
                        
                          
                        
                        This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.
                        55 minutes ago
                      
                    
                  
                  
                    
                      
                    
                    
                      
                        
                          
                            
                          
                          
                            Info notification:
                            Unread
                            info notification title
                          
                        
                        
                          
                        
                        This is an info notification description.
                        5 minutes ago
                      

                      
                        
                          
                            
                          
                          
                            Custom 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.
                        10 minutes ago
                      

                      
                        
                          
                            
                          
                          
                            Custom 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-v6-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
                      
                      
                        
                          
                            
                          
                          
                            Success notification:
                            Notification drawer item title
                          
                        
                        
                          
                        
                        This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.
                        55 minutes ago
                      
                    
                  
                
              
            
          
        
      
    
  


```

## Documentation

This demo implements the notification drawer in context of the page component.
package.docs.demos.NotificationDrawer.examples.NotificationDrawer.md Maven / Gradle / Ivy

Main title

Notifications

Info notification: Read info notification title

Custom notification: Read recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.

Custom notification: Read recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.

Warning notification: Read warning notification title

Success notification: Read success notification title

Success notification: Notification drawer item title

Main title

Notifications

Info notification: Read info notification title

Custom notification: Read recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.

Custom notification: Read recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.

Warning notification: Read warning notification title

Success notification: Read success notification title

Success notification: Notification drawer item title

Main title

Notifications

Info notification: Unread info notification title

Custom 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.

Custom 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.

Warning notification: Read warning notification title

Success notification: Read success notification title

Success notification: Notification drawer item title

Main title

Notifications

Info notification: Unread info notification title

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.

Custom 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.

Warning notification: Read warning notification title

Success notification: Read success notification title

Success notification: Notification drawer item title

Main title

Notifications

First notification group 2

Info notification: Unread info notification title

Custom 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.

Custom 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.

Warning notification: Read warning notification title

Success notification: Read success notification title

Success notification: Notification drawer item title

Second notification group 3

Info notification: Unread info notification title

Custom 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.

Custom 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.

Warning notification: Read warning notification title

Success notification: Read success notification title

Success notification: Notification drawer item title

Third notification group 2

Info notification: Unread info notification title

Custom 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.

Custom 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.

Warning notification: Read warning notification title

Success notification: Read success notification title

Success notification: Notification drawer item title

Fourth notification group 2

Info notification: Unread info notification title

Custom 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.

Custom 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.

Warning notification: Read warning notification title

Success notification: Read success notification title

Success notification: Notification drawer item title
