Sports
Entertainment

Shortcodes

Alerts

This is a standard alert (div.alert-box).×
This is a success alert without closing X (div.alert-box.success).
This is an alert (div.alert-box.alert.round).×
This is a secondary alert (div.alert-box.secondary.radius).×

 

Buttons

 

Labels

span.label span.label.success span.label.alert.round span.label.secondary.radius
 

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. Oh and it has a border radius.

 

Pricing Tables

  • Lite
  • $49.99
  • An awesome description
  • 1 Database
  • 5GB Storage
  • 20 Users
  • Buy Now
  • Standard
  • $99.99
  • An awesome description
  • 10 Database
  • 15GB Storage
  • 50 Users
  • Buy Now
  • Pro
  • $199.99
  • An awesome description
  • 10 Database
  • 25GB Storage
  • 200 Users
  • Buy Now

 

Progress Bars

 

Grid

large-4 small-2
large-4 small-4 small-4
large-4 small-6
large-3
large-6
large-3
large-2
large-8 small-6
large-2
small-3
small-9
large-4
large-8
small-6 large-5
small-6 large-7
large-6
large-6

 

Tooltips

The tooltips can be positioned on the “tip-bottom”, which is the default position, “tip-top” (hehe), “tip-left”, or “tip-right” of the target element by adding the appropriate class to them. You can even add your own custom class to style each tip differently. On a small device, the tooltips are full width and bottom aligned.
 

Reveal Modals

Example Modal...  

Tabs

Section 1

Section 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 2

Section 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 3

Section 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

 

Accordion

Section 1

Section 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 2

Section 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 3

Section 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

 

This is a modal.

Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.
×