sdk Framework Midesof
Header
Hemos definido 2 temas o estilos gráficos, de los cuales se proponen distintos formatos según el contenido que se necesita presentar.
Tema Claro
Ejemplo 01
Logo Midesof + Accesibilidad + Menú simple
Código
Ejemplo 02
Logo Midesof + Accesibilidad + Menú + submenús hover
Código
Ejemplo 03
Logo Midesof + Accesibilidad + Menú + submenús al hacer click
Código
Ejemplo 04
Logo Midesof + Logo de proyecto/servicio
Código
Ejemplo 05
Logo Midesof + Buscador + Boton relevante + Menú oculto
Menú
Inicio de sesión con Clave Única
Iniciar sesión
Beneficios del Estado
Inicio de sesión con Clave Única
Iniciar sesión
Código
Tema Oscuro
Para utilizar el tema oscuro del header, es necesario reallizar solo dos ajuses.
- En la etiqueta < header >, se debe cambiar la clase "bg-claro" por la clase "bg-terciario"
- En la etiqueta .navbar-brand, reemplazar la imagen "logo_mdsyf_texto_head-negro.svg" por la versión blanca del mismo "logo_mdsyf_texto_head-blanca.svg"
Ejemplo
Código
Logotipos o isologos
Estos son los logotipos o isologos aprobados y que podráin utilizar tusu sitios webs o sistemas.
Sobre fondo claro
Header
Footer
Tipografía e íconos
La tipografía/fuente oficial es la "Roboto" la cual puede utilizarse en todas sus versioens si se desea (+ Detalles). Para los titulares, se ha incorporado la variante "Roboto Slab" qu será aplicada a las etiquetas H del desarrollo.
Tipografía / Fuente
Roboto
La tipografía Roboto es la tipografía oficial de todos los proyectos web a nivel de frontend. Está disponible en todas sus versiones, estilos y valores.
abcdefghijklmnñopqrstuvwxyz. 1234567890 -=[];',./!@#$%^&*()_+.
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ. 1234567890 -=[];',./!@#$%^&*()_+.
Roboto Slab
La tipografía Roboto Slab se incorcoporó para ser utilizada en titulares que utilicen alguna etiqueta "h": h1, h2, h3, h4 ,h5 y/o h6.
Aa
abcdefghijklmnñopqrstuvwxyz. 1234567890 -=[];',./!@#$%^&*()_+.
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ. 1234567890 -=[];',./!@#$%^&*()_+.
Tamaños
Títulos
Para aplicar los tamaños de títilo a cualquier texto, se deben asignar las clases que aquí se detalla.
Título XL
<p class="titulo-xl"></p>
Título L
<p class="titulo-l"></p>
Título M
<p class="titulo-m"></p>
Título S
<p class="titulo-s"></p>
Títulos con Roboto Slab
Cuando la clase se asigna a una etiqueta de titular "h" el texto aparecerá con la tupografía/fuente "Roboto Slab"
Título XL
<h6 class="titulo-xl"></h6>
Título L
<h6 class="titulo-l"></h6>
Título M
<h6 class="titulo-m"></h6>
Título S
<h6 class="titulo-s"></h6>
Párrafos
Normal - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Negrita - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Cursiva - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
{font-size: 16px; line-height: 24px; font-weight: 400; font-family: Roboto; }
Listado
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
{font-size: 16px; line-height: 24px; font-weight: 400; font-family: Roboto; }
Íconos
El Kit digital de Gobienro trae por defecto una pequeña galería de íconos que deben ser los usadso de manera prioritaría.
Íconos básicos
cl-accessibility
cl-add-circle-fill
cl-add-circle-line
cl-arrow-left
cl-arrow-line
cl-arrow-right
cl-arrow
cl-authority
cl-breadcrumb
cl-briefcase
cl-burger
cl-bus
cl-call-info
cl-claveunica
cl-close-line
cl-close
cl-computer
cl-contrast
cl-currency-cycle
cl-decrease-text
cl-doctor
cl-document-verified
cl-download
cl-facebook
cl-filter
cl-give-letter
cl-img-preview
cl-increase-text
cl-instagram
cl-list
cl-login-fill
cl-login
cl-logout
cl-m-arrow-down
cl-m-arrow-left
cl-m-arrow-right
cl-m-arrow-up
cl-messenger
cl-moneybox
cl-ok
cl-pause
cl-play
cl-question
cl-reading
cl-search
cl-sound
cl-store
cl-telephone
cl-together
cl-touch-screen
cl-twitter
cl-woman
cl-youtube
Redes Sociales
cl-facebook
cl-instagram
cl-twitter
cl-youtube
Código
Material Design Icons
Utilizamos la fuente disponible de Material Design/Google como fuente de iconos prioritaria para utilziar en todos los desarrollos.
Es posible utilizar la versión tradicional de íconos (Material icon), como la de símbolos representado solo con trazo (Material Symbols Outlined)
Ejemplos:
- Material Icon: - -
- Material Symbols Outlined: search - home - settings
Código
Cards / Tarjetas
Dejamos a disposición una serie de cards o tarjetas para presentar distintos contenidos. Todas tienen su origen en el Framework de Gobierno de Chile, en su versión con Boostrap 4.0, por lo tanto las clases y estilos deben citarse inicialmente desde ahí.
Tarjeta Noticias
Ejemplo 01
Tag sobre imagen - Enlace en titular - Extracto
Fecha: 00/00/0000
Título de la noticia
Extracto de la noticia extracto de la noticia extracto de la noticia extracto de la noticia extracto de la noticia.
Código
Ejemplo 02
Tag en cuerpo - Enlace en titular - Extracto
Fecha: 00/00/0000
Título de la noticia
Extracto de la noticia extracto de la noticia extracto de la noticia extracto de la noticia extracto de la noticia.
Código
Ejemplo 03
Tag sobre imagen - Enlace en titular - Extracto - Botón
Fecha: 00/00/0000
Título de la noticia
Extracto de la noticia extracto de la noticia extracto de la noticia extracto de la noticia extracto de la noticia.
Más detallesCódigo
Ejemplo 04
Tag en cuerpo - Enlace en titular - Extracto - Botón
Fecha: 00/00/0000
Título de la noticia
Extracto de la noticia extracto de la noticia extracto de la noticia extracto de la noticia extracto de la noticia.
Más detallesCódigo
Tarjeta informativa
Ejemplo 05
Tag - Titular - contenido - Botón
Titular de la información que se desea destacar
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel risus rhoncus, lacinia massa sed, ultrices lorem. Duis id imperdiet elit. Aliquam vel scelerisque nibh.
Más detallesCódigo
Ejemplo 06
Titular - Contenido - Detalles - Botón
Suspendisse ultrices ullamcorper ante vel euismod.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel risus rhoncus, lacinia massa sed, ultrices lorem. Duis id imperdiet elit. Aliquam vel scelerisque nibh.
Código
Ejemplo 07
Imagen - Títular con enlace - Contenido
Suspendisse ultrices ullamcorper ante vel euismod.
Código
Ejemplo 08
Imagen - Títular con enlace - Contenido
Suspendisse ultrices ullamcorper ante vel euismod.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel risus rhoncus, lacinia massa sed, ultrices lorem. Duis id imperdiet elit. Aliquam vel scelerisque nibh.
Código
Ejemplo 09
Títular con enlace - contenido
Suspendisse ultrices.chevron_right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel risus rhoncus, lacinia massa sed, ultrices lorem. Duis id imperdiet elit. Aliquam vel scelerisque nibh.
Código
Ejemplo 10
Títular con enlace - contenido
Suspendisse ultrices.chevron_right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel risus rhoncus, lacinia massa sed, ultrices lorem. Duis id imperdiet elit. Aliquam vel scelerisque nibh.
Código
Ejemplo 11
Títular con enlace - contenido
Suspendisse ultrices.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel risus rhoncus, lacinia massa sed, ultrices lorem. Duis id imperdiet elit. Aliquam vel scelerisque nibh.
location_on Dirección: Av Avenida #2345
schedule Horario: 09:00 hrs. - 18:00 hrs.
Código
Ejemplo 12
Títular con enlace - contenido
Suspendisse ultrices.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel risus rhoncus, lacinia massa sed, ultrices lorem. Duis id imperdiet elit. Aliquam vel scelerisque nibh.
location_on Dirección: Av Avenida #2345
schedule Horario: 09:00 hrs. - 18:00 hrs.
Más detallesCódigo
Tarjeta botón
Ejemplo 13
Botón (hover claro) - Títular - Contenido
Suspendisse ultrices. chevron_right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel risus rhoncus, lacinia massa sed, ultrices lorem. Duis id imperdiet elit. Aliquam vel scelerisque nibh.
Código
Ejemplo 14
Botón (hover primario) - Títular - Contenido
Suspendisse ultrices. chevron_right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel risus rhoncus, lacinia massa sed, ultrices lorem. Duis id imperdiet elit. Aliquam vel scelerisque nibh.
Código
Ejemplo 15
Botón (hover claro) - Dato - Titular - Contenido
N° 1
Suspendisse ultrices.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel risus rhoncus, lacinia massa sed, ultrices lorem. Duis id imperdiet elit. Aliquam vel scelerisque nibh.
Código
Ejemplo 16
Botón (hover primario) - Dato - Titular - Contenido
N° 1
Suspendisse ultrices.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel risus rhoncus, lacinia massa sed, ultrices lorem. Duis id imperdiet elit. Aliquam vel scelerisque nibh.
Código