Transmiten información dinámica, como recuentos o estado. Puede incluir etiquetas o números.
Proporcionan información adicional, notificaciones, feedback y accesos rápidos sobre
elementos específicos. Mejoran la comunicación visual y la interacción del usuario al
resaltar características importantes, estados o notificaciones relevantes en la
interfaz.
Estos son los aspectos que influyen en cuándo y donde utilizarlos:
<span class="insignia"></span>
.insignia {
background-color: #E33535;
border-radius: 8px;
height: 12px;
mix-blend-mode: normal;
position: relative;
width: 12px;
}
<span class="insignia-numero ">34</span>
.insignia-numero {
align-items: center;
background: #E33535;
border-radius: 10px;
color: #FFFFFF;
display: flex;
font-family: 'Montserrat';
font-size: 10px;
font-style: normal;
font-weight: 500;
gap: 10px;
height: 20px;
justify-content: center;
line-height: 20px;
max-width: 30px;
padding: 0px 8px;
}
<span class="insignia-etiqueta insignia-alerta">ALERTA</span>
<span class="insignia-etiqueta insignia-estado">ESTADO</span>
<span class="insignia-etiqueta insignia-info">INFORMACION</span>
<span class="insignia-etiqueta insignia-otros">OTROS</span>
.insignia-etiqueta {
align-items: center;
border-radius: 10px;
color: #FFFFFF;
display: flex;
flex-direction: column;
font-family: 'Montserrat';
font-size: 12px;
font-style: normal;
font-weight: 500;
gap: 10px;
height: 20px;
justify-content: center;
line-height: 20px;
mix-blend-mode: normal;
padding: 0px 8px;
text-transform: uppercase;
width: fit-content;
}
.insignia-alerta {
background: #DD7A23;
}
.insignia-estado {
background: #27BB22;
}
.insignia-info {
background: #3D8DDD;
}
.insignia-otros {
background: #B257B7;
}