menu

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.

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Alert bar

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

All id options

devlmsg, acepmsg, testmsg, archivemsg

Alignment

All class options

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

Borders

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

Boxes

<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

Buttons for student enquiries

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-chm, anu-enq-cos

Collapsible sections

<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)

Colours

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, chm or cos

Dates & times

<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

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

Error messages

<p class="msg-error">
  This is an error message
</p>
 

All class options

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

Forms

<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

Grid

<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

Icons

<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

Images

<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

Lists

<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)

Mobile application store icons

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.

Padding & spacing

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)

Page tabs

<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

People placeholder images

<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

Pull quotes

<div class="pullquote right">
  <p>Text of the right aligned pull quote.</p>
</div>
 

All class options

RSS feeds

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.

Social media

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>
 

Tables

<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>
 

Text

<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:  18 August 2017/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle