Typography

Here's what you need to write and style your documents.

  1. Headings
    1. Anchor titles
  2. Text colors

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

h1. theDocs heading

h2. theDocs heading

h3. theDocs heading

h4. theDocs heading

h5. theDocs heading
h6. theDocs heading

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

Create lighter, secondary text in any heading with a generic <small> tag or the .small class.

h1. theDocs heading Secondary text

h2. theDocs heading Secondary text

h3. theDocs heading Secondary text

h4. theDocs heading Secondary text

h5. theDocs heading Secondary text
h6. theDocs heading Secondary text

<h1>h1. theDocs heading <small>Secondary text</small></h1>
<h2>h2. theDocs heading <small>Secondary text</small></h2>
<h3>h3. theDocs heading <small>Secondary text</small></h3>
<h4>h4. theDocs heading <small>Secondary text</small></h4>
<h5>h5. theDocs heading <small>Secondary text</small></h5>
<h6>h6. theDocs heading <small>Secondary text</small></h6>

Anchor titles

Add an id attribute to a heading, if you want to make the accessible through a link.

h1. theDocs heading

h2. theDocs heading

h3. theDocs heading

h4. theDocs heading

h5. theDocs heading
h6. theDocs heading

<h1 id="sample-heading1">h1. theDocs heading</h1>
<h2 id="sample-heading2">h2. theDocs heading</h2>
<h3 id="sample-heading3">h3. theDocs heading</h3>
<h4 id="sample-heading4">h4. theDocs heading</h4>
<h5 id="sample-heading5">h5. theDocs heading</h5>
<h6 id="sample-heading6">h6. theDocs heading</h6>

Text colors

Use follwoing contextual classes to change color of text.

This is a normal paragraph without any contectual classes.

A paragraph with .text-primary class.

A paragraph with .text-success class.

A paragraph with .text-info class.

A paragraph with .text-warning class.

A paragraph with .text-danger class.

A paragraph with .text-purple class.

A paragraph with .text-teal class.

A paragraph with .text-gray class.

A paragraph with .text-dark class.

A paragraph with .text-white class.


<p>This is a normal paragraph without any contectual classes.</p>
<p class="text-primary">A paragraph with .text-primary class.</p>
<p class="text-success">A paragraph with .text-success class.</p>
<p class="text-info">A paragraph with .text-info class.</p>
<p class="text-warning">A paragraph with .text-warning class.</p>
<p class="text-danger">A paragraph with .text-danger class.</p>
<p class="text-purple">A paragraph with .text-purple class.</p>
<p class="text-teal">A paragraph with .text-teal class.</p>
<p class="text-gray">A paragraph with .text-gray class.</p>
<p class="text-dark">A paragraph with .text-dark class.</p>
<p class="text-white">A paragraph with .text-white class.</p>