TheBestTutorials.css Badges and Tags
Displaying Badges
The TheBestTutorials-badge class creates a circular badge.
Updates 9
News 6
Comments 8
Example
<p>Updates <span class="subhodaya-badge">9</span></p>
<p>News <span class="subhodaya-badge subhodaya-green">6</span></p>
<p>Comments <span class="subhodaya-badge subhodaya-red">8</span></p>
Try It Yourself »
<p>News <span class="subhodaya-badge subhodaya-green">6</span></p>
<p>Comments <span class="subhodaya-badge subhodaya-red">8</span></p>
Displaying Tags
The TheBestTutorials-tag class creates a tag/label.
Status Done
Example New!
Comments More Later!
Example
<p>Comments <span
class="subhodaya-tag">Done</span></p>
<p>Example <span class="subhodaya-tag subhodaya-blue">New!</span></p>
<p>Comments <span class="subhodaya-tag subhodaya-teal">More Later!</span></p>
Try It Yourself »
<p>Example <span class="subhodaya-tag subhodaya-blue">New!</span></p>
<p>Comments <span class="subhodaya-tag subhodaya-teal">More Later!</span></p>
List with Badges
- Jill 5
- Eve 3
- Adam 8
Example
<ul class="subhodaya-ul subhodaya-border">
<li>Jill <span class="subhodaya-badge subhodaya-green subhodaya-right">5</span></li>
<li>Eve <span class="subhodaya-badge subhodaya-green subhodaya-right">3</span></li>
<li>Adam <span class="subhodaya-badge subhodaya-green subhodaya-right">8</span></li>
</ul>
Try It Yourself »
<li>Jill <span class="subhodaya-badge subhodaya-green subhodaya-right">5</span></li>
<li>Eve <span class="subhodaya-badge subhodaya-green subhodaya-right">3</span></li>
<li>Adam <span class="subhodaya-badge subhodaya-green subhodaya-right">8</span></li>
</ul>
Displaying Large Tags
66Example
<span class="subhodaya-tag subhodaya-jumbo subhodaya-padding-large subhodaya-blue">66</span>
Try It Yourself »
Displaying Large Badges
66Example
<p><span class="subhodaya-badge subhodaya-jumbo subhodaya-padding-large subhodaya-red">66</span></p>
Try It Yourself »
Displaying Letters as Tags
A
U
G
U
S
T
Example
<span class="subhodaya-tag subhodaya-black">J</span>
<span class="subhodaya-tag subhodaya-black">A</span>
<span class="subhodaya-tag subhodaya-black">N</span>
<span class="subhodaya-tag subhodaya-black">U</span>
<span class="subhodaya-tag subhodaya-black">A</span>
<span class="subhodaya-tag subhodaya-black">R</span>
<span class="subhodaya-tag subhodaya-black">Y</span>
Try It Yourself »
<span class="subhodaya-tag subhodaya-black">A</span>
<span class="subhodaya-tag subhodaya-black">N</span>
<span class="subhodaya-tag subhodaya-black">U</span>
<span class="subhodaya-tag subhodaya-black">A</span>
<span class="subhodaya-tag subhodaya-black">R</span>
<span class="subhodaya-tag subhodaya-black">Y</span>