Skip to main contentSkip Navigation or Skip to Content
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>

2 Column Paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<p class="columns-2">Lorem ipsum dolor sit amet, consectetur...</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>

Inline text-level semantics

The a element example
The abbr element and abbr element with title examples
The b element example
The cite element example
The del element example
The dfn element and dfn element with title examples
The em element example
The i element example
The ins element example
The kbd element example
The mark element example
The q element inside a q element example
The s element example
The samp element example
The small element example
The span element example
The strong element example
The sub element example
The sup element example
The u element example
The var element example

<p class="columns-2">
The <a href="#">a element</a> example <br />
The <abbr>abbr element</abbr> and <abbr title="Title text">abbr element
with title</abbr>examples <br />
The <b>b element</b> example <br />
The <cite>cite element</cite> example <br />
The <del>del element</del> example <br />
The <dfn>dfn element</dfn> and <dfn title="Title text">
dfn element with title</dfn> examples<br />
The <em>em element</em> example <br />
The <i>i element</i> example <br />
The <ins>ins element</ins> example <br />
The <kbd>kbd element</kbd> example <br />
The <mark>mark element</mark> example <br />
The <q>q element <q>inside</q> a q element</q> example <br />
The <s>s element</s> example <br />
The <samp>samp element</samp> example <br />
The <small>small element</small> example <br />
The <span>span element</span> example <br />
The <strong>strong element</strong> example <br />
The <sub>sub element</sub> example <br />
The <sup>sup element</sup> example <br />
The <u>u element</u> example <br />
The <var>var element</var> example
</p>

Address

Thompson Rivers University
805 TRU Way
Kamloops, BC, Canada
V2C 0C8
www.tru.ca
<address>
Thompson Rivers University <br/>
805 TRU Way <br/>
Kamloops, BC, Canada <br/>
V2C 0C8 <br/>
<a href="https://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>

Unordered 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>

Inline Lists

  • Lorem ipsum dolor sit amet
  • Consectetur adipisicing elit
  • Sed do eiusmod tempor incididunt
<ul class="inline-list">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipisicing elit</li>
<li>Sed do eiusmod tempor incididunt</li>
<li>Ut labore et dolore magna aliqua</li>
</ul>

Arrow Lists

  • Lorem ipsum dolor sit amet
  • Consectetur adipisicing elit
  • Sed do eiusmod tempor incididunt
  • Ut labore et dolore magna aliqua
<ul class="arrowlist">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipisicing elit</li>
<li>Sed do eiusmod tempor incididunt</li>
<li>Ut labore et dolore magna aliqua</li>
</ul>

Font weight classes

Use these classes to adjust the font-weight when needed


font-300 OR font-light
font-400 OR font-regular
font-500 OR font-semi-bold
font-600 OR font-bold
font-700 OR font-x-bold
font-800 OR font-xx-bold
font-900 OR font-black
EX. <h2 class="font-900">Title</h2>

Search To Top