Nuxt Typography

Documentation and examples for Nuxt typography, including global settings, headings, body text, lists, and more.

Headings

All HTML headings, <h1> through <h6>, are available.

Heading	Example
`<h1></h1>`	h1. Bootstrap heading
`<h2></h2>`	h2. Bootstrap heading
`<h3></h3>`	h3. Bootstrap heading
`<h4></h4>`	h4. Bootstrap heading
`<h5></h5>`	h5. Bootstrap heading
`<h6></h6>`	h6. Bootstrap heading

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

.title, for when you want some bolder titles with a different font family.

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

<div>
  <h1 class="title">h1. Bootstrap heading</h1>
  <h2 class="title">h2. Bootstrap heading</h2>
  <h3 class="title">h3. Bootstrap heading</h3>
  <h4 class="title">h4. Bootstrap heading</h4>
  <h5 class="title">h5. Bootstrap heading</h5>
  <h6 class="title">h6. Bootstrap heading</h6>
</div>

Customizing headings

Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.

Fancy display heading With faded secondary text

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Blockquotes

For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote"> around any HTML as the quote.

The supreme art of war is to subdue the enemy without fighting.

<blockquote class="blockquote">
  <p class="mb-0">The supreme art of war is to subdue the enemy without fighting.</p>
</blockquote>

Naming a source

Add a <footer class="blockquote-footer"> for identifying the source. Wrap the name of the source work in <cite>.

The supreme art of war is to subdue the enemy without fighting.

Susan B. Anthony Author

<blockquote class="blockquote">
  <p class="mb-0">The supreme art of war is to subdue the enemy without fighting.</p>
  <footer class="blockquote-footer">Susan B. Anthony <cite title="Source Title">Author</cite></footer>
</blockquote>

Alignment

Use text utilities as needed to change the alignment of your blockquote.

The supreme art of war is to subdue the enemy without fighting.

Susan B. Anthony Author

<blockquote class="blockquote text-center">
  <p class="mb-0">The supreme art of war is to subdue the enemy without fighting.</p>
  <footer class="blockquote-footer">Susan B. Anthony <cite title="Source Title">Author</cite></footer>
</blockquote>


<blockquote class="blockquote text-right">
  <p class="mb-0">The supreme art of war is to subdue the enemy without fighting.</p>
  <footer class="blockquote-footer">Susan B. Anthony <cite title="Source Title">Author</cite></footer>
</blockquote>