Átomos y moléculas

Este documento contiene todas las implementaciones de los estilos aplicados mediante el archivo portal-unificado.css.


Paleta de colores

Aa Aa

El veloz murciélago hindú comía feliz cardillo y kiwi.

Azul
$blue
#003DA5

Aa Aa

El veloz murciélago hindú comía feliz cardillo y kiwi.

Azul Oscuro
$dark-blue
#042F62

Aa Aa

El veloz murciélago hindú comía feliz cardillo y kiwi.

Celeste
$light-blue
#e2e9f1

Aa Aa

El veloz murciélago hindú comía feliz cardillo y kiwi.

Amarillo
$gold
#DAAA00

Colores para decoración de contenedores

.Box--color1
#003DA5
.Box--color2
#0099FF
.Box--color3
#470A68
.Box--color4
#93117e
.Box--color5
#FF6900
.Box--color6
#FF0000
.Box--color7
#28a745
.Box--color8
#007D8A
.Box--color9
#2B5CA8
.Box--color10
#F3A303
.Box--color11
#82368C
.Box--color12
#778A15

Enlaces

Enlace simple
Etiqueta del enlaceEnlace externo
Enlace alternativo
Enlace alternativoEnlace externo

Botones

button sin clases



.Button aplicado a distintos elementos

Button div
Button span Button link
Button span Button linkEnlace externo

Modificadores de .Button


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

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


Alert

simple: lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, libero.
warning: lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, libero.
info: lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, libero.
success: lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, libero.
danger: lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, libero.

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 única

Molécula: fecha.php

24 de noviembre del 2022
24 de noviembre del 2022

Fecha única pasada

Molécula: fecha-pasada.php

18 de abril del 2021
18 de abril del 2021

Fecha doble

Molécula: fecha-doble.php

24 al 29 de noviembre del 2022
24 de noviembre al 12 de diciembre del 2022
24 de noviembre del 2022 al 8 de enero del 2023
24 al 29 de noviembre del 2022
24 de noviembre al 12 de diciembre del 2022
24 de noviembre del 2022 al 8 de enero del 2023

Fecha doble pasada

Molécula: fecha-doble-pasada.php

18 al 23 de abril del 2021
18 de abril al 14 de mayo del 2021
18 de abril del 2021 al 3 de febrero del 2022
18 al 23 de abril del 2021
18 de abril al 14 de mayo del 2021
18 de abril del 2021 al 3 de febrero del 2022

Componente actual sin año

Abr
18
Mar 25 - 27
Abr
18

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

Uruguay Montevideo Sudamérica

Descarga

Formulario para inscripción (.pdf 354 KB)
Lorem ipsum dolor sit amet consectetur
Formulario para inscripción (.pdf 354 KB)
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

Íconos

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


Tablas

Tabla 1. Título de tabla agregado con la etiqueta caption
Hora Temática Disertantes
08:30 Inscripción
09:00 Apertura Autoridades de Gobierno
09:30 Gobierno Digital en Uy: Avances y Desafíos  José Clastornik
10:00 Corte
10:30 Transformación digital para un desarrollo sostenible Alicia Bárcenas, Fabricio Hochschild
11:30 Cooperación Internacional en la Era Digital Ministros del D9
12:30 Almuerzo
14:00 La próxima Frontera para los Servicios de Gobierno Panel de CIOs del D9
15:00 Transformación Digital en la región Panel de CIOs. Regionales
Corte
16:30 Impacto actual y futuro de la transformación digital Barbara Ubaldi, Vincenzo Aquaro, BID tbc
17:30 Principios Generales Para la era Digital Web Foundation Keynote
18:00 Relatoría y cierre
18:15 Brindis

Descripción de la tabla 1 - Tabla con clase Table--striped y descripción abajo. Ver más sobre uso de tablas.


Sticky

La idea es utilizar position: sticky; si el navegador soporta y de lo contrario corre el plugin sticky.js

Sticky

Colapsable

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa ratione expedita unde ipsum, fugiat eius impedit nostrum amet doloribus nihil rerum magnam laboriosam harum perspiciatis iure officiis officia delectus quibusdam!


Ventana modal


Pestañas (Tabs)

Conformación

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique erat ut malesuada varius. Ut scelerisque viverra lectus, nec hendrerit enim scelerisque quis. Donec laoreet semper est. Fusce at hendrerit nulla. Duis fermentum scelerisque malesuada. Aenean elit massa, aliquam sit amet finibus sed.

Naturaleza

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique erat ut malesuada varius. Ut scelerisque viverra lectus, nec hendrerit enim scelerisque quis. Donec laoreet semper est. Fusce at hendrerit nulla. Duis fermentum scelerisque malesuada. Aenean elit massa, aliquam sit amet finibus sed.

Gestión

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique erat ut malesuada varius. Ut scelerisque viverra lectus, nec hendrerit enim scelerisque quis. Donec laoreet semper est. Fusce at hendrerit nulla. Duis fermentum scelerisque malesuada. Aenean elit massa, aliquam sit amet finibus sed.

Etapas

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique erat ut malesuada varius. Ut scelerisque viverra lectus, nec hendrerit enim scelerisque quis. Donec laoreet semper est. Fusce at hendrerit nulla. Duis fermentum scelerisque malesuada. Aenean elit massa, aliquam sit amet finibus sed.


Desplegables (Dropdowns)


Galería