W3.CSS Badges, Tags and Signs
Displaying Badges
News 6
Comments 8
Updates 9
Example
<p>News <span class="w3-badge
w3-green">6</span></p>
<p>Comments <span class="w3-badge
w3-red">8</span></p>
<p>Updates <span class="w3-badge
w3-dark-grey">9</span></p>
Try It Yourself »
Displaying Tags
Example New!
Comments More Later!
Example
<p>Example <span class="w3-tag w3-blue">New!</span></p>
<p>Comments <span
class="w3-tag w3-teal">More Later!</span></p>
Try It Yourself »
List with Badges
- Jill 5
- Eve 3
- Adam 8
Example
<ul class="w3-ul w3-border">
<li>Jill <span
class="w3-badge w3-green w3-right">5</span></li>
<li>Eve <span
class="w3-badge w3-green w3-right">3</span></li>
<li>Adam <span
class="w3-badge w3-green w3-right">8</span></li>
</ul>
Try It Yourself »
Displaying a Tag as a Sign
London Zoo
Displaying Tags in a Row
S
A
L
E
Example
<div class="w3-tag w3-red">S</div>
<div class="w3-tag w3-black" >A</div>
<div
class="w3-tag w3-yellow">L</div>
<div class="w3-tag w3-black">E</div>
Try It Yourself »
Displaying Road Signs
Falcon Ridge Parkway
Example
<div class="w3-tag w3-round w3-green" style="padding:3px">
<div
class="w3-tag w3-round w3-green" style="border:1px solid white">
Falcon
Ridge Parkway
</div>
</div>
Try It Yourself »
Displaying Large Tags
66Displaying Large Badges
66Displaying Large Signs
IN CASE OFEMERGENCY
RUN LIKE HELL !
Example
<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">
IN CASE OF<br>
EMERGENCY<br>
RUN LIKE HELL !
</span>
Try It Yourself »
49,99
Example
<div class="w3-tag w3-jumbo w3-green">
<span
class="w3-xxlarge">49</span>
<span class="w3-large">,99</span>
</div>
Try It Yourself »
Displaying Rounded Signs
DO NOTBREATHE
UNDER WATER
Example
<span class="w3-tag w3-xxlarge w3-padding w3-round-large w3-red
w3-center">
DO NOT<br>
BREATHE<br>
UNDER WATER
</span>
Try It Yourself »
Displaying Letters as Tags
J
A
N
U
A
R
Y
Example
<span class="w3-tag w3-black">J</span>
<span class="w3-tag
w3-black">A</span>
<span class="w3-tag w3-black">N</span>
<span
class="w3-tag w3-black">U</span>
<span class="w3-tag w3-black">A</span>
<span class="w3-tag w3-black">R</span>
<span class="w3-tag
w3-black">Y</span>
Try It Yourself »
