Alert Boxes

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

Block Grid


Button Groups

Flex Video

Inline Lists


To make something pretty, press and hold cmd + alt + shift + w + a + !


Regular Label
Radius Secondary Label
Round Alert Label
Success Label



Example Modal… Example Video Modal…

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.

Second Modal…


This is a second modal.

See? It just slides into place after the first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.


This modal has video


Side Nav


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 regular panel.

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

This is a radius callout panel.

It's a little ostentatious, but useful for important content.


h1. This is a very large header.

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header.
h6. This is a tiny header.

h1. subheader

h2. subheader

h3. subheader

h4. subheader

h5. subheader
h6. subheader