Progress Bars

Grid

[column large="(columns for large screens)" small="(columns for small screens)" first_last="(first or last in row first/last)"][/column]

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

[tooltip position="(top/bottom/right/left)" width="(a number for width)" text="(text for the tooltip)"][/tooltip]

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.

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.