Class reference

If you are already comfortable using ANU styles, the code snippets below might help trigger your memory for the code patterns and class names. It is meant to be a quick reference only, so please visit the corresponding pages to read full details, including when we recommend you use the classes and examples of what they will look like.

$BodyBanner = '<div id="devlmsg">This is the development version of this site</div>';
 

All id options

devlmsg, acepmsg, testmsg, archivemsg

All class options

  • Text: text-left, text-right, text-center
  • Other: left, right, absmiddle (images only), clear, noclear

Position & weight class options

  • Sides (one of these must be specified): bdr-solid (all sides), bdr-left-solid, bdr-right-solid, bdr-top-solid, bdr-bottom-solid
  • Thickness: bdr-thick

Colour class options

  • Uni: bdr-uni, bdr-uni50, bdr-uni25, bdr-uni10
  • College: bdr-college, bdr-college50, bdr-college25, bdr-college10
  • Grey: bdr-grey, bdr-grey50, bdr-grey25, bdr-grey10
  • Other: bdr-black, bdr-white
<div class="box-header">
  <h2>Box heading</h2>
</div>  
<div class="box-solid">
  <p>First paragraph</p>
</div>
 

Note: Box header is optional.

All class options

  • Header: box-header, box-header-uni, box-header-grey
  • Box: box, box-solid, box-solid-uni, box-solid-grey, box-bdr2, box-bdr2-uni
  • see background colours and borders
<div id="breadcrumb">
   <a href="homepage">Sitename</a> &raquo; <a href="item-a">Menu item a </a> &raquo; Page title
</div>
 

All class options

breadcrumb

Inside a narrow div

<div class="narrow">
  <div class="anu-enq-uni">
    &raquo; <a href="http://www.anu.edu.au/contact/">Enquire now</a>
  </div>
</div>
 

Inside any other grid class div (eg wide)

<div class="wide">
  <div class="anu-enq-uni w-narrow">
    &raquo; <a href="http://www.anu.edu.au/contact/">Enquire now</a>
  </div>
</div>
 

All class options

anu-enq-uni, anu-enq-cass, anu-enq-cap, anu-enq-cbe, anu-enq-cecs, anu-enq-col, anu-enq-cmbe, anu-enq-cpms

<script>$=$anujq;</script>
<script src="//style.anu.edu.au/_anu/4/scripts/collapse.js" type="text/javascript">
</script>

<h2 class="nounderline">
  Undergradate students
</h2>
<div class="anutoggle">
  <p>Content for undergraduate students.</p>
</div>
 

All class options

anutoggle, nounderline (see links)

All class options

Text

text-uni, text-college, text-grey, text-black

Background

  • Uni: bg-uni10, bg-uni25, bg-uni50, bg-uni
  • College: bg-college10, bg-college25, bg-college50, bg-college
  • Grey: bg-grey10, bg-grey25, bg-grey50, bg-grey
  • Other: bg-black, bg-white

College colours for use by central sites

  • Text: text-[college]
  • Borders: bdr-[college]
  • Background: bg-[college]-10, bg-[college]-25, bg-[college]-50, bg-[college]

where [college] is cass, cap, cbe, cecs, col, cmbe or cps

<div class="clear">
  <div class="dateblock">
    <div class="day">15</div>
    <div class="month">Jan</div>    
  </div>
  <div class="datetext">
    <p>Text for block one.</p>
  </div>
</div>
 

All class options

  • Date block: dateblock, dateblock-line, time, day, month, year, datetext
  • Time block: timeblock, timeblock-line, time, timetext
  • Generic block: dateblock, top-label, middle-label, bottom-label, datetext
  • Month calendar: calendar, eventday
  • Other: clear
  • see boxes, alignment, divider lines
<div class="divline-solid doublewide"></div>
 

All class options

  • Solid: divline-solid, divline-solid-uni, divline-solid-college
  • Bold: divline-bold, divline-bold-uni, divline-bold-college
<p class="msg-error">
  This is an error message
</p>
 

All class options

msg-error, msg-warn, msg-info, msg-success

<form class="anuform" action="myscript.php" method="post">
  <fieldset>
    <legend>First fieldset heading</legend>
    <p>
      <label for="requester" class="req">Name</label>
      <input type="text" class="text" id="requester" name="requester" size="32" />
    </p>    
  </fieldset>
  <p class="text-right">        
    <input type="submit" name="submit" value="Submit" />
  </p>
</form>
 

Note: See forms for a more detailed example which uses other class options.

All class options

  • Form: anuform, labelwide, labelfull
  • Fields:text, textinactive, req, instruction
  • Input buttons: btn-uni-grad, btn-black-grad, btn-tiny, btn-small, btn-medium, btn-large, btn-xlarge
<div class="doublewide">
  <p>First paragraph</p>
</div>
 

All class options

  • Grid: narrow, doublenarrow, wide, doublewide
  • Responsive options: show-rsp1, show-rsp2, show-rsp3, show-rsp4, show-rsp, hide-rsp, anu-col-right, anu-right-swap1, anu-right-swap2, anu-right-swap3, anu-left-swap1, anu-left-swap2, anu-left-swap3
<a href="https://itunes.apple.com/...">
  <img src="//style.anu.edu.au/_anu/images/icons/icon-app-store.png" class="icon-app-store" alt="Download on the App Store" />
</a>
 

All class options

  • iTunes App Store: icon-app-store, icon-app-store-small
  • Google Play: icon-android-app, icon-android-app-small, icon-google-play, icon-google-play-small
<img class="w50px" src="200x200.jpg" alt="description">
 

All class options

  • w16px, w32px, w48px, w50px, w64px, w75px, w100px, w120px, w150px, w200px, w320px, w440px

You should only fix the width of images in certain circumstances. See images size for details.

Read more link

<p class="readmore">&raquo; <a href="#">read more</a></p>
 

No underline

<p>This is an example of the <a href="#" class="nounderline">no underline</a> class.</p>
 

Lists of links

<ul class="linklist">
  <li><a href="#">List item 1</a></li>
  <li><a href="#">List item 2</a></li>
  <li><a href="#">List item 3</a></li>
</ul>
 

All class options

  • readmore, nounderline, linklist
  • see text and background colour options
<ul class="extraspace">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
 

All class options

  • Spacing: extraspace, extraspace2
  • Bullets and numbering: nobullet, alpha and roman (<ol> only)
  • Indent: noindent, hangindent
  • Icons: iconlist, horus, isis, wattle, admin, mail, lib, is, dates, timetable, alliance
  • Other: linklist (see links)

iTunes App Store

<a href="https://itunes.apple.com/...">
  <img src="//style.anu.edu.au/_anu/images/icons/icon-app-store.png" class="icon-app-store" alt="Download on the App Store" />
</a>
 

Google Play

<a href="https://play.google.com/...">
  <img src="//style.anu.edu.au/_anu/images/icons/icon-android-app.png" class="icon-android-app" alt="Android app on Google Play" />  
</a>
 
  • iTunes App Store: icon-app-store, icon-app-store-small.png*
  • Google Play: icon-android-app, icon-android-app-small*, icon-google-play, icon-google-play-small*

* Note that for small icons, add '-small' to the end of the image src.

Image

<img src="image.jpg" alt="description of image" class="right marginleft">
 

Grid

<div class="doublenarrow nopadbottom">
 
  • Padding: nopadtop, nopadbottom, nopad, padtop, padbottom, padleft, padright
  • Margins: nomargintop, nomarginbottom, nomargin, margintop, marginbottom, marginleft, marginright
  • Other: squish, extraspace (see lists)
<div class="pagetabs-nav">
  <ul>
    <li><a href="link1">2010</a></li>
    <li><a href="link2" class="pagetabs-select">2009</a></li>
    <li><a href="link3">2008</a></li>
    <li><a href="link4">2007</a></li>
  </ul>
</div>
 

All class options

  • pagetabs-nav, pagetabs-select
<img src="//style.anu.edu.au/_anu/4/images/placeholders/person.png" alt="no photo available" class="w100px" />
 

All class options

  • caption-2line, caption-3line
  • see images for widths class options
<div class="pullquote right">
  <p>Text of the right aligned pull quote.</p>
</div>
 

All class options

RSS icon in menu

<p>
  <a href="#" class="menu-rss">
    <img src="//style.anu.edu.au/_anu/images/share/rss.png" class="w16px right" alt="RSS feed" />
  </a>
  <?php echo $SiteShortName ?>
</p>
 

All class options

See RSS for all RSS icons and instructions on inserting a feed.

Share bar

<div class="anu-share noprint"></div>

or, including Pinterest:

<div class="anu-share noprint"
  data-anu-pinterest="//your-site.anu.edu.au/images/your-image.jpg"></div>
 

Follow icons

<div class="social-icons">
   <a href="https://facebook.com/">
    <img src="//style.anu.edu.au/_anu/images/share/facebook.png" alt="ANU on Facebook"/>
   </a>
</div>
 
<table class="tbl-row-bdr">
   <tr>
     <th>Heading 1</th>
     <th>Heading 2</th>
   </tr>
   <tr>
     <td>Cell 1 contents</td>
     <td>Cell 2 contents</td>
   </tr>
</table>
 

All class options

  • tbl-row-bdr, tbl-col-bdr, tbl-cell-bdr, noborder, tbl-space, fullwidth
  • Uni: tbl-uni, tbl-row-bdr-uni, tbl-col-bdr-uni, tbl-cell-bdr-uni
  • Column widths: tbl10, tbl20, tbl30, tbl40, tbl50, tbl60, tbl70, tbl80, tbl90, tbl100, tbl25, tbl75, tbl33, tbl67
  • Floating/scrolling*: anu-long-area, anu-sticky-header, anu-wide-scroll
  • Background colour options

*Note: For floating headers or sideways scrolling tables, the following JavaScript must be called:

<script src="//style.anu.edu.au/_anu/4/scripts/anu-tables.js" type="text/javascript"></script>
 
<p class="large">
  This will display as large text.
</p>
 

All class options

See the text page for elements such as bold, italics, headings.

Updated:  30 May 2014/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle