Á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.
$blue#003DA5Aa Aa
El veloz murciélago hindú comía feliz cardillo y kiwi.
$dark-blue#042F62Aa Aa
El veloz murciélago hindú comía feliz cardillo y kiwi.
$light-blue#e2e9f1Aa Aa
El veloz murciélago hindú comía feliz cardillo y kiwi.
$gold#DAAA00Colores 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#778A15Enlaces
Botones
button sin clases
.Button aplicado a distintos elementos
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
- 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!
- Lorem ipsum dolor sit.
- Assumenda cumque tenetur quidem.
- Corrupti enim rem voluptate.
- Vitae libero, quae doloribus dignissimos?
Lista numerada
- 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!
- Lorem ipsum dolor sit.
- Assumenda cumque tenetur quidem.
- Corrupti enim rem voluptate.
- 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!
- Lorem ipsum dolor sit.
- Assumenda cumque tenetur quidem.
- 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
| 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
Colapsable
Expandir colapsableLorem 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
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Perferendis, doloribus nemo quae quis earum dignissimos rem!
Animi, necessitatibus. Quas dolor vel quidem magni iusto.
Iure, sint possimus voluptatum hic temporibus ullam, natus.
Iure, sint possimus voluptatum hic temporibus ullam, natus.
Iure, sint possimus voluptatum hic temporibus ullam, natus.