A badge is a micro alert that provides an additional information to user regarding a specific item. It is generally used as a notifier, counter, and an alert in creating a user friendly interface such as gateway link to shopping cart, box message e.t.c.
Badge is identified by badge badge-top badge-center badge-enclose and badge-tag and are used as a foundation to creating different kind of badges in association with various html-elements such as p, div e.t.c.
Badge tag may revolve around different location relative to its target item, it could be centered, left, right or enclosed.
|badge||Container holding corresponding contents within containing block.|
|badge-tag||Sibling container responsible for the floated content.|
|badge-top||Defines the top position of the embedding tag.|
|badge-icon||Enclosed icon related content.|
|badge-center||Defines the center position of the embedding tag.|
|badge-enclose||Contents are embedded within the tag container.|
Start by setting up the badge container and assign the class attribute badge to any appropriate html element such as shown below
<div class="badge"> </div>
With the container already set up, (badge tag) class is called and can be assigned to text level content element such as to store relatively any notification or counter related information that are relevant to the its parent element such as .
<div class="badge"> Basic Tag<span class="badge-tag"> 28</span> </div>
The position may be to the top right, centered, or enclosed within the parent element.
<p class="badge-top"> Inbox<span class="badge-tag">20</span> </p>
The visual look of the tag can be changed by assigning a new color, changing the shape of the tag. You can fully interact with this class to unleash wide varieties of options using the code editor
This demo applied an icon to the tag and applied (blaze orange) to the background of the tag container. The icon can be changed depending on your choice.
<div class="badge-icon"> Amazon Information<span class="circle color-set-blazeOrange badge-tag icon icon-amazon"></span> </div>
This demo applied a rounded features to the tag and applied (blaze orange) to the background of the tag container.
<div class="badge-center"> Amazon Latest Product Counts<span class="rounded color-set-blazeOrange badge-tag">3428</span> </div>
To set up a successful enclosed position tag, two span element may be required instead of one span, the first span is assigned an icon class and the later display the counter or notification. Run the live test using code editor.
A badge tag with rounded and yellowMetal color with a silver colored icon, see this in action using the using code editor.
<div class="badge-enclose"> <span class="icon icon-you color-set-silver"></span> <span class="badge-tag color-set-yellowMetal rounded">20</span> </div>
The properties of badge plugin can be customized by changing the color, icon, the background and position.
Color set class is applied to the two affected (span) elements available in the badge-enclose class to effect the change.
G16framework code it yourself is a handy tool for any code enthusiast who love to establish and extend the style rules already applied to the plugin.
Important: To override a new defined style rule on the existing target plugin, you must implement / inject a keyword (!important) immediately after a new value is being set.