Typography

Documentation and examples for Raven Pro-v1.0.0 typography, including global settings, headings, body text, lists, and special typographic element.

Typography on Bootstrap

Font Family

You have three font-family helper classes available to use.

Lato

Nunito Sans

SFMono-Regular

<div class="text-sans-serif">Lato</div>
<div class="text-base">Nunito Sans</div>
<code class="text-monospace">SFMono-Regular</code>

Headings

theme has all the html headings, <h1> through <h6>, styled for you. Also you can use .h1 through .h6 classes when you want to match the font styling of a heading but still want your text to be displayed inline.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Paragraphs

Following text are dummy copy text. Mellentesque cursus placerat hendrerit. Donec sed erat nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae consequat erat. Quisque faucibus felis et fringilla imperdiet. Etiam at porttitor elit, quis convallis massa. Ut id risus sapien.

Your paragraph text goes here.

<p>Your paragraph text goes here.</p>

Lead Paragraph and Drop cap

Make a paragraph stand out by adding .lead and for drop cap, use .dropcap class.

<p class="dropcap lead">Following text are dummy copy text. Mellentesque cursus placerat hendrerit. Donec sed erat nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae consequat erat. Quisque faucibus felis et fringilla imperdiet. Etiam at porttitor elit, quis convallis massa. Ut id risus sapien.</p>

Font Weights

<div class="font-weight-thin">{font-weight: 100 !important;}</div>
<div class="font-weight-extra-light">{font-weight: 200 !important;}</div>
<div class="font-weight-light">{font-weight: 300 !important;}</div>
<div class="font-weight-normal">{font-weight: 400 !important;}</div>
<div class="font-weight-medium">{font-weight: 500 !important;}</div>
<div class="font-weight-semi-bold">{font-weight: 600 !important;}</div>
<div class="font-weight-bold">{font-weight: 700 !important;}</div>
<div class="font-weight-extra-bold">{font-weight: 800 !important;}</div>
<div class="font-weight-black">{font-weight: 900 !important;}</div>

Colors

Use the following colors to change the text color

.text-primary

.text-info

.text-success

.text-warning

.text-danger

.text-black

.text-dark

.text-1000

.text-900

.text-800

.text-700

.text-600

.text-500

.text-400

.text-300

.text-200

.text-light

.text-white

<h5 class="text-primary">.text-primary</h5>
<h5 class="text-info">.text-info</h5>
<h5 class="text-success">.text-success</h5>
<h5 class="text-warning">.text-warning</h5>
<h5 class="text-danger">.text-danger</h5>
<h5 class="text-black">.text-black</h5>
<h5 class="text-dark">.text-dark</h5>
<h5 class="text-1000">.text-1000</h5>
<h5 class="text-900">.text-900</h5>
<h5 class="text-800">.text-800</h5>
<h5 class="text-700">.text-700</h5>
<h5 class="text-600">.text-600</h5>
<h5 class="text-500">.text-500</h5>
<h5 class="text-400">.text-400</h5>
<h5 class="text-300"><span class="bg-black">.text-300</span></h5>
<h5 class="text-200"><span class="bg-dark">.text-200</span></h5>
<h5 class="text-light"><span class="bg-1000">.text-light</span></h5>
<h5 class="text-white"><span class="bg-900">.text-white</span></h5>

Sizes

If you want different sizes of fonts, you may use the following classes.

.fs--2

.fs--1

.fs-0

.fs-1

.fs-2

.fs-4

.fs-5

.fs-6

.fs-7

.fs-8

<h6 class="fs--2">.fs--2</h6>
<h6 class="fs--1">.fs--1</h6>
<h6 class="fs-0">.fs-0</h6>
<h6 class="fs-1">.fs-1</h6>
<h6 class="fs-2">.fs-2</h6>
<h6 class="fs-4">.fs-4</h6>
<h6 class="fs-5">.fs-5</h6>
<h6 class="fs-6">.fs-6</h6>
<h6 class="fs-7">.fs-7</h6>
<h6 class="fs-8">.fs-8</h6>

Left Alignment

<p class="text-left">Following text are dummy copy text. Mellentesque cursus placerat hendrerit. Donec sed erat nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae consequat erat. Quisque faucibus felis et fringilla imperdiet. Etiam at porttitor elit, quis convallis massa. Ut id risus sapien.</p>

Right Alignment

<p class="text-right">Following text are dummy copy text. Mellentesque cursus placerat hendrerit. Donec sed erat nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae consequat erat. Quisque faucibus felis et fringilla imperdiet. Etiam at porttitor elit, quis convallis massa. Ut id risus sapien.</p>

Center Aligned

<p class="text-center">Following text are dummy copy text. Mellentesque cursus placerat hendrerit. Donec sed erat nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae consequat erat. Quisque faucibus felis et fringilla imperdiet. Etiam at porttitor elit, quis convallis massa. Ut id risus sapien.</p>

Justified

<p class="text-justify">Following text are dummy copy text. Mellentesque cursus placerat hendrerit. Donec sed erat nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae consequat erat. Quisque faucibus felis et fringilla imperdiet. Etiam at porttitor elit, quis convallis massa. Ut id risus sapien.</p>

Transformation

Lowercased text

Uppercased text

Capitalized text

<div class="text-lowercase">Lowercased text</div>
<div class="text-uppercase">Uppercased text</div>
<div class="text-capitalize">Capitalized text</div>

Inline styles

Use these tags for inline styling. Feel free to use <b> and <em> tags insted of <strong> and <i> tags.

Highlight text

~~Deleted text~~

Underlined text

Small text

Bold text

Italic text

<p>
  <mark>Highlight text</mark>
</p>
<p>
  <del>Deleted text</del>
</p>
<p>
  <u>Underlined text</u>
</p>
<p>
  <small>Small text</small>
</p>
<p>
  <strong>Bold text</strong>
</p>
<p>
  <i>Italic text</i>
</p>

Blockquotes

Racing is life, everything before or after is just waiting.”

Frank Zappa

<blockquote class="blockquote my-3">
  <p class="fs-2 text-800 font-italic">Racing is life, everything before or after is just waiting.”</p>
  <footer class="blockquote-footer">Frank Zappa</footer>
</blockquote>

Unordered List

A list of items in which the order does not explicitly matter.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
Faucibus porta lacus fringilla vel

<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
</ul>

Ordered List

A list of items in which the order does explicitly matter.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Nulla volutpat aliquam velit
1. Phasellus iaculis neque
2. Purus sodales ultricies
Faucibus porta lacus fringilla vel

<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Nulla volutpat aliquam velit
    <ol>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
    </ol>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
</ol>

Unstyled List

Adding list-unstyled class to ul element will produce the following list style:

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
Faucibus porta lacus fringilla vel

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
</ul>

Checkmarked List

Adding style-check class to ul element will produce the following list style:

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
Faucibus porta lacus fringilla vel

<ul class="style-check">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
</ul>

Get latest news
in your box!

Get Special Offers & Deals. We Never Spam.

Consultancy For the Animal Rights?