Tags

Types

Default
Secondary
Outline
Success
Warning
Error
<!-- Default Tag -->
<div class="tag">Default</div>

<!-- Secondary Tag -->
<div class="tag tag-secondary">Secondary</div>

<!-- Outline Tag -->
<div class="tag tag-outline">Outline</div>

<!-- Success Tag -->
<div class="tag tag-success">Success</div>

<!-- Warning Tag -->
<div class="tag tag-warning">Warning</div>

<!-- Error Tag -->
<div class="tag tag-error">Error</div>

Tags with Icons

Default with icon
Secondary with Icon
Outline with icon
<!-- Default Tag with icon -->
<div class="tag">
  Default with icon
  <svg class="icon icon-small"><use xlink:href="/assets/icons/feather.svg#x"/></svg>
</div>

<!-- Secondary Tag with icon -->
<div class="tag tag-secondary">
  Secondary with Icon
  <svg class="icon icon-small"><use xlink:href="/assets/icons/feather.svg#x"/></svg>
</div>

<!-- Outline Tag with icon -->
<div class="tag tag-outline">
  Outline with icon
  <svg class="icon icon-small"><use xlink:href="/assets/icons/feather.svg#x"/></svg>
</div>

Absolute Tag

If you want to use a tag inside a relative <div> could use an absolute tag.

I'm absolute
<div class="tag tag-absolute">
  I'm absolute
</div>