Skip to main content

JCU Web Framework

The living style guide for University web applications.

Campus Stack

Campus Stack is a simple component for visually listing the JCU campuses, and is featured in the Brand Manual. Its primary purpose is to feature in the footer of the main website, but can be re-used if necessary.

Contents

Examples

Any of the following examples can be scaled using CSS. For example, to make a small campus stack, you can utilise the built-in .small class attached to the list tag.

Mono

The standard, mono-coloured stack:

<ul class="jcu-campus-stack">
  <li><a href="#">Cairns</a></li>
  <li><a href="#">Singapore</a></li>
  <li><a href="#">Townsville</a></li>
</ul>

Colour

The colour stack:

<ul class="jcu-campus-stack jcu-campus-stack--color">
  <li><a href="#">Cairns</a></li>
  <li><a href="#">Singapore</a></li>
  <li><a href="#">Townsville</a></li>
</ul>

Inverse

The inverted stack, for use on coloured backgrounds:

<ul class="jcu-campus-stack jcu-campus-stack--inverse">
  <li><a href="#">Cairns</a></li>
  <li><a href="#">Singapore</a></li>
  <li><a href="#">Townsville</a></li>
</ul>