4 Defaults

These are the default base styles applied to HTML elements.

Component classes can override these styles, but if no class applies a style to an HTML element, these styles will be the ones displayed.

4.1 Typography View in a new window

4.1.1 Introduction & display typeface View in a new window

NB International

Twig: base/text/text-display.twig

Example

ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 0123456789.,:;!?’-()*

ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 0123456789.,:;!?’-()*

Markup 
<h1>ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 0123456789.,:;!?’-()*</h1>
<h1><strong>ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 0123456789.,:;!?’-()*</strong></h1>

4.1.2 Body copy typeface View in a new window

NB Akademie Std

Twig: base/text/text-body.twig

Example

ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 0123456789.,:;!?’-()*

Nam eumquas aliqui sitae dolores nonsent enit omnihit qui que nonsectio quis reiur remporem quo ilit fuga cus dolorep eruntisdi numet remquam.

Markup 
<p>ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 0123456789.,:;!?’-()*</p>
<p>Nam eumquas aliqui sitae dolores nonsent enit omnihit qui que nonsectio quis reiur remporem quo ilit fuga cus dolorep eruntisdi numet remquam.</p>

4.1.3 Strong (bold) View in a new window

Bold text using the <strong> tag.

Twig: base/text/text-strong.twig

Example
Bold text
Markup 
<strong>Bold text</strong>

4.1.4 Emphasis (italic) View in a new window

Italic text using the <em> tag.

Twig: base/text/text-em.twig

Example
Italic text
Bold and italic text
Markup 
<em>Italic text</em><br>
<em><strong>Bold</strong> and italic text</em>

4.1.5 Paragraph View in a new window

Text grouped with paragraph tags. font-size/line-height is shown at the start of the first paragraph.

Twig: base/text/text-p.twig

Example

16px/24px Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.

Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Markup 
<p>16px/24px Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p>Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

4.1.6 Headings View in a new window

<h1> through to <h6> tag text and the spacing relationship with paragraphs. font-size/line-height is shown with each heading level.

Twig: base/text/text-h.twig

Example

Heading 1 (h1) 50px/50px

Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna.

Heading 2 (h2) 28px/28px

Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna.

Heading 3 (h3) 22px/24px

Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna.

Heading 4 (h4) 18px/24px

Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna.

Heading 5 (h5) 17px/24px

Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna.

Heading 6 (h6) 16px/24px

Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna.

Markup 
<h1 class="{{ modifier_class }}">Heading 1 (h1) 50px/50px</h1>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>

<h2 class="{{ modifier_class }}">Heading 2 (h2) 28px/28px</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>

<h3 class="{{ modifier_class }}">Heading 3 (h3) 22px/24px</h3>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>

<h4 class="{{ modifier_class }}">Heading 4 (h4) 18px/24px</h4>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>

<h5 class="{{ modifier_class }}">Heading 5 (h5) 17px/24px</h5>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>

<h6 class="{{ modifier_class }}">Heading 6 (h6) 16px/24px</h6>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>

4.1.7 Unordered list View in a new window

The standard approach for a bullet (unordered list) is to use the default <ul> tag as shown below.

Twig: base/text/text-ul.twig

Example
  • Maecenas sed diam eget risus varius blandit sit amet non magna.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Nulla vitae elit libero, a pharetra augue.
  • Nullam id dolor id nibh ultricies vehicula ut id elit.
Markup 
<ul class="{{ modifier_class }}">
  <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li>Nulla vitae elit libero, a pharetra augue.</li>
  <li>Nullam id dolor id nibh ultricies vehicula ut id elit.</li>
</ul>

4.1.8 Ordered list View in a new window

An ordered list.

Twig: base/text/text-ol.twig

Example
  1. Maecenas sed diam eget risus varius blandit sit amet non magna.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  3. Nulla vitae elit libero, a pharetra augue.
  4. Nullam id dolor id nibh ultricies vehicula ut id elit.
Markup 
<ol>
  <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li>Nulla vitae elit libero, a pharetra augue.</li>
  <li>Nullam id dolor id nibh ultricies vehicula ut id elit.</li>
</ol>

4.1.9 Definition list View in a new window

A list of terms and definitions.

Twig: base/text/text-dl.twig

Example
Etiam porta sem
Maecenas sed diam eget risus varius blandit sit amet non magna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer posuere erat a ante
Nulla vitae elit libero, a pharetra augue.
Donec sed odio dui
Nullam id dolor id nibh ultricies vehicula ut id elit.
Markup 
<dl>
  <dt>Etiam porta sem</dt>
  <dd>Maecenas sed diam eget risus varius blandit sit amet non magna.</dd>
  <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
  <dt>Integer posuere erat a ante</dt>
  <dd>Nulla vitae elit libero, a pharetra augue.</dd>
  <dt>Donec sed odio dui</dt>
  <dd>Nullam id dolor id nibh ultricies vehicula ut id elit.</dd>
</dl>

4.1.10 Blockquote View in a new window

A pull quote block.

Twig: base/text/text-blockquote.twig

Example

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Markup 
<blockquote>
  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</blockquote>

4.1.11 Date/Time View in a new window

Follow the formats below for dates and times.

Twig: base/text/text-time.twig

Example




Markup 
<time datetime="2017-05-20">20 May, 2017</time><br>
<time datetime="2017-06-22">22-27 June, 2017</time><br>
<time datetime="2017-06-22">22 June - 12 July, 2017</time><br>
<time datetime="2017-12-22">22 December, 2017 - 5 January, 2018</time><br>

4.1.12 Date/Time View in a new window

Follow the formats below for dates and times.

4.1.13 Tile heading color View in a new window

Follow the formats for tiles heading.

4.2 Links View in a new window

The standard <a> tag and its various states.

Twig: base/link/link.twig

Default example
This is normal text. This text is a link.
The hover style.
This is normal text. This text is a link.
A link that has already been visited.
This is normal text. This text is a link.
A link that has been given keyboard focus.
This is normal text. This text is a link.
A link that is being actively clicked.
This is normal text. This text is a link.
Markup 
This is normal text. <a href="#" class="{{ modifier_class }}">This text is a link</a>.

4.2.1 Block Link with description View in a new window

Example
Application Guidelines for Higher Degree by Research applications PDF, 266.36kB, 10 pages
Markup 
<a href="#" class="link link--block">Application Guidelines for Higher Degree by Research applications</a>
<span class="link__description">PDF, 266.36kB, 10 pages</span>

4.3 Horizontal rule View in a new window

The <hr> tag can be used to easily seperate blocks of text.

Twig: base/hr/hr.twig

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Markup 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<hr>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>

4.4 Table View in a new window

The default table display. See the Advanced table component for more options.

Twig: base/table/table.twig

Example
Number First Name Last Name Username
1 Jane Doe jdoe
2 Jamie Morgan jmorgan
3 Jacob Smith jsmith
Markup 
<table class="{{modifier_class}}">
  <thead>
    <tr>
      <th>Number</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Jane</td>
      <td>Doe</td>
      <td>jdoe</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jamie</td>
      <td>Morgan</td>
      <td>jmorgan</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Jacob</td>
      <td>Smith</td>
      <td>jsmith</td>
    </tr>
  </tbody>
</table>

4.5 Media View in a new window

Images, videos and other embedded media.

4.5.1 Image View in a new window

Responsive images.

Twig: base/media/image.twig

Example
Placeholder
Markup 
<img src="http://placehold.it/1600x900" alt="Placeholder">

4.5.2 Video View in a new window

Responsive videos.

Twig: base/media/video.twig

Example
Markup 
<div class="video">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/en2xEswn45o" frameborder="0" allowfullscreen></iframe>
</div>

4.5.3 Figure View in a new window

A captioned image using the figure and figcaption elements.

Twig: base/media/figure.twig

Example
Group Project. Laura Cook, Man Kin Lam, Benjamin Sawers, Christopher Kelly, Akwasi Agyei, Adam Lidbury, Sarah Stephinson
Markup 
<figure>
  <img src="/themes/uts_theme/src/templates/article-example.jpg">
  <figcaption>Group Project. Laura Cook, Man Kin Lam, Benjamin Sawers, Christopher Kelly, Akwasi Agyei, Adam Lidbury, Sarah Stephinson</figcaption>
</figure>