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 & Courses (H1)</h1>
<h2 class="altHead">Programs & Courses (H2)</h2>
<h3 class="altHead">Programs & Courses (H3)</h3>
<h4 class="altHead">Programs & Courses (H4)</h4>
<h5 class="altHead">Programs & Courses (H5)</h5>
<h6 class="altHead">Programs & 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.
- Faculty of Arts
- Faculty of Science
- School of Business
- School of HSE
- Faculty of Law
- School of Nursing
- Faculty of Tourism
- School of Trades & Technology
<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 & 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
exampleinside
a q element
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 University805 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
- Ordered List
- Ordered List
- Ordered List
- Ordered List
- Ordered List
- Ordered List
- Ordered List
- Ordered List
- 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>
