Identidad

Tipografía

Las tipografías de Poncho son Lora para titulares y Montserrat para cuerpos de texto.


Títulos y encabezados

Una página sólo puede tener un título h1 pero varios encabezados. Siempre debe respetarse el orden (h1 al h5) y no saltearse encabezados.

Título Código

h1. Esto es un título

<h1>Título</h1>

h2. Esto es un título

<h2>Título</h2>

h3. Esto es un título

<h3>Título</h3>

h4. Esto es un título

<h4>Título</h4>
h5. Esto es un título
<h5>Título</h5>

Formatos de texto

Estos son los elementos de texto que pueden encontrarse dentro de un cuerpo de texto (páginas, noticias) y algunos elementos interactivos (tarjetas, tablas).

Formato Código Utilización
Parrafo <p>Parrafo</p> Para texto general
Negrita <strong>Negrita</strong> Resaltar palabras. No parrafos completos.
Cursiva <i>Cursiva</i> Para indicar que una palabra o grupo de palabras tiene un sentido especial que no se corresponde con el del léxico común de la lengua
Small <small>Small</small> Para textos con información complementaria (ej: ayuda en campos de formulario, información legal, etc).

Lead

<p class="lead">Lead</p> Para textos destacados que no son encabezados (ej: bajadas de titulos de páginas).
Citas
<blockquote>Citas</blockquote> Utilizar en un parrafo aparte

Colores de textos

Los textos mayormente usan color negro salvo excepciones de algunos elementos interactivos (indicar estados, mensajes de error). No se deben usar de forma decorativa.

Paleta principal

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil sed natus dignissimos unde in officiis incidunt, architecto vitae! Amet natus laboriosam eos, ducimus, voluptas officiis ipsa perferendis modi sunt qui.

Color Código Utilización
Negro <p>Negro</p> Color de texto por defecto
Gris oscuro <p class="text-gray">Gris oscuro</p> Para links
Gris claro <p class="text-muted">Gris claro</p> Para links
Azul <p class="text-primary">Azul</p> Para links
Verde <p class="text-success">Verde</p> Para links
Rojo <p class="text-danger">Rojo</p> Para links

Divisiones horizontales

Las divisiones se usan para separar grupos de elementos dentro de una página.

  <hr>