Guía de estilo

Una guía central para los componentes comunes de la interfaz.
Colores
Una paleta convenientemente preparada para ajustar fácilmente todos los colores.
Primaria 1
Primaria 2
Primaria 3
Gris 1
Gris 2
Gris 3
Gris 4
Blanco
Éxito
Advertencia
Peligro
Tipografía
Títulos, cuerpo y otros elementos de texto comunes.

Pantalla Uno

Pantalla dos

Rúbrica 1

Rúbrica grande

Rúbrica 2

Rúbrica media

Rúbrica tres

Rúbrica 4

Rúbrica cinco
Rúbrica 6
Texto grande Enlace grande 
Cuerpo del texto Cuerpo del enlace
Texto pequeño Enlace pequeño
Enlace con la flecha
Elemento de texto enriquecido
Formato de los elementos tipográficos dentro del elemento de texto enriquecido.

Rúbrica 2

El elemento de texto enriquecido permite crear y dar formato a títulos, párrafos, citas en bloque, imágenes y vídeos, todo en un mismo lugar en lugar de tener que añadirlos y darles formato individualmente. Sólo tienes que hacer doble clic y crear contenidos fácilmente.

Esta es una cita en bloque

Rúbrica 4

Los títulos, los párrafos, las citas en bloque, las figuras, las imágenes y las leyendas de las figuras pueden ser estilizados después de añadir una clase al elemento de texto enriquecido utilizando el sistema de selector anidado "When inside of". Aquí hay texto en negrita y aquí hay texto en cursiva.

Este es el título de una figura.
  • Lista con viñetas Punto 1
  • Lista con viñetas Punto 2
  • Lista con viñetas Punto 3
  1. Número 1 de la lista
  2. Número 2
  3. Número 3
Iconos - Interfaz
Iconografía común de la interfaz
Iconos - Social
Iconos comunes de redes sociales
Botones
Componente, estilo de texto y variaciones de tamaño.
Tamaños de los botones
Botón redondo
Botón Icono
Entradas de formularios
Variaciones de tamaño y estado para las entradas de texto.
Tamaños de entrada
Gracias. Hemos recibido su envío.
¡Uy! Algo salió mal al enviar el formulario.
Textareas
Gracias. Hemos recibido su envío.
¡Uy! Algo salió mal al enviar el formulario.
Entrada con Icono
Gracias. Hemos recibido su envío.
¡Uy! Algo salió mal al enviar el formulario.
Entrada etiquetada
Etiqueta
* Introducir texto de sugerencia
Gracias. Hemos recibido su envío.
¡Uy! Algo salió mal al enviar el formulario.
Seleccionables del formulario
Casillas de verificación, radios y selecciones.
Casillas de verificación
Gracias. Hemos recibido su envío.
¡Uy! Algo salió mal al enviar el formulario.
Radios
Gracias. Hemos recibido su envío.
¡Uy! Algo salió mal al enviar el formulario.
Selecciona
Gracias. Hemos recibido su envío.
¡Uy! Algo salió mal al enviar el formulario.
Interruptores
Gracias. Hemos recibido su envío.
¡Uy! Algo salió mal al enviar el formulario.
Pestañas
Múltiples estilos para mostrar contenidos con pestañas.
Ficha 1 Contenido
Ficha 2 Contenido
Ficha 3 Contenido
Ficha 1 Contenido
Ficha 2 Contenido
Ficha 3 Contenido
Ficha 1 Contenido
Ficha 2 Contenido
Ficha 3 Contenido
Ficha 1 Contenido
Ficha 2 Contenido
Ficha 3 Contenido
Insignias
Combinar con otros componentes para mostrar los metadatos.
Primaria 1
Primaria 2
Primaria 3
Gris 1
Gris 2
Gris 3
Gris 4
Éxito
Advertencia
Peligro
Avatares
Representar a los usuarios sobre la interfaz.
Tamaños de avatar
Pequeño
Estándar
Grande
Sombras
Estilos preestablecidos para implicar la profundidad en los componentes de la interfaz.
Pequeño
Estándar
Grande
Contenido de la caja
Componente estructural para mostrar contenido con relleno y borde.
Rúbrica
Esto es un texto dentro de un bloque div.
Rúbrica

Esto es un texto dentro de un bloque div.

Botón
Iconos
Arreglos de componentes que incluyen iconos.
Título del contenido
Volutpat egestas nibh rhoncus mauris semper. Quam nec consectetur est sed lobortis orci ridiculus.
Título del contenido
Volutpat egestas nibh rhoncus mauris semper. Quam nec consectetur est sed lobortis orci ridiculus.

Llama la atención con este breve titular.

Volutpat egestas nibh rhoncus mauris semper. Quam nec consectetur est sed lobortis orci ridiculus.
Icono Rúbrica Horizontal
Título del contenido
Bolutpat egestas nibh rhoncus mauris semper. Quam nec consectetur est sed lobortis orci ridiculus.
Enlaces
Componentes polivalentes para enlazar con otras páginas.
Título del enlace
Listas
Listas convenientemente preparadas en múltiples estilos.
Arquitectura modular
Estética visual limpia y cuidada
Atención al cliente amable
Arquitectura modular
Estética visual limpia y cuidada
Atención al cliente amable
Arquitectura modular
Estética visual limpia y cuidada
Atención al cliente amable
Arquitectura modular
Estética visual limpia y cuidada
Atención al cliente amable

Buscar en