1. UI Lab
  2. Elements

UI Elements common UI features & Elements

Alerts
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Best check yo self, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Notifications

Error!

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Take this action Or do this

Success!

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Take this action Or do this

Info!

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Take this action Or do this

Warning!

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Take this action Or do this

Gritter Notifications

Click on below buttons to check it out.

Modal Dialogs
Click on below buttons to check it out.
Modal Dialog Alert Confirm
Tooltips

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. twitter handle freegan cred raw denim single-origin coffee viral.

Popovers

Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel trigger me on hover terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa.

Pulsate
Pulsate any page elements.
Repeating Pulsate
NOTE! Pulsate works in Chrome, Safari and Firefox. Prettiest in Firefox since it supports Outline-radius
Progress Bars
Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox. Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.

Basic

60% Complete
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete

Striped

60% Complete (success)
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

Animated

60% Complete
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

Stacked

35% Complete (success)
20% Complete (warning)
10% Complete (danger)
Labels and Badges

Available labels

Labels Class
Default label label-default
Success label label-success
Warning label label-warning;
Danger label label-danger
Info label label-info
Inverse label label-inverse

Available badges

Example Class
1 badge badge-default
2 badge badge-success
4 badge badge-warning
6 badge badge-danger
8 badge badge-info
10 badge badge-inverse
Pagination
Dynamic Pagination

page-clicked Event

Click on the pages to trigger the page-clicked event.

    page-changed Event

    Click on the pages to trigger the page-clicked event.
      Go to page: