All Components


Simple accordion

  • Ferri dictas abhorreant

    Ex causae vocent viderer qui. Ei per semper principes. Epicuri sententiae usu at. Te commodo suscipit definitiones est.

  • Id sit explicari

    Qui impetus tibique maluisset ne, omnes persequeris in vis. Ei his sonet suscipit oportere, harum debitis consequuntur ei vix. Cu semper omnium scaevola eum, mei an ferri honestatis referrentur. Eu vim invidunt dissentiet, ne ludus repudiare necessitatibus vim. Enim errem conceptam mel ex, epicuri scaevola complectitur nam ne.

  • Mea in soleat altera

    Ferri dictas abhorreant eos cu, id doming impetus oporteat vis. Id sea fuisset accusam, no vim graece audiam. Ex causae vocent viderer qui. Ei per semper principes. Epicuri sententiae usu at. Te commodo suscipit definitiones est.

    Per te sale ocurreret sententiae, no eam omnesque argumentum. Mea in soleat altera. Has ad agam fugit. Sumo civibus ius an, no mel vidit feugait. Et lorem decore deterruisset vix, quidam molestiae et vim, eos atomorum persecuti at. Te pro aliquip recusabo senserit, duo utinam hendrerit voluptatibus in, pro stet saperet noluisse id.

  • Qui impetus tibique maluisset ne, omnes

    Ex causae vocent viderer qui. Ei per semper principes. Epicuri sententiae usu at. Te commodo suscipit definitiones est.


Single block open

  • Ferri dictas abhorreant

    Ex causae vocent viderer qui. Ei per semper principes. Epicuri sententiae usu at. Te commodo suscipit definitiones est.

  • Id sit explicari

    Qui impetus tibique maluisset ne, omnes persequeris in vis. Ei his sonet suscipit oportere, harum debitis consequuntur ei vix. Cu semper omnium scaevola eum, mei an ferri honestatis referrentur. Eu vim invidunt dissentiet, ne ludus repudiare necessitatibus vim. Enim errem conceptam mel ex, epicuri scaevola complectitur nam ne.

    • Qui impetus tibique
    • Unordered list, inner
      • Qui impetus tibique
      • maluisset ne, omnes
      • No bullet point, overriden
    • persequeris in vis.
    • Ordered list, inner
      1. Qui impetus tibique
      2. persequeris in vis.
    1. Qui impetus tibique
    2. Ordered list, inner
      1. Qui impetus tibique
      2. Ordered list, inner-inner
        1. No bullet point, overriden
        2. maluisset ne, omnes
        3. persequeris in vis.
      3. Ticked list, inner-inner
        • Qui impetus tibique
        • No bullet point, overriden
        • persequeris in vis.
      4. persequeris in vis.
    3. persequeris in vis.
    4. Unordered list, inner
      • Qui impetus tibique
      • maluisset ne, omnes
      • persequeris in vis.
    5. Ticked list, inner
      • Qui impetus tibique
      • maluisset ne, omnes
      • persequeris in vis.
  • Qui impetus tibique maluisset ne, omnes

    Ex causae vocent viderer qui. Ei per semper principes. Epicuri sententiae usu at. Te commodo suscipit definitiones est.

  • Mea in soleat altera
    1. Headline

      Petierunt uti sibi concilium totius Galliae in diem certam indicere.

    2. Headline

      Cum ceteris in veneratione tui montes, nascetur mus. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Quisque ut dolor gravida, placerat libero vel, euismod. Fabio vel iudice vincam, sunt in culpa qui officia. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.

    3. Headline

      Petierunt uti sibi concilium totius Galliae in diem certam indicere. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.

      • Item
      • Item
      • Item
      • Item
      1. Item
      2. Item


Header without image

Article headline

By Author Name
Occupation of author

photo 1

Header with image

Article headline

By Author Name
Occupation of author


Article footer




Typography guidelines

Large headlines
Only used on the hero. The background image must ensure readibility of the headline.
Roboto Thin
A B C D E F G H I J K L M N O P Q R S T U V W X Y Za b c d e f g h i j k l m n o p q r s t u v w x y z1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( )
Body text
Used for standard copy text.
Roboto Light
A B C D E F G H I J K L M N O P Q R S T U V W X Y Za b c d e f g h i j k l m n o p q r s t u v w x y z1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( )
Special highlighting
Image captions, quoting etc.
Roboto Light Italic
A B C D E F G H I J K L M N O P Q R S T U V W X Y Za b c d e f g h i j k l m n o p q r s t u v w x y z1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( )
General headlines
Font used for all standard headlines within a text.
Roboto Regular
A B C D E F G H I J K L M N O P Q R S T U V W X Y Za b c d e f g h i j k l m n o p q r s t u v w x y z1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( )
Article headlines
Only used as the headline for a single article.
Roboto Bold
A B C D E F G H I J K L M N O P Q R S T U V W X Y Za b c d e f g h i j k l m n o p q r s t u v w x y z1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( )

Ordered list standard

  1. Ordered list items
  2. Ordered list items
  3. Ordered list items

Ordered list lowercase alpha

  1. Ordered list items
  2. Ordered list items
  3. Ordered list items

Ordered list lowercase roman numerals

  1. Ordered list items
  2. Ordered list items
  3. Ordered list items

Ordered list steps

  1. Headline

    Petierunt uti sibi concilium totius Galliae in diem certam indicere.

  2. Headline

    Cum ceteris in veneratione tui montes, nascetur mus. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Quisque ut dolor gravida, placerat libero vel, euismod. Fabio vel iudice vincam, sunt in culpa qui officia. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.

  3. Headline

    Petierunt uti sibi concilium totius Galliae in diem certam indicere. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.

    • Item
      1. This is a nested list
      2. with two items.
    • Item
    • Item
    • Item
    1. Item
      1. This is a nested list
      2. with two items.
    2. Item
  4. Headline

    Petierunt uti sibi concilium totius Galliae in diem certam indicere. Quisque ut dolor gravida, placerat libero vel, euismod. Fabio vel iudice vincam, sunt in culpa qui officia. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus. Cum ceteris in veneratione tui montes, nascetur mus.

  5. Headline

    Fabio vel iudice vincam, sunt in culpa qui officia. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.

  6. Headline

    Quisque ut dolor gravida, placerat libero vel, euismod. Fabio vel iudice vincam, sunt in culpa qui officia. Cum ceteris in veneratione tui montes, nascetur mus. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.

  7. Headline

    Petierunt uti sibi concilium totius Galliae in diem certam indicere. Quisque ut dolor gravida, placerat libero vel, euismod. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.

  8. Headline

    Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus. Cum ceteris in veneratione tui montes, nascetur mus. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Quisque ut dolor gravida, placerat libero vel, euismod. Fabio vel iudice vincam, sunt in culpa qui officia.

  9. Headline

    Cum ceteris in veneratione tui montes, nascetur mus. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Quisque ut dolor gravida, placerat libero vel, euismod. Fabio vel iudice vincam, sunt in culpa qui officia. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.

  10. Headline

    Quisque ut dolor gravida, placerat libero vel, euismod. Fabio vel iudice vincam, sunt in culpa qui officia. Cum ceteris in veneratione tui montes, nascetur mus. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.

Ordered list nested

  1. Petierunt uti sibi concilium totius Galliae in diem certam indicere.
  2. Cum ceteris in veneratione tui montes, nascetur mus.
  3. Fabio vel iudice vincam, sunt in culpa qui officia. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.
  4. Petierunt uti sibi concilium totius Galliae in diem certam indicere.
  5. Quisque ut dolor gravida, placerat libero vel, euismod.
  6. Quisque ut dolor gravida, placerat libero vel, euismod.
    1. Fabio vel iudice vincam, sunt in culpa qui officia.
    2. Cum ceteris in veneratione tui montes, nascetur mus.
    3. Petierunt uti sibi concilium totius Galliae in diem certam indicere.
    4. Fabio vel iudice vincam, sunt in culpa qui officia.
      1. Petierunt uti sibi concilium totius Galliae in diem certam indicere.
      2. Quisque ut dolor gravida, placerat libero vel, euismod.
      3. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.
      4. Sed haec quis possit intrepidus aestimare tellus.
  7. Petierunt uti sibi concilium totius Galliae in diem certam indicere.
  8. Quisque ut dolor gravida, placerat libero vel, euismod.
  9. Fabio vel iudice vincam, sunt in culpa qui officia. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.
  10. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.
    1. Quisque ut dolor gravida, placerat libero vel, euismod.
    2. Fabio vel iudice vincam, sunt in culpa qui officia.
    3. Fabio vel iudice vincam, sunt in culpa qui officia.
      1. Petierunt uti sibi concilium totius Galliae in diem certam indicere.
      2. Quisque ut dolor gravida, placerat libero vel, euismod.
      3. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.
      4. Sed haec quis possit intrepidus aestimare tellus.
    4. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.
      1. Petierunt uti sibi concilium totius Galliae in diem certam indicere.
      2. Quisque ut dolor gravida, placerat libero vel, euismod.
      3. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.
      4. Sed haec quis possit intrepidus aestimare tellus.

Ordered list bracket

  1. By section 18(3) of the Melbourne University Act 1958 power is conferred on the University to make and alter statutes for the affiliation to or connection with the University of any commercial, cultural, educational, sporting or other institution or body if–
    1. the affiliated institution would assist in attaining any of the objects of the University; and
    2. the governing body of the institution, organisation or body has consented to the affiliation.
  2. The Howard Florey Laboratories of Experimental Physiology were commissioned in 1963 for the purpose of the study within the University of integrative physiology by long term experiments.
  3. The Howard Florey Institute of Experimental Physiology and Medicine ("the Institute") was incorporated by the Howard Florey Institute of Experimental Physiology and Medicine Act 1971 ("the Institute Act") for the objects of that Act.
  4. Each candidate may provide for publication an electoral statement of not more than 200 words.
  5. The returning officer may edit a candidate's electoral statement before its publication, for length or to correct spelling and grammar.
  6. A candidate may withdraw his or her nomination by writing to the returning officer, no later than three days before the start of the voting period.
  7. Where the number of nominations is the same as the number of vacancies, the returning officer must declare the candidates elected.
  8. Where the number of candidates exceeds the number of vacancies, the returning officer must give notice of and conduct a ballot.
  9. The Howard Florey Laboratories of Experimental Physiology were commissioned in 1963 for the purpose of the study within the University of integrative physiology by long term experiments.
  10. The Howard Florey Institute of Experimental Physiology and Medicine ("the Institute") was incorporated by the Howard Florey Institute of Experimental Physiology and Medicine Act 1971 ("the Institute Act") for the objects of that Act.

Default bullet points

  • Unordered list items
  • Unordered list items
  • Unordered list items

Complex lists

  • Qui impetus tibique
  • Unordered list, inner
    • Qui impetus tibique
    • maluisset ne, omnes
    • persequeris in vis.
  • persequeris in vis.
  • Ordered list, inner
    1. Qui impetus tibique
    2. No bullet point, overriden
  1. Qui impetus tibique
  2. Ordered list, inner
    1. Qui impetus tibique
    2. Ordered list, inner-inner
      1. Qui impetus tibique
      2. maluisset ne, omnes
      3. persequeris in vis.
    3. Ordered list, inner-inner, type="a"
      1. Qui impetus tibique
      2. maluisset ne, omnes
      3. persequeris in vis.
      4. Ordered list, inner-inner-inner, type="i"
        1. Qui impetus tibique
        2. maluisset ne, omnes
        3. Ordered list, inner-inner-inner-inner, type="a"
          1. Qui impetus tibique
          2. maluisset ne, omnes
          3. persequeris in vis.
      5. Ordered list, inner-inner-inner, type="1"
        1. Qui impetus tibique
        2. maluisset ne, omnes
        3. persequeris in vis.
    4. Ordered list, inner-inner, type="i"
      1. Qui impetus tibique
      2. No bullet point, overriden
      3. persequeris in vis.
    5. Unordered list, inner-inner
      • No bullet point, overriden
      • maluisset ne, omnes
      • persequeris in vis.
    6. persequeris in vis.
  3. persequeris in vis.
  4. Unordered list, inner
    • Qui impetus tibique
    • maluisset ne, omnes
    • persequeris in vis.

Ticked list

  • Item
  • Another item
    • A nested list
    • reverts to the standard bullet style
  • This one is not ticked at all, via assigned class

Typography styles

Simple typographic styles

Below are some basic typographic styles with their associated renderings

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>A paragraph of text</p>
<p><strong>Bold </strong>, <em>italic</em>and <u>underlined</u> text</p>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

A paragraph of text

Bold , italic and underlined text


Colour palette

#000000
#333333
#666666
#ADB8C1
#E0E0E0
#F2F5F8
#F6F6F6
#FFFFFF
#0C304A
#304E64
#004576
#366996
#82A1BD
#006FDC
#E1EAF5
#FFFBCC
#008a00
#DF0620



Block listing

Inside the basic news, event, and exhibition tiles, images should be provided as background images on an empty element with class block-listing__img, and have a ratio of 16/9 (56.25%). If you don't have a choice but to use img tags, make sure to wrap them inside containers with class crop-height in order to approximate the background-image behaviour.

If a tile doesn't have a link (i.e. if block-container is a div rather than an anchor), use class no-anim to remove the hover effect.



Default buttons

<a class="button">Call to action</a>
<a class="button brand">Brand</a>
<a class="button cta">Complete</a>
<a class="button warning">Warning</a>
<a class="button soft">Soft</a>

<a class="button-small">Call to action</a>
<a class="button-small brand">Brand</a>
<a class="button-small cta">Complete</a>
<a class="button-small warning">Warning</a>
<a class="button-small soft">Soft</a>

<a class="button-small with-arrow">Call to action</a>
<a class="button-small with-arrow brand">Brand</a>
<a class="button-small with-arrow cta">Complete</a>
<a class="button-small with-arrow warning">Warning</a>
<a class="button-small with-arrow soft">Soft</a>

Note: Form inputs with type submit and button have a default style of button cta.


Disabled buttons

To disable a button implemented with an anchor element, use class disabled and attributes aria-disabled="true" and tabindex="-1". To disable a button implemented with a button or input element, simply use the disabled attribute.

Disabled anchor button


Hero

Hero Button
Inverse Button

Back button

Use a small, soft button with the with-arrow-left class.

Back to homepage



Basic checklist


Unlock checklist

Continue



Video embeds

The figure component comes with a variant class specifically for embeds: figure--embed.

YouTube embed with caption and default 16:9 ratio
21:9 ratio with class embed--21_9
Vimeo embed

If the use of a figure element doesn't convey the right semantics, and assuming a caption is not required, you may use a simple div as demonstrated below:

figure--embed is actually just an alias for the following three classes combined: figure--max figure--spaced figure--wide. When it comes to video embeds, only figure--max is required, so if you don't want the embed to be wider than the text, for instance, use figure--max figure--spaced:

This embed is as wide as the text.

Video embeds can be used inside inset figures and half layouts. (This latter configuration doesn't support captions, but a simple alternative is to describe the video in the text opposite.)

Inset YouTube video with caption

Cras pretium et elit id bibendum. Duis dapibus condimentum justo, aliquet porta justo vehicula quis. Pellentesque vulputate mattis lacus quis elementum. Vivamus vitae lobortis orci. Praesent interdum et elit non dignissim. Morbi sit amet nibh vitae tortor ullamcorper consequat sed non leo. Nam massa est, egestas ac felis id, blandit luctus metus. Mauris eu aliquet nisi. Donec nunc ipsum, fermentum quis enim posuere, dapibus fermentum libero. Aliquam erat volutpat. Nulla tempor tellus lorem, dapibus euismod mi mattis sit amet. Sed ac orci consequat, aliquet ligula vitae, facilisis elit. Sed et lobortis est, eu facilisis massa.

With figure--confined to remove offset

Cras pretium et elit id bibendum. Duis dapibus condimentum justo, aliquet porta justo vehicula quis. Pellentesque vulputate mattis lacus quis elementum. Vivamus vitae lobortis orci. Praesent interdum et elit non dignissim. Morbi sit amet nibh vitae tortor ullamcorper consequat sed non leo. Nam massa est, egestas ac felis id, blandit luctus metus. Mauris eu aliquet nisi. Donec nunc ipsum, fermentum quis enim posuere, dapibus fermentum libero. Aliquam erat volutpat. Nulla tempor tellus lorem, dapibus euismod mi mattis sit amet. Sed ac orci consequat, aliquet ligula vitae, facilisis elit. Sed et lobortis est, eu facilisis massa.

Cibo democritum

Ius sonet equidem no, aperiri interpretaris pri ne, eu eirmod graecis his. Sed ne dicunt efficiendi, ad laudem soluta omittam per. Est velit scaevola forensibus ne, diam scripta in est. Cibo democritum quaerendum et duo, nostrum dignissim qui te. Impetus rationibus quaerendum


Soundcloud embeds

SoundCloud provides two embed options, classic and visual, which are shown below. Note that class figure--embed is not used for visual embeds.

SoundCloud "classic" embed
Inset SoundCloud "visual" embed with long caption

Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Donec pretium, leo tempor adipiscing posuere, risus ligula ornare erat, vitae euismod lectus nulla ac arcu. Morbi sed pharetra risus, nec auctor lorem. Phasellus neque quam, auctor ut tincidunt et, suscipit quis nibh. Praesent sed malesuada eros, eu volutpat tortor. Proin pharetra nisl sed eros ultrices, vitae condimentum felis tempor. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Donec pretium, leo tempor adipiscing posuere, risus ligula ornare erat, vitae euismod lectus nulla ac arcu. Morbi sed pharetra risus, nec auctor lorem. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis.



Enquiry

Have a question? Enquire now

The information on this form is being collected by the University of Melbourne for further communication regarding various courses, programs and events at the University in which you have expressed interest. Information collected will only be used by authorised staff for the purpose for which it was collected and will be protected against unauthorized access and use. You can access any personal information the University holds about you. Contact the Privacy Officer to find out more. The University’s Privacy Policy is available online.

International: +61 3 9035 5511

Enquiry dark

Questions or feedback? Send an enquiry

The information on this form is being collected by the University of Melbourne for further communication regarding various courses, programs and events at the University in which you have expressed interest. Information collected will only be used by authorised staff for the purpose for which it was collected and will be protected against unauthorized access and use. You can access any personal information the University holds about you. Contact the Privacy Officer to find out more. The University’s Privacy Policy is available online.

or call +61 3 8344 0777


Event listing


Event listing with presenters


Event listing with ribbon


Multi date event page

My Event's Title

Photo of my event

780 Elizabeth Street
Melbourne VIC 3000

Map

T: +61 3 9035 9400

mcd-web@unimelb.edu.au

Wheelchair accessible

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nam vestibulum porttitor ipsum tincidunt semper. Suspendisse id euismod orci, quis egestas nulla. Donec sit amet auctor justo. Nam a turpis ac diam fringilla ullamcorper ac quis quam. Duis ultricies eget diam laoreet molestie. Donec accumsan est nibh, eu pretium ante volutpat vitae. Nam vitae arcu eget tellus sollicitudin vehicula. Ut lectus elit, semper ac feugiat sed, sagittis eget magna. In condimentum purus et libero fringilla, nec tincidunt libero suscipit. Nam fermentum velit et orci gravida, a hendrerit elit fermentum.

Nulla interdum magna a euismod laoreet. Pellentesque convallis posuere placerat. Nam tristique, elit quis vehicula ullamcorper, tellus lacus rutrum lacus, vel pretium lectus elit non urna. Nulla consectetur facilisis enim, in ultricies dui facilisis vel. Etiam vestibulum nec mi nec tempus. Ut luctus ex vitae imperdiet lobortis. Vestibulum placerat mi turpis, quis laoreet urna varius id. Curabitur id sagittis justo.


Single date event page mixed markup

Create the main events listing page

Booked out
Photo of my event

780 Elizabeth Street
Melbourne VIC 3000 Map

More Information

Donna Kevey

dkevey@unimelb.edu.au

T: +61 3 8344 1693

About this template and how to use it

This template Event block listing (local assets) is available if you wish to create local calendar events for your site. 

If you wish to promote your event to a wider audience you should post on events.unimelb.edu.au and use the feed as described on the events.unimelb examples.

This event listing is using an upcoming events list  and is set to show: 

  • 360 events in the future
  • Maximum of 20 events
  1. Add a new standard page to your site
  2. From the metadata screen select the page template: Event block listing (local assets). 
  3. Fields that can be used are: 
    • Header text
    • Header subline
    • Banner image
    • Introductory text
  4. Create single calendar events under this asset and they will automatically be listed on this page.

Adding calendar events

When adding local calendar events they should be: 

  • Single Calendar Events (recurring calendar events needs some further work)
  • Type 2 (don't show in menu)
  • Asset status needs to be Live to be included on the event listing page
  • Only future upcoming events show

Optional settings:

  • Thumbnail image (set on details screen)
  • Contact details (set on metadata screen)
  • Location details  (set on metadata screen)


Single date event page with presenters

My Event's Title

Photo of my event

780 Elizabeth Street
Melbourne VIC 3000

Map

T: +61 3 9035 9400

extremely-long-hyphened-email.mcd-web@unimelb.edu.au

Wheelchair accessible

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nam vestibulum porttitor ipsum tincidunt semper. Suspendisse id euismod orci, quis egestas nulla. Donec sit amet auctor justo. Nam a turpis ac diam fringilla ullamcorper ac quis quam. Duis ultricies eget diam laoreet molestie. Donec accumsan est nibh, eu pretium ante volutpat vitae. Nam vitae arcu eget tellus sollicitudin vehicula. Ut lectus elit, semper ac feugiat sed, sagittis eget magna. In condimentum purus et libero fringilla, nec tincidunt libero suscipit. Nam fermentum velit et orci gravida, a hendrerit elit fermentum.

Nulla interdum magna a euismod laoreet. Pellentesque convallis posuere placerat. Nam tristique, elit quis vehicula ullamcorper, tellus lacus rutrum lacus, vel pretium lectus elit non urna. Nulla consectetur facilisis enim, in ultricies dui facilisis vel. Etiam vestibulum nec mi nec tempus. Ut luctus ex vitae imperdiet lobortis. Vestibulum placerat mi turpis, quis laoreet urna varius id. Curabitur id sagittis justo.



Default figure

By default, figures appear in the flow of the page. In most cases, you'll want to use a figure element along with a figcaption, but this is completely optional as the semantics of these elements may not be appropriate in all contexts. Check out the Advanced examples section for more information.

If the figure contains an image, don't forget to give the img element an alt text. This is especially important if the figure doesn't have a caption or if the caption doesn't describe the image sufficently. Note that the alt text must not be the same as the caption.

Note that, according to the HTML5 specification, figure cannot be used inside p, h1, h2, etc. and figcaption must be the first or last direct child of figure (last in our case).

cute kitten
Figure with small image and caption

Cras pretium et elit id bibendum. Duis dapibus condimentum justo, aliquet porta justo vehicula quis. Pellentesque vulputate mattis lacus quis elementum. Vivamus vitae lobortis orci. Praesent interdum et elit non dignissim. Morbi sit amet nibh vitae tortor ullamcorper.

fluffy kitten
Figure with large image and caption

Cras pretium et elit id bibendum. Duis dapibus condimentum justo, aliquet porta justo vehicula quis. Pellentesque vulputate mattis lacus quis elementum. Vivamus vitae lobortis orci. Praesent interdum et elit non dignissim. Morbi sit amet nibh vitae tortor ullamcorper.

cute kitten
More space above and below with class figure--spaced

Cras pretium et elit id bibendum. Duis dapibus condimentum justo, aliquet porta justo vehicula quis. Pellentesque vulputate mattis lacus quis elementum. Vivamus vitae lobortis orci. Praesent interdum et elit non dignissim. Morbi sit amet nibh vitae tortor ullamcorper.

cute kitten
Wider than text with class figure--wide

Inset figure

For inset figures to be layed out properly, they must be used inside a container with a maximum width of 700px (43.75rem)—typically <div class="with-figure">. Add class clearfix to that container if you don't want the figures to overflow into the content that follows. Note that inset figures are neither self-cleared nor restricted in height.

cute kitten
Figure inset to the left

Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Donec pretium, leo tempor adipiscing posuere, risus ligula ornare erat, vitae euismod lectus nulla ac arcu. Morbi sed pharetra risus, nec auctor lorem. Phasellus neque quam, auctor ut tincidunt et, suscipit quis nibh. Praesent sed malesuada eros, eu volutpat tortor. Proin pharetra nisl sed eros ultrices, vitae condimentum felis tempor.

fluffy kitten
Tall figure inset to the right

Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Donec pretium, leo tempor adipiscing posuere, risus ligula ornare erat, vitae euismod lectus nulla ac arcu. Morbi sed pharetra risus, nec auctor lorem. Phasellus neque quam, auctor ut tincidunt et, suscipit quis nibh. Praesent sed malesuada eros, eu volutpat tortor. Proin pharetra nisl sed eros ultrices, vitae condimentum felis tempor nulla ac arcu.

cute kitten
With narrow image

Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Donec pretium, leo tempor adipiscing posuere, risus ligula ornare erat, vitae euismod lectus nulla ac arcu. Morbi sed pharetra risus, nec auctor lorem. Phasellus neque quam, auctor ut tincidunt et, suscipit quis nibh. Praesent sed malesuada eros, eu volutpat tortor.

fluffy kitten
With narrow image and very, very, very long caption

Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Donec pretium, leo tempor adipiscing posuere, risus ligula ornare erat, vitae euismod lectus nulla ac arcu. Morbi sed pharetra risus, nec auctor lorem. Phasellus neque quam, auctor ut tincidunt et, suscipit quis nibh. Praesent sed malesuada eros, eu volutpat tortor. Proin pharetra nisl sed eros ultrices, vitae condimentum felis tempor. Eu volutpat tortor. Morbi sed pharetra risus proin pharetra nisl sed eros ultrices, nunc vel condimentum mi vitae condimentum felis tempor lectus nulla ac arcu.


Confined inset figure

By default, as demonstrated in the previous section, inset figures are offset to the left or right of the text by various amounts based on the available screen space and the presence of the in-page navigation. You can disable this behaviour and keep a figure aligned with the text at all times with class figure--confined. This is useful inside modals, for instance.

cute kitten
With figure--confined

Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan.

cute kitten
With figure--confined and a very long caption

Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Maecenas pulvinar velit magna.


Other content types

The use of the figure component is not limited to images. Some examples are shown below. Check out the embed component for examples involving third-party embeds, like YouTube videos

Note that figures with SVG elements are buggy in IE. No workaround is in place at this time.

Figure with video element
Preference Offer made
1 Yes
2 No
3 Yes
Figure with table element
Disc
Figure with responsive svg element

Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at.

Figure with audio element

Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros.

Disc
Inset figure with non-responsive svg element

Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Nullam iaculis orci quis ipsum accumsan pharetra.

Preference Offer made
1 Yes
2 No
3 Yes
Inset table with figure--max

Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Nunc vel condimentum mi. Nullam gravida nec ante mattis accumsan. Nunc vel condimentum mi.

Inset figure with video

Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Donec pretium, leo tempor adipiscing posuere, risus ligula ornare erat, vitae euismod lectus nulla ac arcu. Morbi sed pharetra risus, nec auctor lorem. Phasellus neque quam, auctor ut tincidunt et, suscipit quis nibh. Praesent sed malesuada eros, eu volutpat tortor. Proin pharetra nisl sed eros ultrices, vitae condimentum felis tempor.


Min vs max

In the examples above, you may have noticed the presence of two variant classes: figure--min and figure--max. Their role is to control the sizing behaviour of each figure. You must always use one or the other.

figure--min: Let the figure shrink to fit its content

Typically for images and non-responsive SVG elements. The previous section also shows an example with an audio player. The class notably deals with the case where an inset figure's content is narrower than its caption (cf. figure below).

figure--max: Let the figure expand to its maximum width

Typically for embeds, videos, responsive SVG elements, tables, etc.

cute kitten
Without class figure--min, the figure expands to fit its caption

Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Donec pretium, leo tempor adipiscing posuere, risus ligula ornare erat, vitae euismod lectus nulla ac arcu. Morbi sed pharetra risus, nec auctor lorem. Phasellus neque quam, auctor ut tincidunt et, suscipit quis nibh. Praesent sed malesuada eros, eu volutpat tortor. Proin pharetra nisl sed eros ultrices, vitae condimentum felis tempor. Proin pharetra nisl sed eros ultrices, vitae condimentum felis tempor.


Advanced examples

The figure component is designed to be versatile: the caption is in no way mandatory, and the figure element can be replaced with a simple div. This section demonstrates these two aspects for both default and inset figures, and for various content types.

cute kitten
fluffy kitten
cute kitten

Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan.

fluffy kitten

Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi.

Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris.

Disc

Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Aenean at sapien ultrices.





Filters

Filter by type

Listing



Different Section

Ex mei noluisse percipit, ea unum ludus invenire pri. Ei duo aliquid eleifend, errem qualisque at pro. Qui et elit delicatissimi, periculis elaboraret referrentur eam id, graece tractatos ut est. Aperiri delenit sed ei, pro simul principes





Text field


Checkbox and radio buttons

Select preferred option (required):
Make a selection (implicitly required):

Select


Search field


Form error



Required fields example




Inline form


Unstyled controls

Unstyled radio and checkbox controls are now available by adding class="unstyled-controls" to the form (1st example below), or class="unstyled" selectively on each input (2nd example below). The unstyled class is only available for radio and checkbox controls!

class="unstyled-controls" on form
class="unstyled" on first control

Disabled fields



The gallery component is useful to display a set of large photos. For each photo, you must provide the following information:

  • the URL of the full-size version (in the href attribute of the anchor element),
  • the dimensions of the full-size version (in the data-size attribute of the anchor element),
  • the URL of the thumbnail version (in the src attribute of the image element),
  • a caption and/or text alternative (figcaption element or alt attribute).

Note: Captions and text alternatives have different purposes, make sure you use them the right way.


Small and medium


Captions

You may, and should provide a caption for every image with the figcaption element.

  • By default, the caption is shown only in the viewer (cf. first image below).
  • To show it in the gallery as well, use class image-gallery__caption (cf. second image).
  • If you need to show a different caption in the gallery than in the viewer, leave the figcaption as is and add a paragraph before it with class image-gallery__caption (cf. third image).

Note: Captions in the gallery should be concise and consistent—either provide one for every image, or don't provide any at all.




Default header

In congue definiebas


Default header subline

In congue definiebas

Pro id alienum epicurei, nam ne legimus vivendum lobortis



Image header mid align

In congue definiebas

Pro id alienum epicurei, nam ne legimus vivendum lobortis


Image header mid align enhanced

In congue definiebas

Pro id alienum epicurei, nam ne legimus vivendum lobortis


Image header bottom align

In congue definiebas

Pro id alienum epicurei, nam ne legimus vivendum lobortis


Image header bottom align flat

In congue definiebas

Pro id alienum epicurei, nam ne legimus vivendum lobortis


Image header with filters

Non equidem invideo, miror magis posuere velit aliquet. Morbi fringilla convallis sapien, id pulvinar odio volutpat. Non equidem invideo, miror magis posuere velit aliquet. Praeterea iter est quasdam res quas ex communi.

Filter by type


Simple header banner



Header with box

In congue definiebas

In congue definiebas quo. Vivendo officiis vix an, eos at fabulas constituam dissentiunt. Id sit iuvaret habemus splendide, mei ea dicta quaestio. No malis eruditi maiorum vim, cu duo atqui dolorum imperdiet.

Pro id alienum epicurei, nam ne legimus vivendum lobortis. Docendi dissentiunt duo ad, eu vix nonumy legere. Ut vis iusto quidam virtute, harum convenire at his, option tacimates ea est. Ius et nisl nemore praesent. Sit ut meis porro velit, his cu malorum voluptatum sadipscing, tation atomorum dissentiet ne mea.


Course header short

Idque Caesaris facere voluntate

Cum ceteris in veneratione tui montes, nascetur mus.


Course header banner


Article header bottom align

Praeterea iter est quasdam res quas ex communi.

At nos hinc posthac, sitientis piros Afros. Quisque ut dolor gravida, placerat libero vel, euismod.


Article header mid align

Praeterea iter est quasdam res quas ex communi.

At nos hinc posthac, ut dolor gravida, placerat libero vel, euismod.

By Hinc Posthac
Placerat libero Vel at The University of Melbourne



Heading styles

Heading 1

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6



Labels

Before we get started, please note that all icons must come with a label in order to supplement the graphic with a clear definition of what it represents. Labels also act as fallbacks on devices and browsers that do not support SVG (esp. IE8). What an icon represents by itself can be a very subjective experience!


Usage

Create a div or span element and set its data-icon attribute to the name of the icon you wish to use. The text within the element is used as the icon's label and appears centred underneath it.

<div data-icon="maps">Map</div>
<span data-icon="trash">Trash</span>

At load time, an svg element referencing the desired icon will be injected into the element (cf. Custom Icons section for more details).

By default, the icon inherits the currentColor value of its parent element and is constrained to 60px × 60px. Three CSS helper classes are available to adjust the icon's size:

  • small – 30px × 30px
  • large – 100px × 100px
  • fill 100% of container width and height (cf. Fill container section)

Examples

Small
Default
Large

Icon list

add
bar
bike
bus
cafe
campaign
car
cart
chat
check
check-circle
city
clock
close
computer
cutlery
delete
devices
download
edit
ellipsis
face
facebook
faculty
flight
group
home
hr
instagram
jobs
library
linkedin
location
lock
mail
map
menu
money
pharmacy
phone
print
profile
rss
search
select
send
share
smartphone
student
tag
train
twitter
vimeo
walk
world
youtube
zoom-in
zoom-out

Linked


Hidden label

In some situations, having a label centred underneath the icon just doesn't work.

  • If the icon's label would only duplicate the textual content around the icon, you may remove the label entirely. For instance: Download the report (PDF 180KB)
  • If the context in which the icon is used is enough for a sighted user to fully understand what the icon represents, you may use class icon--hide-label to hide the label visually (i.e. but not from screen reader). Ideally, you should confirm that the removal of the label has no impact on usability by conducting some form of user testing. For an example, take a look at the social share icons in the sidebar of the News single component.

Fill container

The following icon fills its container thanks to class fill. It also doesn't have a label, since it would only duplicate the heading right below it. Inline styles used for effect, please do not do this on a production site!

Pharmacy


Buttons

When using an icon inside a button, the button's mandatory label replaces the icon's label; therefore, the latter can be omited. You should never use an icon on its own if you are not able to prove via user testing that is has no impact on usability.


Custom icons

Icons contribute significantly to the weight of the design system, and therefore of every website that uses it. This is the reason why the number of icons available is relatively small, and why we chose to add icons for a very limited number of social networks and services only (e.g. Facebook, LinkedIn, etc.)

With this in mind, if you still believe that an icon is worth adding to the design system, let us know. For consistency reasons, we will only consider icons taken from this community-contributed set of Material Design icons.

If you absolutely need an icon, and none of the ones included in the design system suits your needs, follow the steps below:

  1. Pick an icon from the Material Design set.
  2. In the icon's lightbox, select View SVG and copy the code in the first text area.
  3. Paste the code on your page (anywhere inside the body element), and change it as follows:
    • Remove the style attribute from the svg tag.
    • Add the following attributes to the svg tag: class="hidden" xmlns="http://www.w3.org/2000/svg".
    • Wrap the whole content of the svg element with a symbol element.
    • Move the viewBox attribute from the svg element to the symbol element.
    • Give the symbol element an ID of the form icon-*name*, where *name* is the name of the icon (ensure that it doesn't conflict with any other icon in the design system).
    • For each path element, remove the fill attribute unless its value is none.
  4. Use the icon like you normally would (cf. Usage section).

Here is an example with the security icon:

<!-- Original SVG code -->
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
  <path fill="#000000" d="M12,12H19C18.47,16.11 15.72,19.78 12,20.92V12H5V6.3L12,3.19M12,1L3,5V11C3,16.55 6.84,21.73 12,23C17.16,21.73 21,16.55 21,11V5L12,1Z" />
</svg>

<!-- Modified code -->
<svg class="hidden" xmlns="http://www.w3.org/2000/svg">
  <symbol id="icon-security" viewBox="0 0 24 24">
    <path d="M12,12H19C18.47,16.11 15.72,19.78 12,20.92V12H5V6.3L12,3.19M12,1L3,5V11C3,16.55 6.84,21.73 12,23C17.16,21.73 21,16.55 21,11V5L12,1Z" />
  </symbol>
</svg>

<!-- Example use of the icon -->
<span class="small" data-icon="security"></span>


Index navigation

A-Z indices can be done via a simple class change:

<div class="indexnav"></div>

As you can't have both navigations in one document, you'll find an example of an index navigation in the example layouts.


Smooth scroll

The smooth scroll function used by the in-page navigation, smoothScrollTo, can be invoked independently in your own project:

var el = document.querySelector('#block'); // where #block is an element with id="block"
window.uom.smoothScrollTo(el);

Every internal link on a page (with href="#...") is automatically enhanced with a smooth-scroll behaviour.

Try it out!

smoothScrollTo accepts an optional callback function as second argument. This callback is invoked as soon as the scrolling animation ends. It is generally a good idea to avoid performing other actions, like loading a script or manipulating the DOM, while a scrolling animation is in progress. Doing so could deteriorate the smoothness of the animation.

window.uom.smoothScrollTo(el, doSomething);

function doSomething() {
  // Do something as soon as the scrolling ends - e.g. give focus to the element, load more content, etc.
}


Simple listing

  • Three variants are available to control the layout: simple-listing--four, simple-listing--three, simple-listing--two. You must always specify a variant.
  • Provide images via inline styles with background-image: url(...);. The ideal dimensions depend on the variant used (cf. examples below). All images should have a ratio of 16/10 (62.5%) or they will be cropped.
  • The heading elements inside the items can be marked with h2, h3 or h4 depending on the context in which the listing is used. The examples below demonstrate all three cases for testing purposes. If adapting the heading level to the context is too complex, a good default is generally h3.

Simple text listing

Simple listings can be turned into text-only listings with class simple-listing--text. A fourth layout variant, simple-listing--one, can then be used to display the items in a single column (and with a larger font size for the excerpts). Note that text-only listings with 2 and 3 columns are narrower than their image counterparts.


Hero listing





Logo listing

For specific dimension images that you want to keep unmodified (no cropping), eg. in sponsor logo grids. The markup will allow labels and links if required.



Loader

Loading...

Loader white

Loading...


Basic example


Height width and zoom


Grayscale


Pins

You can add multiple pins to the map by separating their coordinates with pipes (|) inside the data-pin attribute.


Geocode


All options


Openstreetmap



Default modal

Test the modal

Or a normal text link


Offset positioning

Open a different modal


Inset within modal

Academic Research Group
Associate Professor Jane Academic Rockets


News listing


News listing tabbed


News listing dense


News single

Environmental scientist Tim Flannery joins University of Melbourne

One of Australia’s most highly regarded environmental scientists, Professor Tim Flannery, will join the Melbourne Sustainable Society Institute as a Professorial Fellow.

Professor Flannery said he was delighted to join the University in this role where he could further contribute to research and engagement on issues of sustainability and climate change.

“Climate change is one of the greatest challenges facing human beings on the planet. I’m pleased to take up the appointment to continue to push frontiers and move forward in dealing with climate change,” said Professor Flannery.

“The research I am planning to undertake at the Melbourne Sustainable Society Institute will focus on what is needed to renew and replenish the Earth’s ecosystem,” he said.

Professor Brendan Gleeson, Director of the Melbourne Sustainable Society Institute, said Professor Flannery’s appointment was an outstanding addition to the University community.

This is a 700px-wide image with a caption.
Professor Flannery’s scientific and policy work on sustainability is world class. He is an invaluable source of clear ideas on how we can change direction before it’s too late. We are incredibly pleased to have him on board

Professor Flannery was named Australian of the Year in 2007 for his work on population levels and carbon emissions and was also Chairman of the Copenhagen Climate Council, an international climate change awareness group. He was the Chief Commissioner of the Climate Commission before it was dismantled in 2013 and subsequently launched the Climate Council to ensure the continued provision of independent information on the science of climate change to the Australian public.

The Melbourne Sustainable Society Institute is dedicated to supporting research, projects and conversations about sustainability, as well as investigating the human and environmental challenges created by climate change.


News single with image

University of Melbourne announces new Asian Exchange scholarship

The University of Melbourne has partnered with the Westpac Bicentennial Foundation and the University of Sydney in the launch of the inaugural Asian Exchange scholarship.

Valued at $10,000 the Asian Exchange scholarship offers second year students enrolled full-time in an undergraduate degree the opportunity to study for one semester at a leading Asian university.

Exchanges will be available with the following University of Melbourne partner universities:

  • Beijing: Tsinghua University and Peking University
  • Hong Kong: University of Hong Kong and Chinese University of Hong Kong
  • Shanghai: Fudan University and Shanghai Jiao Tong University
  • Singapore: National University of Singapore and Nanyang Technological University

Professor Susan Elliott, Deputy Vice-Chancellor International at the University of Melbourne said the scholarship provides a fantastic opportunity for University of Melbourne students to engage with Asia, to grow in their cultural knowledge of this exciting region and to develop future connections.

"We are delighted to be a partner with Westpac on this wonderful initiative,” she said.

The Asian Exchange scholarship is one of three scholarships established by the Westpac Bicentennial Foundation in partnership with the University of Melbourne.

Students who receive a scholarship will be able to ‘build their own adventure’ and individualise their Asian exchange to include experiences such as an intensive language course, an internship or volunteering.

The rise of Asia presents a unique opportunity for Australia.

  • 60% of the world’s population lives in Asia.
  • By 2025, four of the 10 largest economies in the world will be in Asia.
  • Asian economies are expected to account for almost 50% of global economic output by 2025.
  • Middle class consumers in Asia will increase by 2.5 billion and account for 60% of total global middle class consumption by 2030[1].

With the rapid growth in economic power and influence in our region, Australia is well placed to contribute to, and benefit from, the growth opportunities right on our doorstep. A greater understanding of Asian culture, markets and languages will be vital to build stronger business and cultural connections across the region. The Asian Exchange scholarships will help underpin these efforts by supporting ambitious students keen to contribute to Australia’s success in Asia.

Westpac Bicentennial Foundation CEO Susan Bannigan said, “We will need future leaders with deep connections across Asia. These scholarships offer a great springboard for young people to start building those connections now. We hope to inspire students to immerse themselves in this really exciting and dynamic growth area.”

“We’re delighted to partner with Westpac to offer students an opportunity to become truly global citizens. We are now well and truly in the midst of the Asian Century, and we’re proud to join Westpac to help students become some of the nation’s most Asia-literate graduates. The hands-on experiences offered by the Asian Exchange scholarships will be invaluable for our promising students as they become tomorrow’s leaders,” said Dr Michael Spence, Vice-Chancellor of The University of Sydney.

Scholarship applications are now open at The University of Melbourne and the University of Sydney.


News single with video

Laws restricting use of the burqa are "ridiculous"

Public Policy Fellow Nicholas Reece thinks it is "absolutely ridiculous" to make laws telling people what they should and should not wear.

Mr Reece thinks the debate is divisive and he has seen no evidence that the burqa is a security risk in Australia.

Nicholas Reece is a Public Policy Fellow at the Centre for Public Policy at the University of Melbourne. He was speaking on Sky News.



Examples

Well done! You successfully read this important notice.

Heads up! This notice needs your attention, but it's not super important.

Warning! Better check yourself, you’re not looking too good.

Danger! Change a few things up and try submitting again.

  1. Notices are modelled on application “flash” or “toast” messages, so should only be used for a quick, focused alert
  2. You’re pulling the user’s attention to this message, so don’t abuse it by making them read too much!

Flash messages

Flash messages are notices that are placed at the top of the page, just below the header. They span the whole width of the page (except when the in-page navigation is used) and are useful, for instance, for displaying the result of a form submission (when Ajax is not available). Like notices, flash messages come in four variants, but their markup is slightly different (see example below):

  • flash--success
  • flash--info
  • flash--warning
  • flash--danger

On some layouts, the alignment of the flash message's content on wide screen is not optimal. Two classes are available to deal with this situation: flash--center to centre the content, and flash--keep-left to keep the content against the logo on a headerless page.

The code of the flash message must be placed inside <div role="main"> and come anywhere after the header or <div class="headerless"></div> element. If the message meets these conditions but is located further down the page, it is moved to the right location automatically. If multiple messages are found, only the first one is moved. The current page demonstrates the use of an informative flash message, as well as the behaviour of the flash--center class:

Success! This is an example of a flash message.

Success! This is an example of a centred flash message.



Two boxes

Two boxes soft


Three boxes


Four boxes



Xhtml compliant markup


Background image

Title


Soft


Soft background image

Title


Buttons



Staff listing

Paul Tagell, Philosopher University of Melbourne
Neil Ang, Juggling Professional University of Melbourne
Jason Smith, Coffee Drinker University of Melbourne
Andi Weis, Can eat a lot University of Melbourne
Anne Shea, Chef University of Melbourne
Carl Jackson, Crepe Expert University of Melbourne

Staff listing min


Staff listing detailed

Images should be square dimensions (ie. equal width and height).


Profile header min

  • Person Name

    Short blurb about this person. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.


Profile header

If the profile photo fails to load, a fallback avatar is shown.

Chaz Batrouney

Web Producer

Project Services



Search header


Search results

Recommended

  1. Faculty of Science

    We offer a range of undergraduate, graduate and research higher degree courses that prepare students for a successful career.

    science.unimelb.edu.au/

All results

  1. Accelerated Mathematics

    The Bachelor of Science (Extended) is a four-year degree that provides a pathway for Indigenous students to embark on careers that build on a strong science ...

    coursesearch.unimelb.edu.au/.../1948-bachelor-of-science-extended

  2. Breadth Requirements for the Bachelor of Science : Breadth...

    Secure result Bachelor of Science students complete a breadth component of 50 points (four subjects), with another 25 points (two subjects) of free (that is, breadth or core) ...

    breadth.unimelb.edu.au/breadth/info/Science.html

  3. Tsinghua University

    School of Social and Political Sciences | Political Science

    Political science explores the main issues, ideas, institutions and actors that dominate local, national and international politics. It focuses on how people engage ...

    ssps.unimelb.edu.au/study-areas/political-science

  4. Map of Parville campus

    Parkville Campus : Maps

    Maps. Maps Parkville. Parkville Campus. ... Gates. Burnley; Creswick; Dookie; Shepparton; Southbank; Werribee. Maps. More maps and information are available. ...

    maps.unimelb.edu.au/parkville

    More results from maps.unimelb.edu.au

  5. History and Philosophy of Science

    Year:
    2017
    Type:
    Breadth track

    History and Philosophy of Science (HPS) is a unique discipline in the Faculty of Arts, which brings together perspectives from the history of science and medicine ...

    shaps.unimelb.edu.au/history-philosophy-science

  6. Bachelor of Science Extended

    The Bachelor of Science (Extended) is a four-year degree that provides a pathway for Indigenous students to embark on careers that build on a strong science ...

    coursesearch.unimelb.edu.au/.../1948-bachelor-of-science-extended


Pagination

Results 1 - 5 of about 809



Tables

Preference Offer made
1 Yes
2 No
3 Yes
4 Yes
5 No

Sortable table

Preference Text Offer made Unit Code Retail Price
1 50 Yes ARTS_11 $29.99
2 300 No ARTS_3 $9.99
4 7 Yes ARTS_100 $39.99
3 6 Yes ARTS_2 $109.99

Complex sample table 1

Day/Date Activity
January
Monday 6 January to Sunday 2 March Summer Term (8 weeks)
Wednesday 22 January Academic Advice Day 1
Monday 27 January University holiday for Australia Day
Friday 31 January Council Planning Day
February
Wednesday 12 February to Friday 14 February Conference of Deans and Heads of Departments
Thursday 20 February Academic Advice Day 2
Tuesday 25 February to Friday 28 February Week O: Orientation for all students
March
Monday 3 March to Sunday 1 June Semester 1 (12 teaching weeks)
Monday 10 March Labour Day (not a University Holiday)
April
Good Friday 18 April to Sunday 27 April Easter Non Teaching Period & UA (previously AVCC) Common Week
Friday 25 April Anzac Day – University Holiday

Complex sample table 2

Course name Duration (EFTSL) CRICOS code 2015 International course fee ($AUD/EFTSL) 2015 Estimated fee year 1 ($AUD) Indicative total course fee ($AUD) Notes for commencing international students
Graduate/Postgraduate Certificates
Graduate Certificate in Arts 0.5 031944F $27,360 $13,680 $13,680
Postgraduate Certificate in Arts 0.5 031945E $29,344 $14,672 $14,672
Postgraduate Certificate in Professional Ethics 0.5 044107C $29,344 $14,672 $14,672
Graduate/Postgraduate Diplomas
Graduate Diploma in Arts 1 023190K $27,360 $27,360 $27,360
Postgraduate Diploma in Arts 1 023185G $29,344 $29,344 $29,344
Postgraduate Diploma in Arts (Cultural Material Conservation) 1 023185G $29,344 $29,344 $29,344
Postgraduate Diploma in Arts (Editing and Communications) 1 023185G $29,344 $29,344 $29,344
Postgraduate Diploma in Arts (Media and Communication) 1 045363A $29,344 $29,344 $29,344
Postgraduate Diploma in Arts and Cultural Management 1 075125M $30,880 td $30,880 $30,880
Postgraduate Diploma in Islamic Studies 1 064483B $29,344 $29,344 $29,344
Postgraduate Diploma in Professional Ethics 1 044108B $29,344 $29,344 $29,344
Masters by coursework
Executive Master of Arts (200 points) 2 068099M $29,632 $29,632 $60,768 Wcag-duration indicated is maximum course wcag-duration. May be completed in less EFTSL depending upon academic background and/or relevant work experience.
Master of Applied Linguistics 2 077928D tbc Fees for 2015 to be confirmed.
Master of Art Curatorship 2 027565G $29,344 $29,344 $60,160 Wcag-duration indicated is maximum course wcag-duration. May be completed in less EFTSL depending upon academic background and/or relevant work experience.
Master of Arts and Cultural Management 2 073305A $30,880 $30,880 $63,328 Wcag-duration indicated is maximum course wcag-duration. May be completed in less EFTSL depending upon academic background and/or relevant work experience.
Master of Arts in Professional and Applied Ethics 2 058722J $29,344 $29,344 $60,160
Master of Creative Writing, Publishing and Editing 2 058718E $29,344 $29,344 $60,160 Wcag-duration indicated is maximum course wcag-duration. May be completed in less EFTSL depending upon academic background and/or relevant work experience.
Master of Criminology 2 055074E tbc Fees for 2015 to be confirmed.
Master of Cultural Material Conservation 2 061638A $29,344 $29,344 $60,160 Wcag-duration indicated is maximum course wcag-duration. May be completed in less EFTSL depending upon academic background and/or relevant work experience.
Master of Global Media Communication 2 045345C $29,344 $29,344 $60,160 Wcag-duration indicated is maximum course wcag-duration. May be completed in less EFTSL depending upon academic background and/or relevant work experience.
Master of Journalism 2 075464C $29,632 $29,632 $60,768
Master of Marketing Communication 1.5 TBC $30,016 $30,016 $45,775
2 TBC $30,016 $30,016 $61,534
Master of Publishing and Communications 2 061634E $29,344 $29,344 $60,160 Wcag-duration indicated is maximum course wcag-duration. May be completed in less EFTSL depending upon academic background and/or relevant work experience.
Master of Social Policy 2 049598E tbc Fees for 2015 to be confirmed.
Master of Translation 1.5 TBC $29,344 $29,344 $44,750
2 TBC $29,344 $29,344 $60,155
Graduate research courses
Doctor of Philosophy (Arts) 4 056954J $29,344 $29,344 $126,560 Maximum course wcag-duration shown. Total indicative fee based on maximum wcag-duration. May be completed in 3-4 EFTSL.
Master of Arts (Advanced Seminars and Shorter Thesis) 2 014779M $29,344 $29,344 $60,160 Maximum course wcag-duration shown. Total indicative fee based on maximum wcag-duration. May be completed in 1.5-2 EFTSL.
Master of Arts (all current streams) 2 007306C $29,344 $29,344 $60,160 Maximum course wcag-duration shown. Total indicative fee based on maximum wcag-duration. May be completed in 1.5-2 EFTSL.

Complex sample table 3

Type of Accommodation No. of Weeks Weekly Rent / Board Range ($) Estimated Total ($) Rent or Board and other expenses
Sharing Rented Premises (with 2 others) Close to Parkville campus 52 190 - 230 22,000 - 28,800
Within 6 kilometres of Uni 252 155 -185 20,000 - 26,300
Rural area 52 80 - 100 15,600 - 20,700
Student Apartments Two bedroom, shared 52 215 - 260 23,400 - 30,500
One bedroom not shared 52 305 - 370 28,500 - 36,700
Hostel One bedroom - shared bathroom/kitchen 52 185 - 225 22,100 - 28,200
Residential Colleges (near or on campus) 35 week stay 35 552 - 712* 27,600 - 36,600
44 week stay 44 552 - 712* 34,072 - 45,017
Homestay Living with a local family 40 240 - 290* 16,000 - 20,700


Full width navigation tabs


Sidebar tabs are another form of navigational tabs for use with the sidebar layout. For practical examples, have a look at the search layout (view source) and course layout (view source).

If the sidebar is on the right-hand side of the page, use class sidebar-tabs--right to bring the tabs against the left edge of the sidebar.

By default, sidebar tabs are designed to scroll the page up to a full-width tabs component (above). If one does not exist on the page, it will scroll to itself. You can set a different scroll target with the data-scroll-target attribute like in the example below.

Warning: The sidebar layout should only be used as the main layout, and not in the middle of a page as in the example below.


In page tabs

Duis placerat mattis tristique. Ut feugiat non nulla nec pellentesque. Fusce consequat volutpat ligula, non consequat leo. Vivamus pharetra sed nulla ut fermentum. Nam non urna nisl. Donec et orci massa. Proin congue quam mauris, lobortis posuere erat facilisis vitae. Nunc erat nibh, auctor sit amet rutrum vel, pretium vitae mauris. Cras eu odio lectus. Sed luctus eros quis tortor dignissim tincidunt. Nulla elit mauris, rutrum nec massa non, ultricies mattis sapien.

Sed ante purus, sagittis non tortor vel, vestibulum rutrum purus. Morbi at tempor lorem, malesuada egestas leo. Praesent semper viverra est a lacinia. Donec sit amet condimentum dui. Sed elementum ligula erat, in volutpat velit elementum ut. Aliquam condimentum erat eget elit imperdiet, in pretium magna iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam vitae aliquet nibh. Ut turpis sem, interdum in risus at, eleifend elementum enim. Donec ut mi ac dolor eleifend tempus. Sed convallis quam ipsum, non interdum lectus blandit ut. Sed at neque sit amet lectus venenatis tincidunt vel non nisl. Vivamus sodales ultrices diam, sed convallis nisi tincidunt a. Morbi mollis tristique diam quis rutrum. Aliquam mauris est, molestie at magna at, luctus mattis nunc.

photo 1
Caption to the image (photo 1)

Cras pretium et elit id bibendum. Duis dapibus condimentum justo, aliquet porta justo vehicula quis. Pellentesque vulputate mattis lacus quis elementum. Vivamus vitae lobortis orci. Praesent interdum et elit non dignissim. Morbi sit amet nibh vitae tortor ullamcorper consequat sed non leo. Nam massa est, egestas ac felis id, blandit luctus metus. Mauris eu aliquet nisi. Donec nunc ipsum, fermentum quis enim posuere, dapibus fermentum libero. Aliquam erat volutpat. Nulla tempor tellus lorem, dapibus euismod mi mattis sit amet. Sed ac orci consequat, aliquet ligula vitae, facilisis elit. Sed et lobortis est, eu facilisis massa.



Body text

Lorem ipsum dolor sit amet, appareat insolens quo cu. Ex mei fugit elitr, pri maiestatis elaboraret dissentias at. At quas sententiae constituam qui, ex fugit mediocrem persecuti duo. Odio impedit no his, legere quidam ne has, nam quando exerci eu. Vitae vivendo apeirian id vis.

Ius sonet equidem no, aperiri interpretaris pri ne, eu eirmod graecis his. Sed ne dicunt efficiendi, ad laudem soluta omittam per. Est velit scaevola forensibus ne, diam scripta in est. Cibo democritum quaerendum et duo, nostrum dignissim qui te. Impetus rationibus quaerendum eu usu, at consul diceret adipisci quo, eam ei animal recusabo assueverit.


Lead

A variant with class lead left exists for use in header-less layouts.

Lorem ipsum dolor sit amet, appareat insolens quo cu. Ex mei fugit elitr, pri maiestatis elaboraret dissentias at. At quas sententiae constituam qui, ex fugit mediocrem persecuti duo. Odio impedit no his, legere quidam ne has, nam quando exerci eu. Vitae vivendo apeirian id vis.


Blockquote

The history of the race, and each individual's experience, are thick with evidence that a truth is not hard to kill and that a lie told well is immortal.Samuel Clemens
The history of the race, and each individual's experience, are thick with evidence that a truth is not hard to kill and that a lie told well is immortal.Samuel Clemens

Vivamus vitae lobortis orci. Praesent interdum et elit non dignissim. Morbi sit amet nibh vitae tortor ullamcorper consequat sed non leo. Nam massa est, egestas ac felis id, blandit luctus metus. Mauris eu aliquet nisi.

Cras pretium et elit id bibendum. Duis dapibus condimentum justo, aliquet porta justo vehicula quis. Pellentesque vulputate mattis lacus quis elementum. Vivamus vitae lobortis orci. Praesent interdum et elit non dignissim. Morbi sit amet nibh vitae tortor ullamcorper consequat sed non leo. Nam massa est, egestas ac felis id, blandit luctus metus. Mauris eu aliquet nisi. Donec nunc ipsum, fermentum quis enim posuere, dapibus fermentum libero. Aliquam erat volutpat. Nulla tempor tellus lorem, dapibus euismod mi mattis sit amet. Sed ac orci consequat, aliquet ligula vitae, facilisis elit. Sed et lobortis est, eu facilisis massa.

Vivamus vitae lobortis orci. Praesent interdum et elit non dignissim. Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris.

Every superfluous page we create is one more dead end for an angry, frustrated, confused userTom Loosemore (@tomskitomski) September 6, 2011
Every superfluous page we create is one more dead end for an angry, frustrated, confused userTom Loosemore (@tomskitomski) September 6, 2011

Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Donec pretium, leo tempor adipiscing posuere, risus ligula ornare erat, vitae euismod lectus nulla ac arcu. Morbi sed pharetra risus, nec auctor lorem. Phasellus neque quam, auctor ut tincidunt et, suscipit quis nibh. Praesent sed malesuada eros, eu volutpat tortor. Proin pharetra nisl sed eros ultrices, vitae condimentum felis tempor.

The production was not only entertaining, but had tremendous pedagogical potential.
The production was not only entertaining, but had tremendous pedagogical potential.

Cras pretium et elit id bibendum. Duis dapibus condimentum justo, aliquet porta justo vehicula quis. Pellentesque vulputate mattis lacus quis elementum. Vivamus vitae lobortis orci. Praesent interdum et elit non dignissim. Morbi sit amet nibh vitae tortor ullamcorper consequat sed non leo. Nam massa est, egestas ac felis id, blandit luctus metus. Mauris eu aliquet nisi. Donec nunc ipsum, fermentum quis enim posuere, dapibus fermentum libero. Aliquam erat volutpat. Nulla tempor tellus lorem, dapibus euismod mi mattis sit amet. Sed ac orci consequat, aliquet ligula vitae, facilisis elit. Sed et lobortis est, eu facilisis massa.

Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Donec pretium, leo tempor adipiscing posuere, risus ligula ornare erat, vitae euismod lectus nulla ac arcu. Morbi sed pharetra risus, nec auctor lorem. Phasellus neque quam, auctor ut tincidunt et, suscipit quis nibh. Praesent sed malesuada eros, eu volutpat tortor. Proin pharetra nisl sed eros ultrices, vitae condimentum felis tempor.


Citation

In-text citation

As discussed in Good Housekeeping (1995) ...

Reference list

  • The Good Housekeeping illustrated book of child care: From newborn to preteen. (1995). New York, NY: Hearst Books.
  • Snooks and Co. (rev.) 2002, Style manual for authors, editors and printers, 6th edn, John Wiley & Sons Australia, Ltd., Milton, Qld.

The Good Housekeeping illustrated book of child care: From newborn to preteen. (1995). New York, NY: Hearst Books.


Section full width with background image

Vel veniam tempor definiebas at. No modus albucius vis, ad duis fabellas per. Et vim viris habemus referrentur, in mei liber scaevola. Ponderum referrentur consectetuer sea eu, illud temporibus vim ei. Cu has assum consectetuer, omittam scriptorem est te. At mel verear verterem reformidans, ei sonet quodsi eripuit mei, per utinam vituperata an.


Two columns

kitten

Cibo democritum

Ius sonet equidem no, aperiri interpretaris pri ne, eu eirmod graecis his. Sed ne dicunt efficiendi, ad laudem soluta omittam per. Est velit scaevola forensibus ne, diam scripta in est. Cibo democritum quaerendum et duo, nostrum dignissim qui te. Impetus rationibus quaerendum

Cibo democritum

Ius sonet equidem no, aperiri interpretaris pri ne, eu eirmod graecis his. Sed ne dicunt efficiendi, ad laudem soluta omittam per. Est velit scaevola forensibus ne, diam scripta in est. Cibo democritum quaerendum et duo, nostrum dignissim qui te. Impetus rationibus quaerendum

kitten

Code

<pre>
  <html>
      <head>
          <title>Hello World</title>
      </head>
      <body>
          <p>Lorem ipsum dolor sit amet, appareat insolens quo cu</p>
      </body>
  </html>
</pre>

Contact box

Address
Building 142, The University of Melbourne
VIC 3010
Email
info@unimelb.edu.au
Phone
+61 3 9035 5511
Opening Hours
Weekdays: 9am—6pm

Highlight box

Annual leave
20 days
Sick leave
15 days
Long service leave (after 10 years of continuous service with the University)
13 weeks

Emergency box

Phone
+61 3 9035 5511
Email
info@unimelb.edu.au
Hours
24 hours, 365 days per year


Timeline

Monday24 November 2014
9.00am

VTAC Change of Preference period opens

Monday15 December 2014
7.00am

VCE results and ATARs available online

Wednesday17 December 2014
10.00am–2.30pm

University of Melbourne Course Information Day

Monday22 December 2014
9.00am

Change of Preference period closes

Applies to all VTAC applicants excluding QLD, WA, IB and NZ NCEA Year 12 applicants. Make sure you complete any changes well before the deadline!

Monday5 January 2015
4.00pm

Change of Preference period closes (QLD, WA, IB and NZ NCEA Year 12 applicants)


Timeline with images

Monday24 November 2014
9.00am

VTAC Change of Preference period opens

Monday15 December 2014
7.00am

VCE results and ATARs available online

Wednesday17 December 2014
10.00am–2.30pm

University of Melbourne Course Information Day

Monday22 December 2014
9.00am

Change of Preference period closes

Applies to all VTAC applicants excluding QLD, WA, IB and NZ NCEA Year 12 applicants. Make sure you complete any changes well before the deadline!

Monday5 January 2015
4.00pm

Change of Preference period closes (QLD, WA, IB and NZ NCEA Year 12 applicants)


Simplified timeline

1505-10

The Rothschild Prayer Book is produced in the Ghent-Bruges area of the Netherlands. It is probably bought on the market and not commissioned, the original owner is not known.

1872

The Prayer Book appears in a catalogue of the collection of Anselm von Rothschild

1938

It is confiscated by the Nazis from his descendant Alphonse von Rothschild in the annexation of Austria.

After the end of WW2

The Austrian Government uses legislation to pressure the Rothschilds into "donating" a large number of works to Austrian museums, including the Prayer Book

1999

Bowing to international pressure, the Austrian government returns the book and other works of art to the Rothschilds.

July 8, 1999

The Rothschilds sell the Prayer Book through Christie's London for a world record price.

January 9, 2014

The Prayer Book is sold again, at Christie's New York. The bidder is anonymous.

September 2014

It is revealed that Kerry Stokes, Australian businessman and owner of the Seven Network, had purchased it. The Prayer Book forms part of the Stokes collection in Perth.