Highlighted text

Texto destacado

Actualizado el 27/10/2026

Dentro de cualquier tipo de contenido se podrá resaltar visualmente un bloque de texto. El realce se realiza aplicando un color de fondo y un pequeño sangrado.

Se proporcionan estas dos variantes de texto destacado:

  • Color de fondo gris suave.
  • Color de fondo naranja suave.

Esta elección de colores se ha hecho procurando cumplir el contraste suficiente entre fondo y texto, según los criterios de accesibilidad.

El texto destacado debe ser un párrafo. No se pueden destacar textos inline.

Texto resaltado gris

Pellentesque pharetra magna quis velit varius elementum. Curabitur tristique in libero ac scelerisque. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tempor imperdiet odio, sit amet porta tellus. Curabitur pulvinar fermentum eros. Aliquam accumsan odio et sapien mollis commodo. Morbi in augue sit amet mi accumsan elementum.

   

<> Código
× Ocultar Código
  • HTML
  • JS
<p class="ulpgcds-highlighted-text ulpgcds-highlighted-text--gray">Pellentesque pharetra magna quis velit varius elementum. Curabitur tristique in libero ac scelerisque. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tempor imperdiet odio, sit amet porta tellus. Curabitur pulvinar fermentum eros. Aliquam accumsan odio et sapien mollis commodo. Morbi in augue sit amet mi accumsan elementum.</p> 

Texto resaltado naranja

Pellentesque pharetra magna quis velit varius elementum. Curabitur tristique in libero ac scelerisque. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tempor imperdiet odio, sit amet porta tellus. Curabitur pulvinar fermentum eros. Aliquam accumsan odio et sapien mollis commodo. Morbi in augue sit amet mi accumsan elementum.

   

 

<> Código
× Ocultar Código
  • HTML
  • JS
<p class="ulpgcds-highlighted-text ulpgcds-highlighted-text--orange">Pellentesque pharetra magna quis velit varius elementum. Curabitur tristique in libero ac scelerisque. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tempor imperdiet odio, sit amet porta tellus. Curabitur pulvinar fermentum eros. Aliquam accumsan odio et sapien mollis commodo. Morbi in augue sit amet mi accumsan elementum.</p> 
Estado del componente
Estable