Use this guide to design your UI for the Admin UI. If you come up with a new style that is unique, find an appropriate place in this guide and add it.

Regular Text

Normal text should be black! #2c3e50

Misc Colors

#95a5a6 #2c3e50 #18bc9c #f39c12 #e74c3c #3498db

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is a paragraph.

Application Headers

Body Text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

This line of text is meant to be treated as fine print.

The following snippet of text is rendered as bold text.

The following snippet of text is rendered as italicized text.

An abbreviation of the word attribute is attr.

Emphasis

This emphasis is to let the user know some sort of instruction.

This emphasis is for general communication to the user.

This emphasis is to warn the user to not do something, or some action.

This emphasis is to tell the user there was an error.

This emphasis is to let the user know something succeeded.

This emphasis is to let the user know some sort of important information.

Wells

Look, I'm in a well!
Look, I'm in a small well!
Look, I'm in a large well!
Look, I'm in a well...IN A WELL.

Title

Look, I'm in a well...WITH A TITLE.

Jumbotron

Jumbotron

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

List Groups

Example

Drop down
This is an error for the above element. This is a description of the above element.
Text1
This is an error field Description of the above element.
Text2
This is the error. Description of the above element.

Div Buttons

Default
Primary
Success
Info
Warning
Danger
Link

Disabled Buttons

Default
Primary
Success
Info
Warning
Danger
Link

Toggle Buttons

Mixins

Utilize the mixins file for helpful utility classes for buttons. This will allow you to change colors on success, etc.

Table


Col1 Col2
Data1a Data1b
Data2a Data2b

Hover Table

Col1 Col2
Data1a Data1b
Data2a Data2b
This is example of a dialog.
Open Dialog

Form

Legend

A longer block of help text that breaks onto a new line and may extend beyond one line.

Form Size

Legend

A longer block of help text that breaks onto a new line and may extend beyond one line.

Validation

Legend


Alerts