Guía de estilos en gub.uy

Guías

Paleta de colores

Paletas de colores secundarios

Colores personalizables (a excepción del azul gub.uy) según el formulario de personalización de paleta de colores.

Decoración de contenedores

Colores para fondos

Enlaces

Botones

button sin clases

Botón simple 
Botón simple 

.Button aplicado a distintos elementos

Button span Button link Button button

Modificadores de .Button

Button Primary Button Secondary Button Inverse Button White

Párrafos (strong, em, mark, a)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus nihil nesciunt saepe perferendis repellat ratione aliquam expedita aliquid delenitiEnlace externo quasi animi laboriosam, molestias architecto recusandae dolor perspiciatis accusamus earum minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus nihil nesciunt saepe perferendis repellat ratione aliquam expedita aliquid deleniti quasi animi laboriosam, molestias architecto recusandae dolor perspiciatis accusamus earum minima.

h1. Encabezado de primer nivel

h2. Encabezado de segundo nivel

h3. Encabezado de tercer nivel

h4. Encabezado de cuarto nivel

h5. Encabezado de quinto nivel

h6. Encabezado de sexto nivel

Listas

Lista de viñetas

• Lorem ipsum dolor sit amet.
• Esse necessitatibus, adipisci saepe laboriosam.
  • Lorem ipsum dolor sit.
  • Assumenda cumque tenetur quidem.
  • Corrupti enim rem voluptate.
• Neque tempore est, natus ad!
• Ex labore officiis, tempore nemo!
  1. Lorem ipsum dolor sit.
  2. Assumenda cumque tenetur quidem.
  3. Corrupti enim rem voluptate.
• Vitae libero, quae doloribus dignissimos?

Lista numerada

1. Lorem ipsum dolor sit amet.
2. Esse necessitatibus, adipisci saepe laboriosam.
   1. Lorem ipsum dolor sit.
   2. Assumenda cumque tenetur quidem.
   3. Corrupti enim rem voluptate.
3. Neque tempore est, natus ad!
4. Ex labore officiis, tempore nemo!
   • Lorem ipsum dolor sit.
   • Assumenda cumque tenetur quidem.
   • Corrupti enim rem voluptate.
5. Vitae libero, quae doloribus dignissimos?

Lista modificada .u-bullet

• Lorem ipsum dolor sit amet.
• Esse necessitatibus, adipisci saepe laboriosam.
  • Lorem ipsum dolor sit.
  • Assumenda cumque tenetur quidem.
  • Corrupti enim rem voluptate.
• Neque tempore est, natus ad!
• Ex labore officiis, tempore nemo!
  1. Lorem ipsum dolor sit.
  2. Assumenda cumque tenetur quidem.
  3. Corrupti enim rem voluptate.
• Vitae libero, quae doloribus dignissimos?

Alert

Fecha

Para asegurar la correcta lectura del formato fecha por los lectores de pantalla se oculta el div class="Fecha" con aria-hidden="true" y se establece un nombre mediante aria-describedby="[id-unico]". Luego se agrega un span oculto pero referido con el [id-unico] donde se escribe la fecha de la manera que deba ser leída.

Ejemplos:

• Fecha: 24 de noviembre del 2022
• Fecha con doble día: 24 al 29 de noviembre del 2022
• Fecha con doble mes: 24 de noviembre al 12 de diciembre del 2022
• Fecha con doble año: 24 de noviembre del 2022 al 8 de enero del 2023

Fecha única

Molécula: fecha.php

Fecha única pasada

Molécula: fecha-pasada.php

Fecha doble

Molécula: fecha-doble.php

Fecha doble pasada

Molécula: fecha-doble-pasada.php

Componente actual sin año

Utilidades de texto

.u-textLeft Lorem ipsum dolor sit.

.u-textCenter Lorem ipsum dolor sit.

.u-textRight Lorem ipsum dolor sit.

.u-textMute Lorem ipsum dolor sit.

.u-textNormal Lorem ipsum dolor sit.

.u-textSemiBold Lorem ipsum dolor sit.

.u-textBold Lorem ipsum dolor sit.

.u-textBlue Lorem ipsum dolor sit.

.u-textBlack Lorem ipsum dolor sit.

.u-textSmall Lorem ipsum dolor sit.

.u-textMedium Lorem ipsum dolor sit.

.u-textLarge Lorem ipsum dolor sit.

.u-textExtraLarge Lorem ipsum dolor sit.

.u-textUppercase Lorem ipsum dolor sit.

Paginación

Buscador

Básico

Más grande

Sin borde

Etiquetas

Descarga

Íconos

Los íconos se encuentran en la carpeta /assets/icons y en dos formatos: svg y png.

Tablas