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>