Pricing Tables

Progress Bars

Reveal

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.

Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.

Thumbnails

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.

Vcard

Visibility Classes

Screen Size Visibility Control (Show)

The following text should describe the screen size you're using:

You are on a small screen.You are on a medium screen.You are on a medium, large or xlarge screen.You are on a medium or small screen.You are on a large screen.You are on a large or xlarge screen.You are on a large, medium or small screen.You are on a xlarge screen.

Screen Size Visibility Control (Hide)

The following text should describe the screen size you aren't using:

You are not on a small screen.You are not on a medium screen.You are not on a medium, large or xlarge screen.You are not on a medium or small screen.You are not on a large screen.You are not on a large or xlarge screen.You are not on a large, medium or small screen.You are not on a xlarge screen.

Orientation Detection

The following text should describe the device orientation you're using:

You are in landscape orientation.You are in portrait orientation.

Touch Detection

The following text should describe if you're using a touch device:

You are on a touch-enabled device.You are not on a touch-enabled device.