Web style guide

Typeface

Headings and body copy use Linotype Univers for the typeface, according to the MGSE Identity Guide.

Font stack

  
font-family: "Univers W01", "Helvetica Neue", Helvetica, Arial, sans-serif; // body copy
font-family: "Univers W01", Helvetica, Arial, sans-serif; // headings

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Headings in the side bar are stepped down in size

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading 1 <h1> should only be used once on the page for the main heading. The CMS will automatically include the <h1>.

Headings are used to section content of a page. Always start with <h2> for main sections, then use <h3> for sub-sections, etc. Never skip a heading level.

Paragraph

Intro paragraph

We are at the cutting edge of teaching and research and have been ranked number two in the world in the discipline of education in the QS World Rankings by Subject in 2014.

  
<p class="intro"></p>

Standard paragraph

This is a paragraph. All text should be placed within a paragraph tag.

Paragraphs have a maximum width equal to a 5/8ths column to ensure readability is maintained on full width pages.

Inline tags that can be used within a paragraph:

Links

Links within text are styled like Unvisted and Visted links look the same.

Other

The abbr element and an abbr element with title examples

The b element example

The cite element example

The code element example

The em element example

The del element example

The dfn element and dfn element with title examples

The i element example

The ins element example

The kbd element example

The mark element example

The q element example

The q element inside a q element example

The s element example

The samp element example

The small element example

The span element example

The strong element example

The sub element example

The sup element example

The u element example

The var element example

Lists

Ordered list

  1. list item 1
  2. list item 1
    1. list item 2
      • Un-ordered list
      • Can go in here also
    2. list item 2
      1. list item 3
      2. list item 3
    3. list item 2
    4. list item 2
  3. list item 1
  4. list item 1

Un-ordered list

  • list item 1
  • list item 1
    • list item 2
      1. Ordered list
      2. Can go in here also
    • list item 2
      • list item 3
      • list item 3
    • list item 2
    • list item 2
  • list item 1
  • list item 1

Definition list

Description name
Description value
Description name
Description value
Description name
Description value

Ordered list class = outline

  1. list item 1
  2. list item 1
    1. list item 2
    2. list item 2
      1. list item 3
      2. list item 3
    3. list item 2
    4. list item 2
  3. list item 1
  4. list item 1

Block quote (pull quote)

We are at the cutting edge of teaching and research and have been ranked number two in the world in the discipline of education in the QS World Rankings by Subject in 2014.

  
<blockquote>
  <p>Quote goes here</p>
</blockquote>

With citation

The clinical model that the Master of Teaching (Early Childhood) uses and the interwoven nature of the practice and theory really attracted me. This course has given me the skills to involve children in critical reflection of the learning program. I have confidence in myself and my own abilities, and I am looking forward to gaining employment, knowing I am very prepared to teach.

Kate Hardinge, Master of Teaching (Early Childhood)
  
<blockquote>
  <p>Quote goes here</p>
  <footer><cite>Name, Optionally title or description of who they are</cite></footer>
</blockquote>

Horizontal rule