49 #Typography Typography

49.1 #Typography.blockquote Blockquote

Example

An interconnected grid will help deliver the ultimate goal of the Energy Union, to ensure affordable, secure and sustainable energy, and also growth across the EU.

<blockquote>
  <p>An interconnected grid will help deliver the ultimate goal of the
  Energy Union, to ensure affordable, secure and sustainable energy, and also
  growth across the EU.</p>
</blockquote>

49.2 #Typography.headings Headings

Site headings. They also can be applied by adding a class with the name of the heading tag.

Examples
Heading
.h1
Heading 1
Heading h1
.h2
Heading 2
Heading h2
.h3
Heading 3
Heading h3
.h4
Heading 4
Heading h4
.h5
Heading 5
Heading h5
.h6
Heading 6
Heading h6 
<span class="[modifier class]">Heading [modifier class]</span>

49.3 #Typography.link Link

Example
Link element
External link
Smaller text link
<a href="href" class=>Link element</a><br>

<a href="http" class="is-external">External link</a><br>

<a href="#" class="smaller">Smaller text link</a><br>

49.4 #Typography.lists Lists

Example
  • Item 1
  • Item 2
    • Item 1
    • Item 2
    • Item 3
  • Item 3
    1. Item 1
    2. Item 2
    3. Item 3
  • Item 4
  1. Item 1
  2. Item 2
  3. An anchor with an item list
  • Item 1
  • Item 2
  • Item 3
  • Item 4
<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
  <li>Item 3
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ol>
  </li>
  <li>Item 4</li>
</ul>

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    <a href="#"> An anchor with an item list</a>
    <ul>
      <li>Item nested 2nd level</li>
      <li>Item nested 2nd level</li>
      <li>
        <a href="#"> An anchor with an item list</a>
        <ul>
          <li>Item nested 3rd level</li>
          <li>Item nested 3rd level</li>
        </ul>
      </li>
    </ul>
  </li>
</ol>

<ul class="ul-list-inline">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

49.5 #Typography.paragraphs Paragraphs

Examples

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at dictum mi. Donec leo ipsum, dictum quis libero vitae, aliquet fermentum tellus. Curabitur vitae enim commodo diam scelerisque commodo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam euismod metus est, a sollicitudin lacus suscipit et. Nunc dignissim tincidunt urna, eget convallis diam facilisis at.

Ac tincidunt vut nisi placerat mattis turpis, cum lacus. Urna elementum tortor enim montes, dignissim ac dapibus est, aliquet rhoncus non pid sagittis platea ridiculus, integer. Montes turpis, velit montes? Aenean, et in massa magnis adipiscing, natoque enim! Ac, scelerisque. Dignissim? Mauris? Nincidunt amet, lacus enim eros penatibus, cum hac?

.paragraph--intro
Intro

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at dictum mi. Donec leo ipsum, dictum quis libero vitae, aliquet fermentum tellus. Curabitur vitae enim commodo diam scelerisque commodo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam euismod metus est, a sollicitudin lacus suscipit et. Nunc dignissim tincidunt urna, eget convallis diam facilisis at.

Ac tincidunt vut nisi placerat mattis turpis, cum lacus. Urna elementum tortor enim montes, dignissim ac dapibus est, aliquet rhoncus non pid sagittis platea ridiculus, integer. Montes turpis, velit montes? Aenean, et in massa magnis adipiscing, natoque enim! Ac, scelerisque. Dignissim? Mauris? Nincidunt amet, lacus enim eros penatibus, cum hac?

.paragraph--small
Small body text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at dictum mi. Donec leo ipsum, dictum quis libero vitae, aliquet fermentum tellus. Curabitur vitae enim commodo diam scelerisque commodo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam euismod metus est, a sollicitudin lacus suscipit et. Nunc dignissim tincidunt urna, eget convallis diam facilisis at.

Ac tincidunt vut nisi placerat mattis turpis, cum lacus. Urna elementum tortor enim montes, dignissim ac dapibus est, aliquet rhoncus non pid sagittis platea ridiculus, integer. Montes turpis, velit montes? Aenean, et in massa magnis adipiscing, natoque enim! Ac, scelerisque. Dignissim? Mauris? Nincidunt amet, lacus enim eros penatibus, cum hac?

.paragraph--xsmall
Extra small body text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at dictum mi. Donec leo ipsum, dictum quis libero vitae, aliquet fermentum tellus. Curabitur vitae enim commodo diam scelerisque commodo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam euismod metus est, a sollicitudin lacus suscipit et. Nunc dignissim tincidunt urna, eget convallis diam facilisis at.

Ac tincidunt vut nisi placerat mattis turpis, cum lacus. Urna elementum tortor enim montes, dignissim ac dapibus est, aliquet rhoncus non pid sagittis platea ridiculus, integer. Montes turpis, velit montes? Aenean, et in massa magnis adipiscing, natoque enim! Ac, scelerisque. Dignissim? Mauris? Nincidunt amet, lacus enim eros penatibus, cum hac?

.paragraph--strong
Bold font weight

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at dictum mi. Donec leo ipsum, dictum quis libero vitae, aliquet fermentum tellus. Curabitur vitae enim commodo diam scelerisque commodo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam euismod metus est, a sollicitudin lacus suscipit et. Nunc dignissim tincidunt urna, eget convallis diam facilisis at.

Ac tincidunt vut nisi placerat mattis turpis, cum lacus. Urna elementum tortor enim montes, dignissim ac dapibus est, aliquet rhoncus non pid sagittis platea ridiculus, integer. Montes turpis, velit montes? Aenean, et in massa magnis adipiscing, natoque enim! Ac, scelerisque. Dignissim? Mauris? Nincidunt amet, lacus enim eros penatibus, cum hac?

<p class="[modifier class]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at dictum mi. Donec leo ipsum, dictum quis libero vitae, aliquet fermentum tellus. Curabitur vitae enim commodo diam scelerisque commodo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam euismod metus est, a sollicitudin lacus suscipit et. Nunc dignissim tincidunt urna, eget convallis diam facilisis at.</p>
<p class="[modifier class]">Ac tincidunt vut nisi placerat mattis turpis, cum lacus. Urna elementum tortor enim montes, dignissim ac dapibus est, aliquet rhoncus non pid sagittis platea ridiculus, integer. Montes turpis, velit montes? Aenean, et in massa magnis adipiscing, natoque enim! Ac, scelerisque. Dignissim? Mauris? Nincidunt amet, lacus enim eros penatibus, cum hac?</p>