Skip to main content

JCU Web Framework

The living style guide for University web applications.

JCU Content

Content is a specific JCU component for the display and representation of the main section of information on a given page. This is typically centric on details that are to be displayed to users, rather than to be interactive.

Contents

Examples

Standard

Define a Content element with .jcu-content and add anything you’d like to into it:

One of the world's leading institutions focusing on the tropics, Australia's James Cook University is surrounded by the spectacular ecosystems of the rainforests of the Wet tropics, the dry savannahs, and the iconic Great Barrier Reef.

Born for the tropics

Ranked in the top four percent of the world's tertiary institutions by the respected Academic Ranking of World Universities produced by the Shanghai Jiao Tong University, James Cook University is dedicated to creating a brighter future for life in the tropics world-wide, through graduates and discoveries that make a difference.

<div class="jcu-content">
  <p class="lead text-primary">
    One of the world's leading institutions focusing on the tropics,
    Australia's James Cook University is surrounded by the spectacular ecosystems of
    the rainforests of the Wet tropics, the dry savannahs, and the iconic <a
    href="#">Great Barrier Reef</a>.
  </p>
  <h2>Born for the tropics</h2>
  <p>
    Ranked in the <a href="https://www.jcu.edu.au/world-rankings">top four
    percent</a> of the world's tertiary institutions by the respected Academic
    Ranking of World Universities produced by the Shanghai Jiao Tong University,
    James Cook University is dedicated to creating a brighter future for life in the
    tropics world-wide, through graduates and discoveries that make a
    difference.
  </p>
</div>

Short Content

If you’re working on a page with a very short amount of content, and displaying an Exposition, you may need the Content component to cover a certain minimum height such that the final page looks correct. To achieve this, add .jcu-content--short-content:

This is just one line of content.

<div class="jcu-content jcu-content--short-content">
  <p>This is just one line of content.</p>
</div>

Printing

Content will automatically add the URL after any links within the content during printing. For any absolute URLs (such as https://jcu.io/web), they will be written to the printed page as is. For any relative URLs (such as /web/framework.html or ../framework.html), they will be written as-is. Root-relative URLs can be prefixed for easier understanding by using CSS code such as this, adjusting the prefix to fit your system:

.jcu-content a[href^="/"]::after {
  content: " (https://www.jcu.edu.au" attr(href) ") ";
}