Hey you!: | Click Here to reverse the page to RTL mode.

User InterfaceHome UI Features

NotificationsWays to notify the user

Notifications types

Add regular notification Fades out after a certain amount of time, can be set for each notification.

Add sticky notification Doesn't run on a fade timer. Just sits there until the user manually removes it by clicking on the (X).

Add notification without image

Add a dark notification has a 'gritter-dark' class_name applied to it.

Callbacks

Add notification (with callbacks)

Add a sticky notification (with callbacks)

Max 3 Notifications

Add notification with max of 3 If there are 3 messages already on screen, it won't show another one.

Clear All

Remove all notifications

Remove all notifications (with callbacks)

Unobtrusive Notifications

Customizable Dialog Box

InformativeItems that are informative to the user

Basic

Striped

Animated

Stacked

More Colors

Notice

Warning! Best check yo self, you're not looking too good.

Error

Oh snap! Change a few things up and try submitting again.

Success

Well done! You successfully read this important alert message.

Information

Heads up! This alert needs your attention, but it's not super important.

Custom Yellow

Heads up! This alert needs your attention, but it's not super important.

Custom Green

Heads up! This alert needs your attention, but it's not super important.

Custom Red

Heads up! This alert needs your attention, but it's not super important.

Custom Orange

Heads up! This alert needs your attention, but it's not super important.

Custom Light Brown

Heads up! This alert needs your attention, but it's not super important.

Custom Light Grey

Heads up! This alert needs your attention, but it's not super important.

Custom Grey

Heads up! This alert needs your attention, but it's not super important.

Custom Blue

Heads up! This alert needs your attention, but it's not super important.

Custom Facebook

Heads up! This alert needs your attention, but it's not super important.

Block alert

Warning!

Best check yo self, you're not...

ButtonsVarious types of buttons

Users Likes Tweets Finance Region Growth

Map Search Settings Rating Products Inbox

Info To add bubbles to items just add data-bubble="15" and add the class "bubble bubble-red" to the element. Other colors: bubble-blue, bubble-green, bubble-yellow etc..

Button	class=""	Description
	`btn`	Standard gray button with gradient
	`btn btn-primary`	Provides extra visual weight and identifies the primary action in a set of buttons
	`btn btn-info`	Used as an alternative to the default styles
	`btn btn-success`	Indicates a successful or positive action
	`btn btn-warning`	Indicates caution should be taken with this action
	`btn btn-danger`	Indicates a dangerous or potentially negative action
	`btn btn-inverse`	Alternate dark gray button, not tied to a semantic action or use
	`btn btn-link`	Deemphasize a button by making it look like a link while maintaining button behavior
	`btn orange`	A custom orange button
	`btn light-brown`	A custom brown button
	`btn facebookblue`	A custom facebook blue button
	`btn grey`	A custom grey button
	`btn light-grey`	A custom light grey button
	`btn pink`	A custom pink button
	`btn purple`	A custom purple button
	`btn cyan`	A custom cyan button
	`btn turquoise`	A custom turquoise button

Sizes	class=""
	`btn btn-block btn-large`
	`btn btn-large`
	`btn`
	`btn btn-small`
	`btn btn-mini`

Button	Type
Action Action Another action Something else here Separated link	Button dropdown
	Button Groups
Action Another action Something else here Separated link	Slip button dropdown
Action Another action Something else here Separated link	Split dropup menus

LARGE BOXFIRST FOOTER BUTTON

LARGE BOXSECOND FOOTER BUTTON

ButtonLeft

ButtonRight

A Big Image Button with animation