Color schemes

More color schemes will be available soon!

Layout options
Boxed layout backgrounds

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

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.

Theming

Fides Admin uses colors & styles from both the default theme color schemes and the included core color helpers.

Core color helpers:

The core color helpers can be applied to all kind of elements from buttons to icons, headers, headings, etc. They do not change when you switch to a different theme from the same template.

Template color schemes:

These are the template default color schemes and are used site wide to consistently style common elements. For the primary color you must add .primary-bg and for the secondary color you must add .ui-state-default. Note that theme two styles change based on what color scheme you choose for your template.

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