Produto
PRODUTO
Links
Links são usados principalmente como um elemento de navegação. Podem ainda ser utilizados para alterar como os dados são visualizados em uma página — como carregar mais itens ou alterar a ordenação de dados, por exemplo. Sempre que a interação resultar no envio, mudança ou manipulação de dados, o componente de botão deve ser utilizado.
Estados de interação
Os estados de interação indicados abaixo se replicam para todas as suas variações de estilo.
Normal
Isso é um link
Hover
Isso é um link
Disabled
Isso é um link
Estilos
Link padrão
Isso é um link
Link com ícone
Isso é um link
Download
Download
(Extensão do arquivo, Peso)
Código
HTML 
Exibir código
Copiar código
Exibir código
<a href="#" class="link">
Isso é um link
</a>
<a href="#" class="link">
<span class="icon">
<img src="/img/layers-icon.svg" alt="Isso é um link">
</span>
Isso é um link
</a>
SASS Exibir código
Copiar código
Exibir código
.link{
display: block;
font-family: Lato;
font-size: 1em;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.5;
letter-spacing: normal;
color: #3153f5;
white-space: nowrap;
position: relative;
transition: .4s;
@media (max-width: $MQMobile){
max-width: 100%;
white-space: initial;
}
&:hover,
&.hovered{
text-decoration: underline;
color: #1b68ff;
.icon{
#icon, #mask{
fill: #1b68ff;
}
}
}
&.disabled{
pointer-events: none;
color: #9b9b9b;
}
.icon{
width: 24px;
height: 24px;
float: left;
box-sizing: border-box;
margin-right: 7px;
transition: .3s;
#icon, #mask{
transition: .4s;
}
img {
max-width: 100%;
}
}
.download{
font-family: Lato;
font-size: 0.75em;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.5;
letter-spacing: normal;
color: #9b9b9b;
position: absolute;
top: 4px;
margin-left: 7px;
}
&.close{
.icon{
transform: rotate(-180deg);
}
}
}