Thompson Rivers University
Thompson Rivers University

Typography

Primary Headings

Programs & Courses (H1)

Programs & Courses (H2)

Programs & Courses (H3)

Programs & Courses (H4)

Programs & Courses (H5)
Programs & Courses (H6)
<h1>Programs & Courses (H1)</h1>
<h2>Programs & Courses (H2)</h2>
<h3>Programs & Courses (H3)</h3>
<h4>Programs & Courses (H4)</h4>
<h5>Programs & Courses (H5)</h5>
<h6>Programs & Courses (H6)</h6>

Alternate Headings

Programs & Courses (H1)

Programs & Courses (H2)

Programs & Courses (H3)

Programs & Courses (H4)

Programs & Courses (H5)
Programs & Courses (H6)
<h1 class="altHead">Programs &amp; Courses (H1)</h1>
<h2 class="altHead">Programs &amp; Courses (H2)</h2>
<h3 class="altHead">Programs &amp; Courses (H3)</h3>
<h4 class="altHead">Programs &amp; Courses (H4)</h4>
<h5 class="altHead">Programs &amp; Courses (H5)</h5>
<h6 class="altHead">Programs &amp; Courses (H6)</h6>

Sub Headings

Programs & Courses (H1)

Programs & Courses (H2)

Programs & Courses (H3)

Programs & Courses (H4)

Programs & Courses (H5)
Programs & Courses (H6)
<h1 class="subheader">Programs & Courses (H1)</h1>
<h2 class="subheader">Programs & Courses (H2)</h2>
<h3 class="subheader">Programs & Courses (H3)</h3>
<h4 class="subheader">Programs & Courses (H4)</h4>
<h5 class="subheader">Programs & Courses (H5)</h5>
<h6 class="subheader">Programs & Courses (H6)</h6>

Lead Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum feugiat egestas. Pellentesque eget neque eleifend, consectetur felis nec, condimentum massa.

<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum feugiat egestas. Pellentesque eget neque eleifend, consectetur felis nec, condimentum massa.</p>

Normal Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum feugiat egestas. Pellentesque eget neque eleifend, consectetur felis nec, condimentum massa. Praesent metus ipsum, fermentum quis dignissim nec, ultricies facilisis sem. Duis placerat sapien sed sagittis suscipit. Mauris a turpis eget leo dapibus porttitor. Cras tincidunt eleifend odio, a fringilla mauris faucibus sit amet.

<p>Lorem ipsum dolor...</p>

Paragraph Aligned Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum feugiat egestas. Pellentesque eget neque eleifend, consectetur felis nec, condimentum massa. Praesent metus ipsum, fermentum quis dignissim nec, ultricies facilisis sem. Duis placerat sapien sed sagittis suscipit. Mauris a turpis eget leo dapibus porttitor. Cras tincidunt eleifend odio, a fringilla mauris faucibus sit amet.

<p class="text-left">Lorem ipsum dolor...</p>

Paragraph Aligned Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum feugiat egestas. Pellentesque eget neque eleifend, consectetur felis nec, condimentum massa. Praesent metus ipsum, fermentum quis dignissim nec, ultricies facilisis sem. Duis placerat sapien sed sagittis suscipit. Mauris a turpis eget leo dapibus porttitor. Cras tincidunt eleifend odio, a fringilla mauris faucibus sit amet.

<p class="text-right">Lorem ipsum dolor...</p>

Paragraph Aligned Centre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum feugiat egestas. Pellentesque eget neque eleifend, consectetur felis nec, condimentum massa. Praesent metus ipsum, fermentum quis dignissim nec, ultricies facilisis sem. Duis placerat sapien sed sagittis suscipit. Mauris a turpis eget leo dapibus porttitor. Cras tincidunt eleifend odio, a fringilla mauris faucibus sit amet.

<p class="text-center">Lorem ipsum dolor...</p>

Columns

Please note: Columns will only work on current versions of Firefox, Safari, Chrome and IE (10+). For this reason, we don't recommend using them - yet. If the browser does not support it, your content will revert to a single column.

<ul class="columns-2">
<li><a href="">Faculty of Arts</a></li>
<li><a href="">Faculty of Science</a></li>
<li><a href="">School of Business</a></li>
<li><a href="">School of HSE</a></li>
<li><a href="">Faculty of Law</a></li>
<li><a href="">School of Nursing</a></li>
<li><a href="">Faculty of Tourism</a></li>
<li><a href="">School of Trades &amp; Technology</a></li>
</ul>

Columns work on paragraphs as well, and may be broken into either 2 or 3 columns.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum feugiat egestas. Pellentesque eget neque eleifend, consectetur felis nec, condimentum massa. Praesent metus ipsum, fermentum quis dignissim nec, ultricies facilisis sem. Duis placerat sapien sed sagittis suscipit. Mauris a turpis eget leo dapibus porttitor. Cras tincidunt eleifend odio, a fringilla mauris faucibus sit amet. Suspendisse risus enim, fermentum convallis facilisis sit amet, suscipit at massa. Pellentesque id risus molestie, consequat dui sit amet, viverra ante. Etiam tempor ultricies libero a sodales. Sed lobortis, eros nec aliquam condimentum, est tortor facilisis mauris, ut imperdiet metus nulla at leo.

<p class="columns-3">Lorem ipsum dolor...</p>

Emphasis

emphasis in a paragraph

<p><em>emphasis</em> in a paragraph</p>

Strong

Strong in a paragraph

<p><strong>Strong</strong> in a paragraph</p>

Address

Thompson Rivers University
900 McGill Road
Kamloops, BC, Canada
V2C 0C8
www.tru.ca
<address>
Thompson Rivers University <br/>
900 McGill Road <br/>
Kamloops, BC, Canada <br/>
V2C 0C8 <br/>
<a href="http://www.tru.ca">www.tru.ca</a>
</address>

Blockquote

I do not fear computers. I fear the lack of them. Isaac Asimov

<blockquote>
<p>I do not fear computers. I fear the lack of them.
<cite>Isaac Asimov</cite></p>
</blockquote>

Tooltips

According to web professionals, tooltips appear when you hover over some links.

<p>According to <span data-tooltip aria-haspopup="true" class="has-tip" title="Tooltips are awesome, you should totally use them!">web professionals</span>, tooltips appear when you hover over some links.</p>

Superscript

This text contains superscript text.

<p>This text contains <sup>superscript</sup> text.</p>

Ordered List

  1. Ordered List
  2. Ordered List
  3. Ordered List
    1. Ordered List
    2. Ordered List
    3. Ordered List
  4. Ordered List
  5. Ordered List
  6. Ordered List
<ol>
<li>Ordered List</li>
<li>Ordered List</li>
<li>Ordered List
<ol type="a">
<li>Ordered List</li>
<li>Ordered List</li>
<li>Ordered List</li>
</ol>
</li>
<li>Ordered List</li>
<li>Ordered List</li>
<li>Ordered List</li>
</ol>

Unorderd List

  • Unordered List
  • Unordered List
  • Unordered List
<ul>
<li>Unordered List</li>
<li>Unordered List</li>
<li>Unordered List</li>
</ul>
  • Unordered square
  • Unordered square
  • Unordered square
<ul class="square">
<li>Unordered square</li>
<li>Unordered square</li>
<li>Unordered square</li>
</ul>
  • Unordered circle
  • Unordered circle
  • Unordered circle
<ul class="circle">
<li>Unordered circle</li>
<li>Unordered circle</li>
<li>Unordered circle</li>
</ul>
  • Unordered no-bullet
  • Unordered no-bullet
  • Unordered no-bullet
<ul class="no-bullet">
<li>Unordered no-bullet</li>
<li>Unordered no-bullet</li>
<li>Unordered no-bullet</li>
</ul>