Check with your designers to help you design this section
Check with your designers to help you design this section
The following is the preferred way of adding markup for badges. Under the hood it is just reusing available bootstrap badges with custom styling. This will be especially helpful to teams that are already using bootstrap as part of their system.
<span class="badge badge-primary">33</span>
<span class="badge badge-primary">
<i class="fa fa-dribbble" aria-hidden="true"></i> 33
</span>
For bootstrap compatibility, various theme colors are included. However, the design only show that the primary is ever used. This needs clarification from design.
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-error">Error</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-primary">
<i class="fa fa-bell-o" aria-hidden="true"></i> Primary
</span>
<span class="badge badge-success">
<i class="fa fa-bell-o" aria-hidden="true"></i> Success
</span>
<span class="badge badge-error">
<i class="fa fa-bell-o" aria-hidden="true"></i> Error
</span>
<span class="badge badge-danger">
<i class="fa fa-bell-o" aria-hidden="true"></i> Danger
</span>
<span class="badge badge-warning">
<i class="fa fa-bell-o" aria-hidden="true"></i> Warning
</span>
<span class="badge badge-info">
<i class="fa fa-bell-o" aria-hidden="true"></i> Info
</span>
If you are already using the old RAUL markup for badges, then the original markup is still available to use.
<div class="raul-badges-container">
<div class="raul-badge">
<span class="raul-badge-text">33</span>
</div>
<div class="raul-badge">
<span class="raul-badge-icon">
<i class="fa fa-dribbble" aria-hidden="true"></i>
</span>
<span class="raul-badge-text">33</span>
</div>
</div>