Tag (.tag)

Syntax

<!-- Basic examples -->
<span class="tag"><span class="fa fa-checkmark"></span> with icon</span>
<span class="tag tag--small">small tag</span>
<span class="tag tag--success">success tag</span>
<span class="tag tag--danger">danger tag</span>

<!-- Use modifier tag--yesNo for "yes" / "no" content inside tag -->
<span class="tag tag--yesNo tag--primary">Yes</span>
<span class="tag tag--yesNo">No</span>

<!-- Removable tag -->
<span class="tag tag--removable">
    remove
    <span class="fa fa-times tag-remove"></span>
</span>

Modifiers

Modifier (.tag) Behavior
.tag--primary Light version of primary color as background.
.tag--success Success color as background.
.tag--danger Danger color as background.
.tag--circular Fixed width and height and border radius 100%.
.tag--small Smaller size and font size.
.tag--clickable Cursor: pointer on hover
.tag--removable Hover style on tag-remove children
.tag--yesNo Fixed width

results matching ""

    No results matching ""