Badge/Tags for info.
<span class="zust-badge">JS</span>
<span class="zust-badge">CSS</span>
You can use color helper to color them.
<span class="zust-badge zust-bg-teal">JS</span>
<span class="zust-badge zust-bg-facebook">CSS</span>
You can make also make an duo badge easily. See snippet.
<div class="zust-badge">
<span>Follow</span>
<span class="zust-bg-twitter">Sarsa</span>
</div>
There's also outlined badge. Note it will not work on duo badge.
<span class="zust-badge zust-outlined">Outlined</span>
You can also make badges rounded.
<span class="zust-badge zust-rounded">Badge</span>
<span class="zust-badge zust-outlined zust-rounded">Outlined</span>
<div class="zust-badge zust-rounded">
<span>Duo</span>
<span class="zust-bg-success">Rounded</span>
</div>
If you're working with bunch of badges then use Zusty's built-in container. They will break whenever necessary.
<div class="zust-container">
<span class="zust-badge">One</span>
<span class="zust-badge">Two</span>
<span class="zust-badge">Three</span>
<span class="zust-badge">Four</span>
<span class="zust-badge">Five</span>
<span class="zust-badge">Six</span>
<span class="zust-badge">Seven</span>
<span class="zust-badge">Eight</span>
<span class="zust-badge">Nine</span>
<span class="zust-badge">Ten</span>
<span class="zust-badge">Eleven</span>
<span class="zust-badge">Twelve</span>
<span class="zust-badge">Thirteen</span>
<span class="zust-badge">Fourteen</span>
<span class="zust-badge">Fifteen</span>
<span class="zust-badge">Sixteen</span>
<span class="zust-badge">Seventeen</span>
<span class="zust-badge">Eighteen</span>
<span class="zust-badge">Nineteen</span>
<span class="zust-badge">Twenty</span>
<span class="zust-badge">Twenty One</span>
<span class="zust-badge">Twenty Two</span>
<span class="zust-badge">Twenty Three</span>
<span class="zust-badge">Twenty Four</span>
<span class="zust-badge">Twenty Five</span>
<span class="zust-badge">Twenty Six</span>
<span class="zust-badge">Twenty Seven</span>
<span class="zust-badge">Twenty Eight</span>
<span class="zust-badge">Twenty Nine</span>
<span class="zust-badge">Thirty</span>
</div>
You can change make all badge inside of a parent element rounded or outlined or both by adding class zust-badges-rounded or zust-badges-outlined to the parent.
<div class="zust-container zust-badges-rounded zust-badges-outlined">
<span class="zust-badge">One</span>
<span class="zust-badge">Two</span>
<span class="zust-badge">Three</span>
<span class="zust-badge">Four</span>
<span class="zust-badge">Five</span>
<span class="zust-badge">Six</span>
<span class="zust-badge">Seven</span>
<span class="zust-badge">Eight</span>
<span class="zust-badge">Nine</span>
<span class="zust-badge">Ten</span>
<span class="zust-badge">Eleven</span>
<span class="zust-badge">Twelve</span>
<span class="zust-badge">Thirteen</span>
<span class="zust-badge">Fourteen</span>
<span class="zust-badge">Fifteen</span>
<span class="zust-badge">Sixteen</span>
<span class="zust-badge">Seventeen</span>
<span class="zust-badge">Eighteen</span>
<span class="zust-badge">Nineteen</span>
<span class="zust-badge">Twenty</span>
<span class="zust-badge">Twenty One</span>
<span class="zust-badge">Twenty Two</span>
<span class="zust-badge">Twenty Three</span>
<span class="zust-badge">Twenty Four</span>
<span class="zust-badge">Twenty Five</span>
<span class="zust-badge">Twenty Six</span>
<span class="zust-badge">Twenty Seven</span>
<span class="zust-badge">Twenty Eight</span>
<span class="zust-badge">Twenty Nine</span>
<span class="zust-badge">Thirty</span>
</div>