Produto
PRODUTO
Tags
As tags são usadas para itens que precisam ser rotulados, categorizados ou organizados usando palavras-chave que os descrevem.
Tipos
Normal
Option
Estados de interação
Os estados de interação indicados abaixo se replicam para todas as suas variações de tipo.
Normal
Option
Hover
Option
Pressed
Option
Normal
Option
Código
HTML 
Exibir código
Copiar código
Exibir código
<a href="#" class="tag-box">
<span class="text">
Option
</span>
</a>
<a href="#" class="tag-box">
<span class="text">
Option
</span>
<a href="#">
<img src="/img/close-icon.png">
</a>
</a>
SASS Exibir código
Copiar código
Exibir código
.tag-box{
background-color: #3153f5;
color: #fff;
border-radius: 4px;
display: inline-block;
width: auto;
line-height: 24px;
padding: 0 8px;
box-sizing: border-box;
text-decoration: none!important;
margin: 0 5px 5px 0;
transition: .4s;
&:hover,
&.hovered{
text-decoration: none!important;
background-color: #1b68ff;
}
&:active,
&.pressed{
text-decoration: none!important;
background-color: #0a51fb;
}
&.disabled{
pointer-events: none;
text-decoration: none!important;
background-color: #9b9b9b;
}
.text{
font-family: Lato;
font-size: 0.75em;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 24px;
letter-spacing: normal;
vertical-align: 2px;
padding: 0 4px 0 2px;
color: #ffffff;
}
a{
display: inline-block;
border-left: 1px solid rgba(255, 255, 255, 0.2);
margin-right: -2px;
padding-left: 8px;
position: relative;
top: 0px;
img{
max-width: 7px!important;
vertical-align: 2px;
}
}
}