BUTTONS

PRIMARY
.tiny.button

SECONDARY
.tiny.secondary

SUCCESS
.tiny.success

ALERT
.tiny.alert

.small.button

.small.secondary

.small.success

.small.alert

.button

.secondary

.success

.regular.alert

.large.button

.large.secondary

.large.success

.large.alert

RADIUS
.tiny.radius

RADIUS
.tiny.button

RADIUS
.tiny.button

RADIUS
.tiny.button

.small.radius

.small.button

.small.button

.small.button

.regular.radius

.regular.button

.regular.button

.regular.button

.large.button

.large.button

.large.button

.large.button

ROUNDED
.tiny.radius

ROUNDED
.tiny.radius

ROUNDED
.tiny.radius

ROUNDED
.tiny.radius

.small.button

.small.button

.small.button

.small.button

.regular.button

.regular.button

.regular.button

.regular.button

.large.button

.large.button

.large.button

.large.button

PRIMARY GROUP
Button 1 Button 2 Button 3

SECONDARY GROUP
Button 1 Button 2 Button 3

Button 1

Button 2

Button 3

Button 1

Button 2

Button 3

Button 1

Button 2

Button 3

Button 1

Button 2

Button 3

Button 1
Button 1 Button 2

Button 2
Button 3

Button 3

Button 1
Button 1 Button 2

Button 2
Button 3

Button 3

Button 1

Button 2

Button 3

Button 1

Button 2

Button 3

Button 1

Button 2

Button 3

Button 1

Button 2

Button 3

Button 1
Button 1 Button 2

Button 2
Button 3

Button 3

Button 1
Button 1 Button 2

Button 2
Button 3

Button 3

Button 1

Button 2

Button 3

Button 1

Button 2

Button 3

Button 1

Button 2

Button 3

Button 1

Button 2

Button 3

Button 1

Button 2

Button 3

Button 1

Button 2

Button 3

SUCCESS GROUP
Button 1 Button 2 Button 3

ALERT GROUP
Button 1 Button 2 Button 3

Button 1

Button 2

Button 3

Button 1

Button 2

Button 2

Button 1

Button 2

Button 3

Button 1

Button 2

Button 3

Button 1
Button 1 Button 2

Button 2
Button 3

Button 3

Button 1
Button 1 Button 2

Button 2
Button 3

Button 3

Button 1

Button 2

Button 3

Button 1

Button 2

Button 3

Button 1

Button 2

Button 3

Button 1

Button 2

Button 3

Button 1
Button 1 Button 2

Button 2
Button 3

Button 3

Button 1
Button 1 Button 2

Button 2
Button 3

Button 3

Button 1

Button 2

Button 3

Button 1

Button 2

Button 3

Button 1

Button 2

Button 3

Button 1

Button 2

Button 3

Button 1

Button 2

Button 3

Button 1

Button 2

Button 3

PRIMARY DROPDOWN
Button

SECONDARY DROPDOWN
Button

SUCCESS DROPDOWN
Button

ALERT DROPDOWN
Button

Button

Button

Button

Button

Button

Button

Button

Button

Button

Button

Button

Button

PRIMARY SPLIT
Button

SECONDARY SPLIT
Button

SUCCESS SPLIT
Button

ALERT SPLIT
Button

Button

Button

Button

Button

Button

Button

Button

Button

Button

Button

Button

Button

FORMS
INPUT SIZES AND TYPES INLINE LABELS

Input Label
Text Input

Label Inline Text Input

Input Label
Text Input

Label Inline Text Input

Input Label
Text Input

Label Inline Text Input

TEXTAREA SIZES AND TYPES

Text Area label Label

Inline Text Input

Text Area Label

Fieldset Legend

Fieldset Legend Label Inputs and other form elements go inside...

POSTFIX/PREFIX LABELS & ACTIONS

http://
Hex Value

Enter your URL... Action

Value

label

INPUT ERROR STATES

Label
Inline Label
Invalid entry Invalid entry

Label
Inline Label
Invalid entry Invalid entry

Label
Inline Label
Invalid entry Invalid entry

TEXTAREA ERROR STATES

Text Area label Message...

Invalid entry Invalid entry

Text Area Label

Message...

Invalid entry

Invalid entry

RADIOS, CHECKBOXES & SELECTS

Radio Button 1 Radio Button 2 Radio Button 3

Label for Checkbox Label for Checkbox Label for Checkbox

Dropdown
This is an option

Dropdown
This is an option

POSTFIX/PREFIX LABELS & ACTIONS WITH CUSTOM FORMS

+ +

google mysubdomain .com google

Button

.com

SWITCH

Off Off

On Off

Off

Off

Off

Off

NAVIGATION
SUB NAV INLINE LISTS

Filter:

All

Active

Pending

Suspended

Link 1
SIDE NAV

Link 2

Link 3

Link 4

Link 5

PAGINATION

12

13

Link 1 Link 1

BREADCRUMBS HOME

Link 1
/
GENE SPLICING

FEATURES

HUMAN CLONING

Link 1

TOP BAR

Top Bar

Item 1

Item 2

SECTIONS
Section 1 Section 2 Section 1 Section 3
Section 1 Lorem ipsum dolor sit amet, consecteurs adipiscing elit, sed do eiusmod tempor incididunt ut labore el dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation

Section 1

Section 2

Section 2

Section 3

Section 1 Section 2 um sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Section 3

ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 1

Section 2

Section 3

TYPOGRAPHY

h1. Heading small segment.

h2. Heading small segment.
h3. Heading small segment.
h4. Heading small segment.
h5. Heading small segment.
h6. Heading
BLOCKQUOTES
small segment.

HEADLINES

PARAGRAPHS

Large Subhead Text, Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla.
Subheader Text, Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo.
Normal Paragraph, Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.
Normal Paragraph, Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Blockquote, Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Quote Author

LISTS

V-CARDS

LABELS

KEYSTROKES

ul.disc

.ordered

ul.no-bullet

List Item List Item List item Sub-list Item Sub-list Item List Item

1.List Item 2. List Item 3. List item i. Sub-list Item ii. Sub-list Item 4. List Item

List Item List Item List item nested Item nested Item List Item

Name of person Address Line 1 Address Line 2 City, ZIP Code email@email.com

Regular Label Radius Secondary Label Round Alert Label Success Label

cmd

UI ELEMENTS
ALERTS

This is a standard alert (div.alert-box) This is a secondary alert (div.alert-box.secondary) This is a success alert (div.alert-box.success) This is an alert (div.alert-box.round)

+ + + +

PANELS

This is a regular panel

It has an easy to override visual style, and is appropriately subdued.

This is a callout panel.

it's a little ostentatious but useful for important content.

PRICING TABLES

PROGRESS BARS

Standard $99.99
An awesome description

1 Database V5GB Storage 20 Users

TABLES

Buy Now

Table header
Content Content Content Content

Table header
Content Content Content Content

Table header
Content Content Content Content

Table header
Content Content Content Content

TOOLTIPS

JOYRIDE

This is a top tooltip!

This is a bottom tooltip!

This is a Joyride Feature Tour y-out. Take in the scenery on a breezy ride through this app. Next

This is a left tooltip!

This is a right tooltip!

ORBIT PLACEHOLDER

Add a caption here

BLOCK GRIDS

5 Up

5 Up

5 Up

5 Up

5 Up

4 Up

4 Up

4 Up

4 Up

3 Up

3 Up

3 Up

2 Up

2 Up

PLACEHOLDER & THUMBNAILS

DESCRIBE IT

DESCRIBE IT

DESCRIBE IT

REVEAL MODALS

+ + + +