+

Badges






Badges facilitates to use colored links for updates in your web templates and themes. PixelzUI provides eight classes.

Types

Following are the two types of badges.

  1. Square
  2. Semi-rounded

Classes

Following are the classes to use badges in your scripts.

  1. .bdg
  2. .bdg-srnd
  3. .bdg-xsm
  4. .bdg-sm
  5. .bdg-md
  6. .bdg-md
  7. .bdg-lg
  8. .bdg-xlg
.
=>Other classes are based on color class(es).

How to use

  1. Add some container or grid class.
  2. <div class="cntr">
     <div class="cl cl2">
  3. Add .bdg as class attribute in <span>.
  4. <span class="bdg"></span>
  5. Add .bdg-srnd as extra class for semi-rounded style.
  6. <span class="bdg bdg-srnd"></span>
  7. Add .bdg-* as class attribute of <span>.
  8. <span class="bdg bdg-srnd bdg-*"></span>
  9. Add color classes.
  10. <span class="bdg bdg-srnd bdg-* bg-bk t-lm br-lm"></span>
=>* means (xsm, sm, md ,lg & xlg).

Demo

Square Badges

New

New

New

New

New

Semi-rounded Badges

New

New

New

New

New

Editing

Edit Classes


New

 <span class="bdg bdg-srnd bdg-xlg bg-bk t-sb br-sb">New</span>

Leave a Reply

Your email address will not be published. Required fields are marked.