Tag
The Tag component is an interactive keyword that helps to organize and categorize objects.
Status: neg
Status: pos
Status: war
Status: neutral
Status: discovery
Tag
Tag
Tag
Tag
Tag
Tag
Tag
Tag
Tag
Tag
Code
<div class="backoffice-tag">Tag</div>
| Class name | type | |
|---|---|---|
| backoffice-tag | component | Container element |
backoffice-tag[data-status='neg'], backoffice-tag-neg | modifier | Sets the tag`s variant |
backoffice-tag[data-status='pos'], backoffice-tag-pos | modifier | Sets the tag`s variant |
backoffice-tag[data-status='war'], backoffice-tag-war | modifier | Sets the tag`s variant |
backoffice-tag[data-status='discovery'], backoffice-tag-discovery | modifier | Sets the tag`s variant |
backoffice-tag[data-status='neutral'], backoffice-tag-neutral | modifier | Sets the tag`s variant |
@media (hover: hover) { .backoffice-tag-hover, .backoffice-tag:hover, .backoffice-tag[data-hover] { ... } } | modifier | Sets the display of the hover status |
@media (hover: hover) { .backoffice-tag-hover:after, .backoffice-tag:hover:after, .backoffice-tag[data-hover]:after { ... } } | modifier | Sets the display of the :after pseudo-element in the hover status |