User interface elements
Sliders
88 77 55 33 40 45 70 82
Progress bars
Animated bars with tooltips
Pickers
Use mousewheel and keyboard
  • -
  • -
Choose color...
Growl notifications
Ajax loaders
Toggle. Opened by default
This one is opened by default
Toggle. Closed by default
This one is closed by default
Accordion menu. Active
This is an accordion. This one is collapsible and opened by default
Accordion menu. Inactive
Now this one is active
Accordion menu. Inactive
And now this one...
Toggles group. Active
This widget is opened by default. Works in case of adding id="opened" to the widget head
Toggles group. Inactive
This widget is closed by default.
Toggles group. Inactive
This widget is closed by default.

This is a warning message. You can use this to warn users on any events

This is a message for information, can be any general information.

Success message! hoooraaay!!!!

Oops sorry. That action is not valid, or our servers have gone bonkers

Dialogs
jQuery UI dialog

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Open modal

Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.

Dialog with form elements
Dialog with custom elements
Image
Description
Date
 File info Actions
Image1 description Feb 12, 2012. 12:28 Size: 215 KbFormat: .jpg
Image1 description Feb 12, 2012. 12:28 Size: 215 KbFormat: .jpg
Image1 description Feb 12, 2012. 12:28 Size: 215 KbFormat: .jpg
Image1 description Feb 12, 2012. 12:28 Size: 215 KbFormat: .jpg
Image1 description Feb 12, 2012. 12:28 Size: 215 KbFormat: .jpg
Tooltips
Bottom position Top position Left position Right position With HTML inside
Lightbox
Lightbox gallery (mousewheel support)
Tab is active and has left tabs
This tab is active now
Tab is active and has right tabs
This tab is active now