Visual elements

Block arrow

This style will add a small arrow on the side of any block element, with automatic color inheritance. Here are some examples:

Arrow top

Arrow left

Arrow right

Arrow bottom

There are 4 position classes available: top, right, bottom and left. If no position class is set, the arrow is set at bottom. Here is the markup for a top arrow:

<span class="block-arrow top">
	<span></span>
</span>

Quick tip

This style require that the parent element has position:relative or position:absolute. If the parent has no position set, add the class relative.

Count and close

This style is designed to display a small count bubble on top of any element:

3 <span class="count">3</span>

3 <span class="count simpler">3</span>

The count style is not stuck to the right because it was originally created for button groups:

2Default 2Orange 2Green 2Blue

If required, it may be aligned on the right, on the left or even inset:

3 <span class="count right">3</span>

3 <span class="count left">3</span>

3 <span class="count inset">3</span>

3 <span class="count inset left">3</span>

This style adds a close button on top of any element, and clicking on it automatically removes the parent element with a fade out effect:

✕ <span class="close">✕</span>

✕ <span class="close simpler">✕</span>

The close style works fine with the utility class show-on-parent-hover, which reveals it only when the mouse hover the parent element (but remain visibile on touch devices):

✕ <span class="close show-on-parent-hover">✕</span>

If required, it may be aligned on the left or be inset:

✕ <span class="close left">✕</span>

✕ <span class="close inset">✕</span>

✕ <span class="close inset left">✕</span>

Ribbons

Hey! Default ribbon

Hey! Color classes red-gradient and glossy (apply to ribbon-inner)

Hey! Size classe tiny (apply to ribbon)

Here is the default markup to create a ribbon:

<span class="ribbon">
	<span class="ribbon-inner">Text</span>
</span>

Quick tip

This style require that the parent element has position:relative or position:absolute. If the parent has no position set, add the class relative.

Here is a customized markup:

<span class="ribbon tiny">
	<span class="ribbon-inner red-gradient glossy">Text</span>
</span>

Ajax loaders

When using an ajax loader on a dark background, add the class on-dark for a better result.

Standard size

<span class="loader"></span>
<span class="loader waiting"></span>
<span class="loader working"></span>
<span class="loader refreshing"></span>

Big

<span class="loader big"></span>
<span class="loader big waiting"></span>
<span class="loader big working"></span>
<span class="loader big refreshing"></span>

Huge

<span class="loader huge"></span>
<span class="loader huge waiting"></span>
<span class="loader huge working"></span>
<span class="loader huge refreshing"></span>

Other elements

Meter bars

This is a real simple style to create meter bars like phone signal level or volume: 

<span class="meter orange-gradient"></span>
<span class="meter orange-gradient"></span>
<span class="meter"></span>
<span class="meter"></span>

Play with colors to create infinite styles: