include "include/header_production.html"

Other components Messaging, notifications and progress lists are included in the other components category.

include "include/breadcrumb_right.html"

Chat The Chat box component offers the possibility of creating messaging systems for your web application.

Inline

Chat boxes can be created directly in the main content area or they can be wrapped inside other elements like content boxes, popovers, dialogs, dropdowns, etc. Each chat line can have multiple buttons, colors, title, etc.

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    a few seconds ago
  • Horia Simon

    This comment line has a title (author name) and a right button panel.
    a few seconds ago
  • This comment line has a bottom button panel, box shadow and title.
    a few seconds ago
    Reply
Get source

		                
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    a few seconds ago
  • Horia Simon

    This comment line has a title (author name) and a right button panel.
    a few seconds ago
  • This comment line has a bottom button panel, box shadow and title.
    a few seconds ago
    Reply

Chat inside content box

You can wrap the chat elements inside a custom scrollbar content box or in a regular content box like our left example below.

Chat box

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    a few seconds ago
  • Horia Simon

    This comment line has a title (author name) and a right button panel.
    a few seconds ago
  • This comment line has a bottom button panel, box shadow and title.
    a few seconds ago
    Reply
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    a few seconds ago
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    a few seconds ago

Chat box

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    a few seconds ago
  • Horia Simon

    This comment line has a title (author name) and a right button panel.
    a few seconds ago
  • This comment line has a bottom button panel, box shadow and title.
    a few seconds ago
    Reply
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    a few seconds ago
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    a few seconds ago
Get source

		                

Chat box

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    a few seconds ago
  • Horia Simon

    This comment line has a title (author name) and a right button panel.
    a few seconds ago
  • This comment line has a bottom button panel, box shadow and title.
    a few seconds ago
    Reply
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    a few seconds ago
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    a few seconds ago

Chat box

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    a few seconds ago
  • Horia Simon

    This comment line has a title (author name) and a right button panel.
    a few seconds ago
  • This comment line has a bottom button panel, box shadow and title.
    a few seconds ago
    Reply
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    a few seconds ago
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    a few seconds ago

Messaging list You can use the Messaging List component to create all kinds of messaging systems for your application users.

Inline

The Messaging List component can be created directly in the main content area or can be wrapped inside other elements like content boxes, popovers, dialogs, dropdowns, etc.

  • This message must be read immediately because of it's high importance...
  • This message must be read immediately because of it's high importance...
  • This message must be read immediately because of it's high importance...
Get source

		                
  • This message must be read immediately because of it's high importance...
  • This message must be read immediately because of it's high importance...
  • This message must be read immediately because of it's high importance...

Notification Lists inside content boxes

You can add notification lists inside content boxes with or without content spacing and custom scrollbars.

Without content spacing

  • This message must be read immediately because of it's high importance...
  • This message must be read immediately because of it's high importance...
  • This message must be read immediately because of it's high importance...
  • This message must be read immediately because of it's high importance...
  • This message must be read immediately because of it's high importance...
  • This message must be read immediately because of it's high importance...

Notification list widget

  • This message must be read immediately because of it's high importance...
  • This message must be read immediately because of it's high importance...
  • This message must be read immediately because of it's high importance...
  • This message must be read immediately because of it's high importance...
  • This message must be read immediately because of it's high importance...
  • This message must be read immediately because of it's high importance...
  • This message must be read immediately because of it's high importance...
  • This message must be read immediately because of it's high importance...
  • This message must be read immediately because of it's high importance...
Get source

		                

Without content spacing

  • This message must be read immediately because of it's high importance...
  • This message must be read immediately because of it's high importance...
  • This message must be read immediately because of it's high importance...
  • This message must be read immediately because of it's high importance...
  • This message must be read immediately because of it's high importance...
  • This message must be read immediately because of it's high importance...

Notification list widget

  • This message must be read immediately because of it's high importance...
  • This message must be read immediately because of it's high importance...
  • This message must be read immediately because of it's high importance...

Messaging lists inside popovers

You can also add messaging lists inside popovers. Click the button below to see it in action.

5 Click for popover example
  • This message must be read immediately because of it's high importance...
  • This message must be read immediately because of it's high importance...
  • This message must be read immediately because of it's high importance...
Get source

		                
		                    
		                        5
		                        
		                        Click for popover example
		                    
		                

		                
  • This message must be read immediately because of it's high importance...
  • This message must be read immediately because of it's high importance...
  • This message must be read immediately because of it's high importance...

Progress list You can use the Progress List component to create all kinds of messaging systems for your application users.

Inline

The Progress List component can be created directly in the main content area or can be wrapped inside other elements like content boxes, popovers, dialogs, dropdowns, etc.

  • Finishing uploading files 23%
  • Finishing uploading files 91%
  • Finishing uploading files 58%
  • Finishing uploading files 74%
  • Finishing uploading files 23%
  • Finishing uploading files 91%
  • Finishing uploading files 58%
  • Finishing uploading files 74%
Get source

		                
  • Finishing uploading files 23%
  • Finishing uploading files 91%
  • Finishing uploading files 58%
  • Finishing uploading files 74%
  • Finishing uploading files 23%
  • Finishing uploading files 91%
  • Finishing uploading files 58%
  • Finishing uploading files 74%

Notification Lists inside content boxes

You can add notification lists inside content boxes with or without content spacing and custom scrollbars.

Without content spacing

  • Finishing uploading files 23%
  • Finishing uploading files 91%
  • Finishing uploading files 58%
  • Finishing uploading files 74%
  • Finishing uploading files 91%
  • Finishing uploading files 58%
  • Finishing uploading files 32%

Notification list widget

  • Finishing uploading files 23%
  • Finishing uploading files 91%
  • Finishing uploading files 58%
  • Finishing uploading files 74%
  • Finishing uploading files 91%
  • Finishing uploading files 58%
  • Finishing uploading files 32%
Get source

		                

Without content spacing

  • Finishing uploading files 23%
  • Finishing uploading files 91%
  • Finishing uploading files 58%
  • Finishing uploading files 74%
  • Finishing uploading files 91%
  • Finishing uploading files 58%
  • Finishing uploading files 32%

Notification list widget

  • Finishing uploading files 23%
  • Finishing uploading files 91%
  • Finishing uploading files 58%
  • Finishing uploading files 74%
  • Finishing uploading files 91%
  • Finishing uploading files 58%
  • Finishing uploading files 32%

Messaging lists inside popovers

You can also add messaging lists inside popovers. Click the button below to see it in action.

5 Click for popover example
  • Finishing uploading files 23%
  • Finishing uploading files 91%
  • Finishing uploading files 58%
  • Finishing uploading files 74%
  • Finishing uploading files 91%
  • Finishing uploading files 58%
  • Finishing uploading files 32%
Get source

		                
		                    
		                        5
		                        
		                        Click for popover example
		                    
		                

		                
  • Finishing uploading files 23%
  • Finishing uploading files 91%
  • Finishing uploading files 58%
  • Finishing uploading files 74%
  • Finishing uploading files 91%
  • Finishing uploading files 58%
  • Finishing uploading files 32%

Notifications You can use the Notifications List Component to create lists with different types of notifications for your application users.

include "include/theming.html"

Inline

The Notification List component can be created directly in the main content area or can be wrapped inside other elements like content boxes, popovers, dialogs, dropdowns, etc.

  • This is an error notification
    a few seconds ago
  • This is a warning notification
    15 minutes ago
  • Alternate error notification styling using helpers.
    2 hours ago
Get source

		                
  • This is an error notification
    a few seconds ago
  • This is a warning notification
    15 minutes ago
  • Alternate error notification styling using helpers.
    2 hours ago

Notification Lists inside content boxes

You can add notification lists inside content boxes with or without content spacing and custom scrollbars.

Without content spacing

  • This is an error notification
    a few seconds ago
  • This is a warning notification
    15 minutes ago
  • Alternate error notification styling using helpers.
    2 hours ago
  • This is an error notification
    a few seconds ago
  • This is a warning notification
    15 minutes ago
  • Alternate notification styling.
    2 hours ago

Notification list widget

  • This is an error notification
    a few seconds ago
  • This is a warning notification
    15 minutes ago
  • Alternate error notification styling using helpers.
    2 hours ago
  • This is an error notification
    a few seconds ago
  • This is a warning notification
    15 minutes ago
  • Alternate error notification styling using helpers.
    2 hours ago
Get source

		                

Without content spacing

  • This is an error notification
    a few seconds ago
  • This is a warning notification
    15 minutes ago
  • Alternate error notification styling using helpers.
    2 hours ago
  • This is an error notification
    a few seconds ago
  • This is a warning notification
    15 minutes ago
  • Alternate error notification styling using helpers.
    2 hours ago

Notification list widget

  • This is an error notification
    a few seconds ago
  • This is a warning notification
    15 minutes ago
  • Alternate error notification styling using helpers.
    2 hours ago
  • This is an error notification
    a few seconds ago
  • This is a warning notification
    15 minutes ago
  • Alternate error notification styling using helpers.
    2 hours ago

Notification Lists inside popovers

You can also add notification lists inside popovers. Click the button below to see it in action.

5 Click for popover example
  • This is an error notification
    a few seconds ago
  • This is a warning notification
    15 minutes ago
  • A success message example.
    2 hours ago
  • This is an error notification
    a few seconds ago
  • This is a warning notification
    15 minutes ago
  • Alternate notification styling.
    2 hours ago
Get source

		                
		                    
		                        5
		                        
		                        Click for popover example
		                    
		                

		                
  • This is an error notification
    a few seconds ago
  • This is a warning notification
    15 minutes ago
  • A success message example.
    2 hours ago
  • This is an error notification
    a few seconds ago
  • This is a warning notification
    15 minutes ago
  • Alternate notification styling.
    2 hours ago
include "include/footer.html"