Tags
Tag components can be used as badges or pills that provide categorical information to users. Avoid overuse of tags as users of screen readers and other assistive technologies may find them to be noisy.
Usage
To use AgnosticUI as a CSS only framework, you can simply link to the common.min.css and components.min.css files. These can be served from a CDN (as you'll see in the following example), or relative to your project.
new
success
info
warning
danger
View source
<!-- Default -->
<span class="tag mie6">new</span>
<!-- Success -->
<span class="tag tag-success mie6">success</span>
<!-- Info -->
<span class="tag tag-info mie6">info</span>
<!-- Warning -->
<span class="tag tag-warning mie6">warning</span>
<!-- Error -->
<span class="tag tag-error mie6">danger</span>
successinfowarningdanger
View source
<!-- Success Upper -->
<span class="tag tag-success tag-upper mie6">success</span>
<!-- Info Upper -->
<span class="tag tag-info tag-upper mie6">info</span>
<!-- Warning Upper -->
<span class="tag tag-warning tag-upper mie6">warning</span>
<!-- Error Upper -->
<span class="tag tag-error tag-upper mie6">danger</span>
pill tagyou did it!rounded5
View source
<!-- Pill -->
<span class="tag tag-pill tag-upper mie6">pill tag</span>
<!-- Pill Success -->
<span class="tag tag-pill tag-upper tag-success mie6">you did it!</span>
<!-- Round -->
<span class="tag tag-round tag-upper tag-success mie6">rounded</span>
<!-- Circle -->
<span class="tag tag-circle tag-upper tag-success mie6">5</span>