• SocialMedia:

 

Brand Colors

#ffd733

Brand Primary

#31302f

Brand Secondary

#f0ad4e

Brand Warning

#f89777

Brand Danger

#5bc0de

Brand Info

#5cb85c

Brand Success

 

Grayscale Levels

#26292d

Gray Darker

#4c5560

Gray Dark

#555555

Gray

#8c959f

Gray Light

#eee

Gray Lighter

#f7f7f7

Gray Lightest

 

Buttons

Normal Button Primary Button Second Button

 

Warning Button Danger Button Success Button

Action Link

Action

 

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Quote's author in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Quote's author in Source Title

 

Tags

hotel booking discount location map travel

 

Core Typography

h1. Heading Secondary text

h2. Heading Secondary text

h3. Heading Secondary text

h4. Heading Secondary text

h5. Heading Secondary text

h6. Heading Secondary text

TIPS: Create lighter, secondary text in any heading with a generic <small> tag or the .small class.

Example body text

This is a lead paragraph.
Make a paragraph stand out by adding .lead.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.

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.

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.

 

Address

Company Name
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Full Name
P: (123) 456-7890
first.last@example.com

Emphasis classes

This is a .mute paragraph.

This is a .text-primary paragraph.

This is a .text-warning paragraph.

This is a .text-danger paragraph.

This is a .text-success paragraph.

This is a .text-info paragraph.

Alignment classes

This is a left aligned text .text-left

This is a center aligned text .text-center

This is a right aligned text .text-right

This is a justify aligned text which is often used in Book Design, Magazine or special Typo Pages. Create a justify aligned text with .text-justify class.

 

Tabs

• Home
• Profile
• Disabled
• Dropdown
  • Action
  • Another action
  • Another action

In the area of graphical user interfaces (GUI), a tabbed document interface (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.

GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).

In the area of graphical user interfaces (GUI), a tabbed document interface (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.

GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).

In the area of graphical user interfaces (GUI), a tabbed document interface (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.

GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).

In the area of graphical user interfaces (GUI), a tabbed document interface (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.

GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).

Vertical Menus

• Active Menu Item
• Menu Item
• Menu Item
• Disabled Menu Item
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link

 

Inputs

Input success

Input error

Input warning

Disabled input

 

Alerts and Notifications

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

× 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.

 

Badges

• Home 42
• Profile
• Messages 25
• Notices 2

Labels

Default Primary Success Info Warning Danger

 

List groups

• 14 Cras justo odio
• 2 Dapibus ac facilisis in
• Morbi leo risus
• 1 Morbi leo risus
• 2 Dapibus ac facilisis in

9 Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

List group item heading

Donec id elit non mi porta gravida at eget metus risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus.

List group item heading

Donec id elit non mi porta gravida at eget metus.

 

Panels

Panel heading

Panel content

Panel primary

Panel content

Panel success

Panel content

Panel warning

Panel content

Panel danger

Panel content

Panel info

Panel content

 

Wells

Look, I'm in a small well!

Look, I'm in a well!

Look, I'm in a large well!