Etiquetas

Actualizado el 14/03/2024

Las etiquetas se emplean principalmente para clasificar y organizar contenidos o atributos.

<> Código

× Ocultar Código

HTML
JS

<ul class="ulpgcds-tags"> <li class="ulpgcds-tag"><a href="">Etiqueta 1</a></li> <li class="ulpgcds-tag"><a href="">Etiqueta 2</a></li> </ul>

Variantes

Etiquetas retirables

<> Código

× Ocultar Código

HTML
JS

<ul class="ulpgcds-tags"> <li class="ulpgcds-tag"><a href="">Etiqueta 1 <span class="ulpgcds-tag__close"></span></a></li> <li class="ulpgcds-tag"><a href="">Etiqueta 2 <span class="ulpgcds-tag__close"></span></a></li> </ul>

Uso del componente

Las etiquetas o tags, son elementos de la interfaz que permiten condensar y destacar información en un espacio limitado.

Su estructura es muy simple, ya que permite interacciones limitadas.

Estilos CSS

Estas son las clases aplicadas a las etiquetas HTML para conseguir los diferentes estilos.

Selector CSS	Descripción
.ulpgcds-tag	Activa la visualización de un elemento en formato etiqueta
.ulpgcds-tag__close	Añade el icono de cierre de la etiqueta

Diseño

En esta sección se pueden ver los aspectos que presenta el componente para las diferentes pseudoclases relativas a la interacción con el mismo. Estos estilos siguen los mismos patrones de interacción que el resto de los componentes del Design System, por lo que su modificación puede afectar a la consistencia del sistema y a la experiencia de los usuarios.

Estado del componente

Estable