• Friday 12September2014

  • 2:00pm – 5:00pm

    Lorem ipsum dolor

    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.

    Etiam quisaliquam semAenean sed feugiat nulla
  • 12 September - 23 September

    Duis ultricies eget diam laoreet molestie

    Nulla interdum magna a euismod laoreet. Pellentesque convallis posuere placerat. Tempor dictum nisi vitae bibendum. Praesent nec quam tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    Etiam quisNulla

• Saturday 13Sep2014

  • Mei liber scaevola

    Cu has assum consectetuer, omittam scriptorem est te. At mel verear verterem reformidans, ei sonet quodsi eripuit mei, per utinam vituperata an. Nam tristique, elit quis vehicula ullamcorper, tellus lacus rutrum lacus.

• Friday 12Sep2014

  • 2:00pm – 5:00pm

    Lorem ipsum dolor

    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.

    PresentersMs Louise AdlerMs Hanifa DeenMr Mathew KenneallyBeth WilsonLoruem Exum IpsumProfessor DoulumEndus HoopesExum Padamadahm III
  • 12 September - 23 September

    Duis ultricies eget diam laoreet molestie

    There is no doubt that technology is a powerful agent of transformation, and will be an essential component of any attempt at reforming the way healthcare is delivered. Making care safer, more efficient, and economically sustainable is unlikely to...

    Medical InformaticsMedicalTechnology
    PresentersLoruem Exum IpsumProfessor DoulumEndus HoopesExum Padamadahm III

• Saturday 13September2014

  • 9:30pm – 10:30am

    Mei liber scaevola

    Cu has assum consectetuer, omittam scriptorem est te. At mel verear verterem reformidans, ei sonet quodsi eripuit mei, per utinam vituperata an. Nam tristique, elit quis vehicula ullamcorper, tellus lacus rutrum lacus.

    Etiam quisaliquam semAenean sed feugiat nulla
    PresentersMs Louise AdlerMs Hanifa Deen
  • 12 noon – 1:30pm

    sociis natoque penatibus et magnis ridiculus mus

    Cum dis parturient montes, nascetur. Aliquam pretium ante vitae pulvinar efficitur. In interdum finibus metus, et elementum quam fringilla at. Duis at diam nisi. Mauris consequat tincidunt dolor, vel tempor diam cursus nec. Curabitur vulputate porttitor scelerisque. Vestibulum vulputate porttitor maximus. Aenean facilisis, augue ut finibus placerat, sem nisi convallis mauris, eget molestie turpis eros eu libero. Donec sit amet luctus enim, sit amet ornare sem.

    Etiam quisNulla
    PresentersMs Louise AdlerMs Hanifa DeenMr Mathew KenneallyBeth Wilson

• Friday 12September2014

  • 2:00pm – 5:00pm

    Lorem ipsum dolor

    Waiting list

    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.

    Etiam quisaliquam semAenean sed feugiat nulla

• Friday 12Sep2014

  • 12 September - 23 September

    Duis ultricies eget diam laoreet molestie

    Booked out

    There is no doubt that technology is a powerful agent of transformation, and will be an essential component of any attempt at reforming the way healthcare is delivered. Making care safer, more efficient, and economically sustainable is unlikely to...

    Medical InformaticsMedicalTechnology
    PresentersLoruem Exum IpsumProfessor DoulumEndus HoopesExum Padamadahm III

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

Normal disabled button

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

Back to homepage

Some examples of buttons with URLS for testing the print styles.

View our virtual tour

View our virtual tour

View our virtual tour

Service now link

Service now link

Service now link

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.

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

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

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!

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.

• Health & Medicine
  Why today’s children need more than a good night’s sleep.
• 18 March4 May 2014
  Sed natum conceptam porro iuvaret sensibus quo ad constituam in mnesarchum. Sed porro iuvaret in, per eu natum conceptam.
  Event
• Instagram @unimelb
• International law. Is it myth or reality?

  The fate of boat people in the Indian Ocean and the Mediterranean proves attitudes are hardening.

  Legal Affairs
• India hasn't signed nuclear treaty. So why did Aus sign a uranium deal? http://t.co/STetvM6GeA w/AProf Tilman Ruff

  Twitter@unimelb
• 
  Multi-party Government the way of future

  This tile uses an img tag inside a crop-height container instead of a background image. The image appears shorter because it has a wider ratio than 16/9, so this technique should be avoided.

  Politics & Society
• Wednesday 28 May 20145:00 pm - 1:00 am
  This tile uses an img tag inside a crop-height container instead of a background image.
  
  Exhibition
• This is an example of a tile without a link

  Ex debet appellantur eam, porro iuvaret in, per eu natum conceptam, nam at essent nam an case nemore mnesarchum. Sed porro iuvaret in, per eu natum conceptam, nam at essent petentium. Dicunt audiam aliquam eu sed, te mei decore maiorum. Ex debet appellantur eam, porro iuvaret in, per eu natum conceptam, nam at essent nam an case nemore mnesarchum.

  Sed porro iuvaret in, per eu natum conceptam, nam at essent petentium. Dicunt audiam aliquam eu sed, te mei decore maiorum. Ex debet appellantur eam, porro iuvaret in, per eu natum conceptam, nam at essent nam an case nemore mnesarchum. Sed porro iuvaret in, per eu natum conceptam, nam at essent petentium. Dicunt audiam aliquam eu sed, te mei decore maiorum. Dicunt audiam aliquam eu sed, te mei decore maiorum.

  30 Feb 2015News
• More storiesMore eventsTwitter@unimelb Instagram@unimelb
• Apeirian nominati partiendo

  Ullum ornatus intellegam in sea

  Call to Action

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.

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

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.

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

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.

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.

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:

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!

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)

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.

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!

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.

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>

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. 

   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. 

   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. Chaz Batrouney

   Web Producer

   Project Services

   +61 3 8344 0346

   chaz-batrouney@unimelb.edu.au

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

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

   • Course structure
   • Subject options
   • Breadth requirements

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• next

Results 1 - 5 of about 809

Test the modal

Or a normal text link

Open a different modal

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

• Prima vitae

  Prima vitae labitur ut eam, at omnes facilis constituam quo. Commune gloriatur ne nam. Vix eu omnium recteque consectetue…

  Call to action

• Ex debet appellantur eam

  Prima vitae labitur ut eam, at omnes facilis constituam quo. Commune gloriatur ne nam. Vix eu omnium recteque consectetue…

  Call to action

• Prima vitae

  Prima vitae labitur ut eam, at omnes facilis constituam quo. Commune gloriatur ne nam. Vix eu omnium recteque consectetue…

  Call to action

• Ex debet appellantur eam

  Prima vitae labitur ut eam, at omnes facilis constituam quo. Commune gloriatur ne nam. Vix eu omnium recteque consectetue…

  Call to action

• Prima vitae

  Prima vitae labitur ut eam, at omnes facilis constituam quo. Commune gloriatur ne nam. Vix eu omnium recteque consectetue…

  Call to action

• Ex debet appellantur eam

  Eripuit postulant honestatis eu has, vel an enim duis. Ei labore adolescens eum. Vidisse adolescens ei sit, eu feugiat adipisci qui.

  Call to action

• Qui ut mucius fuisset

  • Apeirian nominati partiendo vel at
  • Qui cu saperet imperdiet necessitatibus
  • Cu nam integre copiosae lobortis
  Call to action

• Prima vitae

  Prima vitae labitur ut eam, at omnes facilis constituam quo. Commune gloriatur ne nam. Vix eu omnium recteque consectetue…

  Call to action

• Ex debet appellantur eam

  Eripuit postulant honestatis eu has, vel an enim duis. Ei labore adolescens eum. Vidisse adolescens ei sit, eu feugiat adipisci qui

  Call to action

• Qui ut mucius fuisset

  Apeirian nominati partiendo vel at, qui cu saperet imperdiet necessitatibus. Cu nam integre copiosae lobortis

  Call to action

• Ea copiosae philosophia vim

  Eripuit postulant honestatis eu has, vel an enim duis. Ei labore adolescens eum. Vidisse adolescens ei sit, eu feugiat adipisci qui

  Call to action

• Prima vitae

  Prima vitae labitur ut eam, at omnes facilis constituam quo. Commune gloriatur ne nam. Vix eu omnium recteque consectetue…

  Call to action

• Ex debet appellantur eam

  Cu idque nulla eos, modus sensibus constituam et quo. Ne mel duis simul, quo ad euismod partiendo, nisl vide mei ei. Ea copiosae philosophia vim. Ex vel civibus inimicus consulatu, ad cetero ceteros rationibus…

  Call to action

• Qui ut mucius fuisset

  Apeirian nominati partiendo vel at, qui cu saperet imperdiet necessitatibus. Cu nam integre copiosae lobortis

  Call to action

• Ea copiosae philosophia vim

  Eripuit postulant honestatis eu has, vel an enim duis. Ei labore adolescens eum. Vidisse adolescens ei sit, eu feugiat adipisci qui

  Call to action

• Prima vitae

  Prima vitae labitur ut eam, at omnes facilis constituam quo. Commune gloriatur ne nam. Vix eu omnium recteque consectetue…Call to action

• Ex debet appellantur eam

  Cu idque nulla eos, modus sensibus constituam et quo. Ne mel duis simul, quo ad euismod partiendo, nisl vide mei ei. Ea copiosae philosophia vim. Ex vel civibus inimicus consulatu, ad cetero ceteros rationibus…Call to action

• Qui ut mucius fuisset

  Apeirian nominati partiendo vel at, qui cu saperet imperdiet necessitatibus. Cu nam integre copiosae lobortisCall to action

• Prima vitae

  Prima vitae labitur ut eam, at omnes facilis constituam quo. Commune gloriatur ne nam. Vix eu omnium recteque consectetue…

  Call to action

• Ex debet appellantur eam

  Cu abitur ut eam, at omnes facilis constituam quo. Commune gloriatur ne

  Call to action

• Qui ut mucius fuisset

  Apeirian nominati partiendo vel at, qui cu saperet imperdiet necessitatibus. Cu nam integre copiosae lobortis

  Call to action

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

• 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

The figure component comes with a variant class specifically for embeds: figure--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:

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

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

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.

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.

• 

• 

• 

  Short caption in gallery

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

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

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

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.

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.

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.

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

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

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

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

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

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

• 
  Paul Tagell

  Philosopher

  University of Melbourne

• 
  Neil Ang

  Juggling Professional

  University of Melbourne

• 
  Jason Smith

  Coffee Drinker

  University of Melbourne

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

The Mega Menu component is initialized as a “view component” that’s automatically activated by the presence of a data attribute in the DOM.

<body>
  <div data-um-mega-menu=""></div>
  <div class="uomcontent">
    <div class="page-inner">
      ...
    </div>
  </div>
</body>

The shape and layout of the mega menu is configured by passing a JSON-stringified object as the data-um-mega-menu attribute (following the pattern from the defo view-binding library).

That object should take the following shape:

{
  // Main title in header (and its link location)
  facultyName: "Faculty Name",
  facultyHref: "https://faculty.unimelb.edu.au",
  // Major nav items
  navItems: [
    {
      href: "/main-item",
      title: "Main item"
    },
    {
      href: "/main-item-with-children"
      title: "Main item with children",
      // A selected attribute can be set on a major nav item to indicate
      // that it’s the relevant navigation tree
      selected: true,
      // Major nav items can have children
      navItems: [
        {
          href: "/second-level-item",
          title: "Second-level item"
        },
        {
          href: "/second-level-item-with-children",
          title: "Second-level item with children",
          // ... and so can their children (three levels are all that’s supported)
          navItems: [
            {
              href: "/third-level-item-1",
              title: "Third-level item-1"
            },
            {
              href: "/third-level-item-2",
              title: "Third-level item-3"
            }
          ]
        },
      ],
      // Major nav items can have featured "asides" which will display
      asides: [
        {
          // Asides can specify a color from the allowed palette:
          //   blue, teal, purple, pink, orange
          color: "purple",
          imageUrl: "https://via.placeholder.com/400x300",
          title: "Aside 1",
          content: "Lorem ipsum dolor sit amet."
        },
        {
          // Aside without a color will be assigned one automatically
          imageUrl: "https://via.placeholder.com/400x300",
          title: "Aside 2"
        }
      ]
    }
  ],
  // Options top-nav items — these are intended for providing quick access
  // to "global" navigation options.
  //
  // Top-nav items can also be separated into groups by separating them
  // into nested arrays
  topNavItems: [
    {
      title: "Students",
      href: "/students"
    },
    {
      title: "Staff",
      href: "/staff"
    },
    {
      title: "Alumni",
      href: "/alumni"
    }
  ]
}

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)

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)

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.

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

• Cras pretium et elit

  Lorem ipsum dolor sit amet, consectetur adipisicing elit.

• Consectetur adipisicing elit

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Deleniti dicta dignissimos saepe dolore, incidunt deserunt totam id earum.

• Pretium bibendum

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet.

• Cras pretium et elit

  Lorem ipsum dolor sit amet.

• Portrait image

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Deleniti dicta dignissimos saepe dolore.

• Level-2 heading

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet.

• Level-4 heading

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Deleniti dicta dignissimos.

• Heading that is very, very long and takes at least two lines

  Lorem ipsum dolor sit amet, consectetur adipisicing sit amet.

• Cras pretium et elit

  Lorem ipsum dolor sit amet, consectetur adipisicing elit.

• Consectetur adipisicing elit cras pretium et pretium bibendum

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet deleniti dicta dignissimos.

• Pretium bibendum

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Deleniti dicta dignissimos saepe dolore, incidunt deserunt totam id earum.

• Cras pretium et elit

  Lorem ipsum dolor sit amet, consectetur adipisicing elit.

• Consectetur adipisicing elit cras

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Deleniti dicta dignissimos saepe dolore, incidunt deserunt totam id earum.

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.

• Cras pretium et elit

  Consectetur adipisicing. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Deleniti dicta dignissimos saepe dolore, incidunt deserunt totam id earum.

• Consectetur adipisicing elit

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Deleniti dicta dignissimos saepe dolore, incidunt deserunt totam id earum.

• Pretium bibendum

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Optio cupiditate quis, neque, itaque est quae! Ipsam quas dolor modi vero placeat accusantium distinctio rem iusto reprehenderit. Deleniti dicta dignissimos saepe dolore.

• Cras pretium et elit

  Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium doloribus commodi incidunt voluptatem nihil dignissimos eos ullam modi assumenda!

• Pretium bibendum

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Deleniti dicta dignissimos saepe dolore.

• Level-2 heading

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt nam, id corporis itaque possimus quod libero quibusdam, voluptate suscipit, architecto veritatis. Sed, maxime.

• Level-4 heading

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Deleniti dicta dignissimos. Optio cupiditate quis, neque, itaque est quae!

• Heading that is very, very long and takes at least two lines

  Lorem ipsum dolor sit amet, consectetur adipisicing sit amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae quia nulla itaque beatae consectetur harum facere animi.

• Consectetur adipisicing elit

  Consectetur adipisicing. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet.

• Pretium bibendum

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Deleniti dicta dignissimos saepe dolore, incidunt deserunt totam id earum.

• Cras pretium et elit

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. At, esse amet.

• Cras pretium et elit

  Consectetur adipisicing. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Deleniti dicta dignissimos saepe dolore, incidunt deserunt totam id earum.

• Consectetur

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Deleniti dicta dignissimos saepe dolore, incidunt deserunt totam id earum.

• Cras pretium et elit

  Consectetur adipisicing. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Deleniti dicta dignissimos saepe dolore, incidunt deserunt totam id earum.

• Consectetur

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Deleniti dicta dignissimos saepe dolore, incidunt deserunt totam id earum.

• Cras pretium et elit id bibendum elit id bibendum pretium et elit pretium et elit

  Implement a template-based truncation to 20 words to prevent the summary from unbalancing the list item and extending the…

• Cras pretium et elit id bibendum.

  Implement a template-based truncation to 20 words to prevent the summary from unbalancing the list item and extending the…

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.

Heading 1

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6