Text

Text styles available in the design system:

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.

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

Lead

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

<p>A variant with class <code>lead left</code> exists for use in <a href="/layouts/no-header">header-less layouts</a>.
</p>
<section class="lead">
  <p>
    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.
  </p>
</section>

Note: As of v5.0 of the design system <blockquote> has been redesigned to deal with longstanding layout problems. The examples below demonstrate the original style (still available, by adding class="blockquote-classic"), and the new style. The new style has been designed so that it can work inset on the left or right of a block of text.

Warning: Quotes are automatically added to the text provided!

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

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

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.

<section class="with-figure">
  <blockquote class="blockquote-classic">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.<cite>Samuel Clemens</cite></blockquote><blockquote class="left">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.<cite>Samuel Clemens</cite></blockquote>
  <p>
    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.
  </p>
  <p>
    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.
  </p>
  <p>
    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.
  </p>
  <blockquote class="blockquote-classic">Every superfluous page we create is one more dead end for an angry, frustrated, confused user<cite>Tom Loosemore (@tomskitomski) <a href="https://twitter.com/tomskitomski/status/111007350210576384">September 6, 2011</a></cite></blockquote><blockquote>Every superfluous page we create is one more dead end for an angry, frustrated, confused user<cite>Tom Loosemore (@tomskitomski) <a href="https://twitter.com/tomskitomski/status/111007350210576384">September 6, 2011</a></cite></blockquote>
  <p>
    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.
  </p>
  <blockquote class="blockquote-classic">The production was not only entertaining, but had tremendous pedagogical potential.</blockquote><blockquote class="right">The production was not only entertaining, but had tremendous pedagogical potential.</blockquote>
  <p>
    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.
  </p>
  <p>
    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.
  </p>
</section>

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.

<h3>
  In-text citation
</h3>
<p>
  As discussed in <cite>Good Housekeeping</cite> (1995) ...
</p>
<h3>
  Reference list
</h3>
<ul class="citation-list">
  <li class="citation">
    <cite>The Good Housekeeping illustrated book of child care: From newborn to preteen</cite>. (1995). New York, NY: Hearst Books.
  </li>
  <li class="citation">
    Snooks and Co. (rev.) 2002, <cite>Style manual for authors, editors and printers</cite>, 6th edn, John Wiley & Sons Australia, Ltd., Milton, Qld.
  </li>
</ul>
<section class="alt">
  <p class="citation">
    <cite>The Good Housekeeping illustrated book of child care: From newborn to preteen</cite>. (1995). New York, NY: Hearst Books.
  </p>
</section>

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.

<div class="fullwidth" style="background-image:url(/assets/example/contrast.jpg)">
  <section>
    <p>
      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.
    </p>
  </section>
</div>

Two columns

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

<div class="half">
  <section class="tight">
    <figure class="full-width">
      <img alt="kitten" src="http://placekitten.com/g/500/350" />
    </figure>
  </section>
  <section>
    <h1>
      Cibo democritum
    </h1>
    <p>
      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
    </p>
  </section>
</div>
<div class="half">
  <section>
    <h1>
      Cibo democritum
    </h1>
    <p>
      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. <em>Cibo democritum quaerendum et duo</em>, nostrum dignissim qui te. Impetus rationibus quaerendum
    </p>
  </section>
  <section class="tight">
    <figure class="full-width">
      <img alt="kitten" src="http://placekitten.com/g/500/350" />
    </figure>
  </section>
</div>

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

<div class="contact-box">
  <dl>
    <dt>
      Address
    </dt>
    <dd>
      Building 142, The University of Melbourne<br />VIC 3010
    </dd>
    <dt>
      Email
    </dt>
    <dd>
      <a href="mailto: info@unimelb.edu.au">info@unimelb.edu.au</a>
    </dd>
    <dt>
      Phone
    </dt>
    <dd>
      <a href="tel:61390355511">+61 3 9035 5511</a>
    </dd>
    <dt>
      Opening Hours
    </dt>
    <dd>
      Weekdays: 9am—6pm
    </dd>
  </dl>
</div>

Highlight box

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

<div class="highlight-box">
  <dl>
    <dt>
      Annual leave
    </dt>
    <dd>
      20 days
    </dd>
    <dt>
      Sick leave
    </dt>
    <dd>
      15 days
    </dd>
    <dt>
      Long service leave <em>(after 10 years of continuous service with the University)</em>
    </dt>
    <dd>
      13 weeks
    </dd>
  </dl>
</div>

Emergency box

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

<div class="emergency-box">
  <dl>
    <dt>
      Phone
    </dt>
    <dd>
      <a href="tel:61390355511">+61 3 9035 5511</a>
    </dd>
    <dt>
      Email
    </dt>
    <dd>
      <a href="mailto: info@unimelb.edu.au">info@unimelb.edu.au</a>
    </dd>
    <dt>
      Hours
    </dt>
    <dd>
      24 hours, 365 days per year
    </dd>
  </dl>
</div>