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.

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

El texto dentro de los documentos (body) debe ir en gris #5d5d5d. Los títulos (headings) van en negro #19161A.

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

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).

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

Párrafos (body).

• Tipo letra (font-family): Montserrat.

• Tamaño (font-size): 1.7rem (escritorio) / 1.7rem (tabletas) / 1.6rem (móviles).

• Interlineado (line-height): 1.6.

• Grosor (font-weight): 400 (Normal).

• Estilo (font-style): normal.

• Color: #5d5d5d.

Menú principal.

• Tipo letra (font-family): Montserrat Alternates.

• Tamaño (font-size): 20px.

• Interlineado (line-height): 1.

• Grosor (font-weight): 400 (Normal).

• Estilo (font-style): normal.

• Color: #5d5d5d.

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: 50/46/42 px; line-height: 1.2; font-weight: 600 (Semi Bold); style: normal; color: #19161a;)

h2. Ejemplo Texto

(font-size: 42/38/34 px; line-height: 1.2; font-weight: 600 (Semi Bold); style: normal; color: #19161a;)

h3. Ejemplo Texto

(font-size: 34/30/26 px; line-height: 1.2; font-weight: 600 (Semi Bold); style: normal; color: #19161a;)

h4. Ejemplo Texto

(font-size: 22/22/22 px; line-height: 1.2; font-weight: 600 (Semi Bold); style: normal; color: #19161a;)

h5. Ejemplo Texto

(font-size: 20/20/20 px; line-height: 1.2; font-weight: 600 (Semi Bold); style: normal; color: #19161a;)

h6. Ejemplo Texto

(font-size: 18/18/18 px; line-height: 1.2; font-weight: 600 (Semi Bold); style: normal; color: #19161a;)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum. Pellentesque ultrices ultrices sapien, nec tincidunt nunc posuere ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam scelerisque tristique dolor vitae tincidunt. Aenean quis massa uada mi elementum elementum. Nec sapien convallis vulputate rhoncus vel dui.

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.

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" del editor.

• 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.

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.

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:

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

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

Utiliza alert-danger paracrear una alerta de tipo Peligro: