Skip to Content

Example Styles and Content

Recommend 50–100 words in multiple paragraphs.

Final paragraph will have the background gradient applied by the CSS

Latest Centre News...

Headline one

.article is only intended for use on home pages. Use image *and* text links for these.

Div class=article

An article contains a class=image and a class=text, formatting is automatically determined via global CSS, including image border. Image size: 110px by 62px

Article Guidelines

Should be a minimum of 2 and maximum of 7 to a page. Including the headline, the maximum number of lines is six (50–60 words); minimum is three (25–30 words).

 

 

 

Example Content <h2>

Make sure the <blockquote> is outside of the <p> tag and give it a class of "left" or "right"

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

This syle is .callout. It is good for adding notes etc. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

This style is .intro. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

.text-left = Text left aligned.

.text-centre = Text centre aligned.

.text-right = Text right aligned.

.red - changes text colour to Macquarie brand red (#a9151b)

.uppercase - sets text to uppercase.

Example images and captioning<h3>

  • Photo images have an automatically applied CSS border
  • EXECEPTION: Photo images that are the full width of the column they occupy do not take a border; apply the class "no-border".
  • Illustrations, icons, graphics, and silhouetted photos do not take a border; apply the class "no-border".
  • Images supporting articles or illustrating links should also be links; do not use either an image link or a text link, both must be applied.
  • .noborder - removes border from image below (use for full width images only, not for floated ones)

.photo-credit : apply to <p> (aligns rght)

.caption, apply to <span> around image and paragraphAt vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

Visi ut aliquid ex <h6>

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatu

.caption - apply to <p>, in col2 it is 33% of column, in col3 it is 100%.

 

 

Unordered List <h4>

  • First level = square bullet
  • Unordered list item
    • All others are circles.
    • Unordered list item
      • All others are circles.
      • Unordered list item
      • Unordered list item
    • Unordered list item
  • Unordered list item
  • Unordered list item
  • Unordered list item
Ordered list<h5>
  1. First level is number
  2. Ordered list item
    1. second is alpha (lower case)
    2. Ordered list item
      • all other are circles.
      • Unordered list item
      • Unordered list item
    3. Ordered list item
  3. Ordered list item
  4. Ordered list item
  5. Ordered list item
Example table <h5>

<caption> : small grey font
<thead><tr><th>: faculty colour gradient background, text vertically aligned bottom.
<th> : faculty colour gradient background, text vertically aligned top, tr: light grey border-bottom.
<td> : text vertically-aligned top.

Table 1: This is the caption text.
  Head two Head three Head four
This is the tfoot content (tfoot:light grey background.)
Row head Data cell one Data cell two Data cell two
Row head Data cell one Data cell two Data cell two
Row head Data cell one Data cell two Data cell two

Further Information

Content yet to be inserted.

Contact Details

Telephone: (02) 9850 9599
Email : ccd@mq.edu.au
Web : www.ccd.mq.edu.au