Los encabezados, cuerpo de texto, enlaces y otros elementos inline tienen estilos por defecto, que se pueden sobrescribir con sus correspondientes clases.
Se aplican estos estilos por defecto a los encabezados de tipo h1 a h6. Para mayor flexibilidad, también se pueden aplicar unos estilos concretos mediante las clases .h1 a .h6.
De este modo, podemos separar, si queremos, los estilos semánticos de la presentación visual.
<h1 class="h1">Esto es un encabezado h1</h1>
<h2 class="h2">Esto es un encabezado h2</h2>
<h3 class="h3">Esto es un encabezado h3</h3>
<h4 class="h4">Esto es un encabezado h4</h4>
<h5 class="h5">Esto es un encabezado h5</h5>
<h6 class="h6">Esto es un encabezado h6</h6>
Cuando sea necesario un encabezado con el fondo oscuro, usaremos la clase .bg-primary y la clase .inverse
<h1 class="h1 bg-primary inverse">Esto es un encabezado h1</h1>
<hr>
<h2 class="h2 bg-primary inverse">Esto es un encabezado h2</h2>
<hr>
<h3 class="h3 bg-primary inverse">Esto es un encabezado h3</h3>
<hr>
<h4 class="h4 bg-primary inverse">Esto es un encabezado h4</h4>
<hr>
<h5 class="h5 bg-primary inverse">Esto es un encabezado h5</h5>
<hr>
<h6 class="h6 bg-primary inverse">Esto es un encabezado h6</h6>
Cuando sea necesario un encabezado con el fondo de color, usaremos la clase .bg-secondary
<h1 class="h1 bg-secondary">Esto es un encabezado h1</h1>
<hr>
<h2 class="h2 bg-secondary">Esto es un encabezado h2</h2>
<hr>
<h3 class="h3 bg-secondary">Esto es un encabezado h3</h3>
<hr>
<h4 class="h4 bg-secondary">Esto es un encabezado h4</h4>
<hr>
<h5 class="h5 bg-secondary">Esto es un encabezado h5</h5>
<hr>
<h6 class="h6 bg-secondary">Esto es un encabezado h6</h6>
Cuando sea necesario un filete por encima de la cabecera, usaremos las correspondientes clases .ruler halladas en este enlace
<h1 class="h1 ruler ruler--primary">Esto es un encabezado h1</h1>
<h2 class="ruler">Esto es un encabezado h2</h2>
<h3 class="ruler">Esto es un encabezado h3</h3>
<h4 class="ruler">Esto es un encabezado h4</h4>
<h5 class="ruler">Esto es un encabezado h5</h5>
<h6 class="ruler">Esto es un encabezado h6</h6>
Se usará la fuente "UOC Sans"(o Arial si "UOC Sans" no está disponible) como fuente por defecto en el cuerpo del documento. También se pueden derivar desde la clase .body-copy
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum <a href="#">sociis natoque</a>...</p>
Se puede utilizar la clase .font-alternate, la cual aplicará la fuente "UOC Serif" o Georgia si UOC Serif no está disponible. Esta alternativa se podrá usar en el buscador, menú de submarcas y noticias.
Párrafo con fuente serif.
<p class="font-alternate">Párrafo con fuente serif.</p>
El tamaño por defecto del cuerpo de texto es de 20px (1.25rem). Para una mayor flexibilidad, se ofrecen las clases .text-big (30px / 1.875rem), .text-small (17px / 1.0625rem) y .text-extra-small (14px / 0.875rem).
Se puede cambiar el color de un párrafo u otro elemento textual mediante la clase .text-muted, para quitarle énfasis.
Estos elementos permiten crear entradillas con un párrafo destacado añadiendo las clases .text-big y .text-muted a dicho párrafo.
La clase .text-small se puede utilizar para pies de foto o notas.
Texto más grande, para banners, etc.
Texto más pequeño, para pies de foto, notas, etc.
Texto más pequeño, para menú auxiliar del footer, etc.
<p class="text-big text">Texto más grande, para banners, etc.</p>
<p class="text-small">Texto pequeño, para pies de foto, notas, etc.</p>
<p class="text-extra-small">Texto más pequeño, para menú auxiliar del footer, etc.</p>Texto normal sin clase
Texto con clase .muted
<p>Texto normal</p>
<p class="text-muted">Texto con clase .muted</p>
Estilos por defecto de los enlaces.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum enlace en texto largo penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
<a href="#">Enlace por defecto</a>
<p>...<a href="#">Enlace por defecto</a>...</p>
Existen una serie de estilos por defecto para elementos de línea, como negrita, cursiva o tachado.
<strong> o <b>, según si se quiere dar un significado semántico o no. Los estilos de cursiva se pueden usar con las etiquetas <em> o <i>. Los estilos de subrayado se pueden usar con la etiqueta <u>. Los estilos de tachado se pueden usar con la etiqueta <del>. Los estilos de resaltado se pueden usar con la etiqueta <mark>.<a href="#">Estilos por defecto de enlace</a>
<strong>Estilos de negrita</strong>
<em>Estilos de cursiva</em>
<u>Estilos de subrayado</u>
<del>Estilos de tachado</del>