Web style guide

Buttons | Tables | Images | Video | Wells | Tabs | Acoordions | Read more | Staff profile | Comparison | Alert

Buttons

Basic button Call to action button

How to use

        
Code

        
<a class="button" href="URL">Basic button</a>
<a class="button-go" href="URL">Call to action button</a>

Tables

Standard table - column headings only

Table Caption
thead th thead th thead th
tbody td tbody td tbody td
tbody td tbody td tbody td
tbody td tbody td tbody td

Standard table - row and column headings (including table footer with headings)

Table Caption
thead th thead th thead th
tbody th tbody td tbody td tbody td
tbody th tbody td tbody td tbody td
tbody th tbody td tbody td tbody td
tfoot th tfoot th tfoot th tfoot th

Fees table - special for course page side bar

Fees C'wealth Supported Place Australian Fee Place International Fee Place
Masters degree
Fees C'wealth Supported Place Australian Fee Place Research Training Scheme Place International Fee Place
Master - Coursework  
Master - Research    

Media

Figures

Image ratios

All content images on the website should be one of the following ratios:

1:1 (square)
Dog
2:1 landscape
Dog
3:2 landscape, 2:3 portrait
Dog
Dog

Figure placement

All images should be placed within a <figure> tag.

Dog
This is a caption

The default figure will fill the content area.

In this case this figure is inside the content area of a Style A layout.

The maximum width of this image is 745px.

Make sure the native resolution of the image is at least 745px wide.

If the figure is smaller than 745px wide add style="max-width: Xpx;" to the figure tag, where X is the number of px wide.

How to use
        
Code

        
<figure>
    <a href="#"><img src="http://placehold.it/745x373" alt="Dog"></a>
    <figcaption>This is a caption</figcaption>
</figure>
Dog
This is a caption (optional)

You can use the class="left" on the figure to float the figure left. The default figure.left size is 270px wide at largest viewport setting, it will scale down with window size.

It floats to the left of the following text.

To clear the float use a new div or hr with class="row-break".

Make sure the native resolution of the image is at least 270px wide.

Dog
This is a caption (optional)

You can use the class="right" on the figure to float the figure right.

Both of these figures will be full width on mobiles.

Dog
This is a caption (optional)

When you have a figure in a sidebar it will be full-width

Dog
This is a caption (optional)

You can use an inline style to reduce the size of the figure eg. style="width: 45%;" or style="max-width: 200px;"

Video

This is a caption
This is a caption

How to use

        
Code

        
<figure class="video">
    <div class="videoWrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/uGOFPfGX3SU" frameborder="0" allowfullscreen></iframe>
    </div>
    <figcaption>This is a caption</figcaption>
</figure>

Well

Wells are usually used in the sidebar to highlight useful or summary content.

Wells should have a Heading 2 (h2)

A list:

  • List item one
  • List item two
Call to action

Tabs

Page level tabs

Page level tabs are used for project pages that have a lot of information that can be sectioned. These tabs should be placed at the top of the page under the heading 1 and act as a pseudo sub-navagation for the page. Clicking each tab should change all content on page below the tab.

Page level tabs can be bookmarked or linked to directly.

About the project

This project is blah blah blah …

Project team

Our team is blah blah blah …

Work in progress

To date we have blah blah blah …

Related publications

Our puplications are blah blah blah …

How to use

Put the following code at top of page, the href values must be in page links to unique id's of tab panes. Add class="current" to the tab you want open on page load.

        
Code

        
<ul class="tabs page" role="tablist">
    <li role="presentation">
        <a href="#section1" role="tab" class="current">About the project</a>
    </li>
    <li role="presentation">
        <a href="#section2"  role="tab">Project team</a>
    </li>
    <li role="presentation">
        <a href="#section3" role="tab">Work in progress</a>
    </li>
    <li role="presentation">
        <a href="#section4" role="tab">Related publications</a>
    </li>
</ul>

The following is the code for the page contents. It is recommended to create a separate page in squiz for each tab content (link type 2) and use nested content to add it to the display page. Add class="current" to the tab you want open on page load.

        
Code

        
<div class="panes">
    <div id="section1" role="tabpanel" class="current">
        <!-- tab content goes here -->
    </div>
    <div id="section2" role="tabpanel">
        <!-- tab content goes here -->
    </div>
    <div id="section3" role="tabpanel">
        <!-- tab content goes here -->
    </div>
    <div id="section4" role="tabpanel">
        <!-- tab content goes here -->
    </div>
</div>

Tabs within content

Tabs within the content can be used anywhere within the content.

In-content tabs with unenclosed panes.

You might use in-content tabs when you have two versions of the same content for different audiences that you want to switch out. You can have content that applies in both situations above or below these tabs.

Start year intake

The core program comprises four semesters over two years. You can choose to exit after the third semester with a Graduate Diploma in Teaching, which will qualify you to teach in early childhood settings (children aged 0-5 years) only.

Mid-year intake

This program is undertaken in four semesters over two years. The first semester provides an in-depth opportunity to learn more about working with children in an Australian context, which will ensure you are better prepared to face the challenges of the program, most particularly during placements in early childhood settings. In turn this can help you achieve better results in the course and improve your employability in the future.

How to use

Add class="current" to the tab and pane you want open on page load.

        
Code

        
<ul class="tabs" role="tablist">
    <li role="presentation">
        <a href="#start-year" role="tab" class="current" >Start year intake</a>
    </li>
    <li role="presentation">
        <a href="#mid-year"  role="tab">Mid-year intake</a>
    </li>
</ul>
<div class="panes">
    <div id="start-year" role="tabpanel" class="current">
        <!-- tab content goes here -->
    </div>
    <div id="mid-year" role="tabpanel">
        <!-- tab content goes here -->
    </div>
</div>

In-content tabs with enclosed panes.

Tabs with enclosed panes are good when using tabs to display short summative information.

Careers

Graduates of this program can enter into roles such as:

  • Garbologist
  • Household engineer
  • Daddy day care

Fees

Pretty expensive!

Pre-requisites

PhD in life studies

Duration

How much time do you have?

How to use

Same as above but add 'enclosed' class to 'panes' div e.g.

        
Code

        
<div class="panes enclosed">

Accordions

Master of Teaching (Secondary, Primary, Early Childhood)

Domestic students

We are now accepting direct applications for the Master of Teaching*. Direct applications will only be considered after VTAC applications are assessed, subject to availability.

*excludes the Master of Teaching (Secondary) Internship.

Application dates

Timely direct applications close: 18 December, 2014

Late direct applications close: 19 January, 2015

Before you apply

  • Check you meet all course entry requirements by visiting the relevant course page.
  • Prepare your supporting documentation to demonstrate you meet the course entry requirements. These may include copies of your academic transcripts, degree certificates, and evidence of English language proficiency.
  • Find the correct course code
    • Master of Teaching (Secondary) – MC-TEACHSA
    • Master of Teaching (Primary) – MC-TEACHPR
    • Master of Teaching (Early Childhood) – MC-TEACHEC
  • Consider if you would like to apply for a Commonwealth Supported Place (CSP) or Australia Fee Place.

Master of Teaching (Secondary) Internship

Domestic students

We are now accepting direct applications for the Master of Teaching*. Direct applications will only be considered after VTAC applications are assessed, subject to availability.

*excludes the Master of Teaching (Secondary) Internship.

Application dates

Timely direct applications close: 18 December, 2014

Late direct applications close: 19 January, 2015

Before you apply

  • Check you meet all course entry requirements by visiting the relevant course page.
  • Prepare your supporting documentation to demonstrate you meet the course entry requirements. These may include copies of your academic transcripts, degree certificates, and evidence of English language proficiency.
  • Find the correct course code
    • Master of Teaching (Secondary) – MC-TEACHSA
    • Master of Teaching (Primary) – MC-TEACHPR
    • Master of Teaching (Early Childhood) – MC-TEACHEC
  • Consider if you would like to apply for a Commonwealth Supported Place (CSP) or Australia Fee Place.

Other coursework programs

Domestic students

We are now accepting direct applications for the Master of Teaching*. Direct applications will only be considered after VTAC applications are assessed, subject to availability.

*excludes the Master of Teaching (Secondary) Internship.

Application dates

Timely direct applications close: 18 December, 2014

Late direct applications close: 19 January, 2015

Before you apply

  • Check you meet all course entry requirements by visiting the relevant course page.
  • Prepare your supporting documentation to demonstrate you meet the course entry requirements. These may include copies of your academic transcripts, degree certificates, and evidence of English language proficiency.
  • Find the correct course code
    • Master of Teaching (Secondary) – MC-TEACHSA
    • Master of Teaching (Primary) – MC-TEACHPR
    • Master of Teaching (Early Childhood) – MC-TEACHEC
  • Consider if you would like to apply for a Commonwealth Supported Place (CSP) or Australia Fee Place.

Master of Teaching (Secondary) Internship

Applications are now closed.

Application outcome

Successful applicants will be invited to attend an interview.

Allocation to school vacancies is based on application and interview outcomes, learning areas, and TeacherSelector response.

Conditional offers will start to be released from early September.

Final admission to the course will be dependent on VIT granting the intern Permission To Teach status and the employing school's acceptance of the intern under an employment contract.

Other coursework programs

Domestic students
Application dates

Round two applications are now open for the 2015 semester one intake.

Applications close: 23 January, 2015*

*Excludes the following courses:

  • Master of Applied Positive Psychology has closed, however late applications may be considered subject to availability
  • Master of Educational Psychology has closed
  • Master of Teaching (see section above)
  • Research higher degrees (see section below)

How to use

        
Code

        
<h2 class="accordion-label"><a href="#">Use whatever heading level applies</a></h2>
<div class="accordion-content">
    <!-- content goes in here -->
</div>

Read more

Here is the start of the blurb

Here is the second paragraph

  • hi
  • im
  • a list

Here is the hidden content

How to use

        
Code

        
<div class="collapse">
    <p>Any number of paragraphs etc in here</p>
</div>
<div class="more-details">
    <p>Here is the hidden content</p>
</div>

Staff profile

Sally Beadle

9035 7810

Sally rejoined the Centre in February 2013 to work on a range of research and consultancy projects in the area of adolescent health and wellbeing.

Sally Beadle

9035 7810

Sally rejoined the Centre in February 2013 to work on a range of research and consultancy projects in the area of adolescent health and wellbeing.

This included adapting and implementing the Connections program for Bangladesh and monitoring and evaluation of the Prevention of Violence Program in Papua, Indonesia, as well as Australian-based research with Centre for Multicultural Youth (CMY) and the Youth Support and Advocacy Service (YSAS). In 2013, Sally also continued her Masters in International Public Health from the University of Queensland.

How to use

        
Code

        
<div class="profile">
    <figure>
        <img src="http://placehold.it/150x150" alt="">
    </figure>
    <div class="details">
        <p class="profile-name"><a href="//www.findanexpert.unimelb.edu.au/display/person194117">Sally Beadle</a></p>
        <p class="info"><span class="tel">9035 7810</span> <a class="email" href="mailto:beadles@unimelb.edu.au">Sally Beadle</a> <a class="twitter" href="https://twitter.com/">@Beadle</a></p>
        <p>Sally rejoined the Centre in February 2013 to work on a range of research and consultancy projects in the area of adolescent health and wellbeing.</p>
    </div>
</div>

<div class="profile">
    <figure>
        <img src="http://placehold.it/150x150" alt="">
    </figure>
    <div class="details">
         <p class="profile-name"><a href="//www.findanexpert.unimelb.edu.au/display/person194117">Sally Beadle</a></p>
        <p class="info"><span class="tel">9035 7810</span> <a class="email" href="mailto:beadles@unimelb.edu.au">Sally Beadle</a> <a class="twitter" href="https://twitter.com/">@Beadle</a></p>
        <div class="collapse">
            <p>Sally rejoined the Centre in February 2013 to work on a range of research and consultancy projects in the area of adolescent health and wellbeing.</p>
        </div>
        <div class="more-details">
            <p>This included adapting and implementing the Connections program for Bangladesh and monitoring and evaluation of the Prevention of Violence Program in Papua, Indonesia, as well as Australian-based research with Centre for Multicultural Youth (CMY) and the Youth Support and Advocacy Service (YSAS). In 2013, Sally also continued her Masters in International Public Health from the University of Queensland.</p>
        </div>
    </div>
</div>

Comparison

Use the comparison component when you have two sets of the same type information but with different values for two categories - e.g. two different audiences

Domestic

Round 1 close: 31 October

Round 2 close: 15 December

Round 3: 31 January

International

Round 1: 31 July

Round 2: 15 December

How to use

H5 is example only, use the approriate heading level for your page

        
Code

        
<div class="col-2max comparison">
    <div>
            <h5>Domestic</h5>
            <p>Round 1 close: 31 October</p>
            <p>Round 2 close: 15 December</p>
            <p>Round 3: 31 January</p>
    </div>
    <div>
            <h5>International</h5>
            <p>Round 1: 31 July</p>
            <p>Round 2: 15 December</p>
    </div>
</div>

Alert

Looking for Breadth subjects for current students?

Browse breadth subjects

How to use

H5 is example only, use the approriate heading level for your page

        
Code

        
<div class="alert">
    <p>Looking for Breadth subjects for current students?</p>
    <a class="button--go" href="">Browse breadth subjects</a>
</div>

Course types

Education

Doctorate Masters Graduate Certificate Professional Certificate

How to use

For course pages: place as first element on page in raw section, include only applicable levels.

        
Code

        
<p class="course-types"><span class="doctorate">Doctorate</span> <span class="masters">Masters</span> <span class="gradcert">Graduate Certificate</span> <span class="profcert">Professional Certificate</span></p>