Guía de estilos

Objetivo

Con el objetivo de estandarizar la estructura de los contenidos de tu web, hemos realizado la siguiente guía compuesta por un conjunto de elementos específicos que definen tu identidad corporativa, y que debes tratar de mantener en toda la maquetación de documentacion que realices.


Gama de colores

Los colores aquí especificados son los que debes utilizar en el contenido.

El texto dentro de los documentos (body) debe ir en negro #19161A.

#3C1053
#671E75 (Principal)
#DB6B30
#F6B700

Tipografías

Estas son las fuentes establecidas por defecto para títulos y párrafos y que debes de usar para tu contenido. Además, puedes utilizar los estilos de: negrita, cursiva, subrayado y tachado del editor para destacar cualquier tipo de textos dentro de estos elementos.

Encabezados (headings).

  • Raleway (Light, Regular, Medium, Semi-bold, Italic).

Párrafos (body).

  • Tipo letra (font-family): Raleway.
  • Tamaño (font-size): 17px (escritorio) / 17px (tabletas) / 18px (móviles).
  • Interlineado (line-height): 1.6.
  • Grosor (font-weight): 400 (Normal).
  • Estilo (font-style): normal.

Encabezados (títulos y subtítulos)

Los siguientes son ejemplos de los encabezados establecidos como predeterminados, con diferentes tamaños de letra en función de si son para escritorio/tableta/móvil:

h1. Ejemplo Texto
(font-size: 48/44/42 px; line-height: 1.2; font-weight: 600 (Semi Bold); style: normal;)

h2. Ejemplo Texto
(font-size: 42/38/36 px; line-height: 1.2; font-weight: 600 (Semi Bold); style: normal;)

h3. Ejemplo Texto
(font-size: 32/28/28 px; line-height: 1.2; font-weight: 600 (Semi Bold); style: normal;)

h4. Ejemplo Texto
(font-size: 26/24/24 px; line-height: 1.2; font-weight: 600 (Semi Bold); style: normal;)

h5. Ejemplo Texto
(font-size: 22/20/20 px; line-height: 1.2; font-weight: 600 (Semi Bold); style: normal;)

h6. Ejemplo Texto
(font-size: 18/18/18 px; line-height: 1.2; font-weight: 600 (Semi Bold); style: normal;)


Botones


Separadores

Para el uso de separadores se podrá aplicar una línea (como la que aparece en este documento separando secciones), cuando necesites mostrar una separación de contenido. La etiqueta <hr> sirve para este cometido, y agrega márgenes posteriores y superiores en el documento. Puedes añadirlo fácilmente con el botón "" del editor.


Leer más

Un "Leer más" sirve para cortar el contenido de un artículo para tu blog, por ejemplo, donde verás que cada entrada aparece con un pequeño párrafo de introducción, y después un botón "Leer más..." que enlaza a la vista del artículo completo.

Para introducir este tipo de botones, utiliza el botón "Insert Read More read more simbol" del editor.


Lista desordenada

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Vivamus sed leo mollis, ullamcorper lacus et, aliquet nibh.
  • Nunc nec accumsan nunc. Cras ac lorem a tellus pulvinar pulvinar.
  • In dignissim tortor id libero vulputate mollis.

Lista ordenada

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Vivamus sed leo mollis, ullamcorper lacus et, aliquet nibh.
  3. Nunc nec accumsan nunc. Cras ac lorem a tellus pulvinar pulvinar.
  4. In dignissim tortor id libero vulputate mollis.

Alertas

Puedes añadir una alerta a cualquier parte de tu textos utilizando los tipos incluidos en el botón "Styles" del editor:

Utiliza alert-success para crear una alerta de tipo Suceso:

¡Felicidades! Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Utiliza alert-info para crear una alerta de tipo Información:

¡Sugerencia! Nullam eros mi, mollis in sollicitudin non, tincidunt sed enim.

Utiliza alert-warning para crear una alerta de tipo Aviso:

¡Precaución! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor.

Utiliza alert-danger paracrear una alerta de tipo Peligro:

¡Error de registro! Vestibulum eget felis nec purus commodo convallis. Aliquam erat volutpat.