Components

Fully self-contained and re-usable components that can be utilised to build templates.

Buttons

The button suite should be consistent across anchors, inputs and button elements.There are 4 style options and 2 size options.

The standard .button without other classes is the default action. There is no inheritance logic to change styling simply add .primary or .flat to modify.

The .primary buttons are for the most important call ot action on the page limit to 1-2 primary buttons to maintain the importanace and visual hirachy of the buttons on the page.

Buttons with .flat look like simple links but behave as buttons and maintain the large hit state - they should stack nicely next to other more important actions. The .secondary buttons is an alternative to .primary buttons rather than a companion. Use it for other non-core actions on a page like sidebar or footer interactions.

Buttons with .flat-border create a primary coloured bordered alternative button for use as a call to action for other non-core actions.

Use .large for a big button.

Use .extra-large for a bigger button.

The .danger button is for submitting destructive commands, e.g. clearing a form.

This has been reworked and now includes an icon on the buttons. To remove the icon add .no-icon

<a href="#" class="button">Default</a>
  <a href="#" class="button primary">Primary</a>
  <a href="#" class="button flat">Flat - button-like spacing</a>
  <a href="#" class="button flat-border">Flat Button with border</a>
  
  <br>
  <br>
  
  <a href="#" class="button large">Default large</a>
  
  <br>
  <br>
  
  <a href="#" class="button extra-large">Default extra large</a>
  
  <br>
  <br>
  
  <a href="#" class="button danger">Danger</a>
  <br>
  <br>
  <a href="#" class="button no-icon">Default - no-icon</a>
  
  <br>
  <br>
  <a href="#" class="button disabled">Disabled button</a>

Lists

The default list does not work unless you've wrapped the it in .formatting - something you could put on you page template to give you all the typography formatting you need.

Other lists have the .list class wrapper - you can add a heading followed by the .links on th ul element - god knows why its call .links.

<div>
  
  
  
  
  	<!-- Standard list with links -->
  
  	<div class="list">
  		<h2>Link list</h2>
  		<ul class="links">
  			<li>
  				<a href="#" title="First days at Victoria" class="link-external">First day at Victoria</a>
  			</li>
  
  			<li>
  				<a href="#" title="How to sign up" class="link-restricted">How to sign up</a>
  			</li>
  
  			<li>
  				<a href="#" title="VicNews" class="link-restricted">VicNews</a>
  			</li>
  
  			<li>
  				<span>What about no links?</span>
  			</li>
  			<li><span>Cool</span></li>
  		</ul>
  	</div>
  
  
  	<!-- Complex list with files -->
  	<div class="list">
  		<h2>Download list</h2>
  		<ul class="links">
  			<li>
  				<a href="#" title="Download 'Guide to Undergraduate Study' in PDF"><span class="label file-pdf">
  						<i>pdf</i>
  						<span>71.2KB</span>
  					</span>Guide to Undergraduate Study
  				</a>
  			</li>
  
  			<li>
  				<a href="#" title="Download 'Programme and timetable planner' in DOC"><span class="label file-word">
  						<i>doc</i>
  						<span>571.2KB</span>
  					</span>Programme and timetable plannery
  				</a>
  			</li>
  
  			<li>
  				<a href="#" title="Download 'Guide to Postgraduate Study' in PDF"><span class="label file-excel">
  						<i>exc</i>
  						<span>115.2B</span>
  					</span>Guide to Postgraduate Study
  				</a>
  			</li>
  
  			<li>
  				<a href="#" title="Download 'Victoria's presentation' in PowerPoint"><span class="label file-ppt">
  						<i>ppt</i>
  						<span>1021.2B</span>
  					</span>Victoria's presentation
  				</a>
  			</li>
  
  			<li>
  				<a href="#" title="Download 'Spoken introduction' in MP3"><span class="label file-mp3">
  						<i>mp3</i>
  						<span>151MB</span>
  					</span>Spoken introduction
  				</a>
  			</li>
  
  			<li>
  				<a href="#" title="Download 'Spoken introduction' in MP3"><span class="label file">
  		        <i>file</i>
  		        <span>12.31KB</span>
  		      </span>An unknown file full of unknown stuff
  		    </a>
  			</li>
  		</ul>
  	</div>
  
  	<!-- List of publications -->
  	<div class="list publications">
  		<h2>Publications list</h2>
  		<ul class="links">
  			<li>
  				<a href="#" title="Download 'Guide to Undergraduate Study' in PDF">The Case for New Climate Change Adaptation Funding Instruments<span class="label file-pdf">
  					<i>pdf</i>
  					<span>71.2KB</span>
  				</span></a>
  				<h6>Working paper 17-05</h6>
  				<p class="pub-author">by Jonathan Boston and Judy Lawrence</p>
  			</li>
  			<li>
  				<a href="#" title="Download 'Guide to Undergraduate Study' in PDF">Bridges Both Ways<span class="label file-pdf">
  					<i>pdf</i>
  					<span>71.2KB</span>
  				</span></a>
  				<h6>Working paper 17-04</h6>
  				<p class="pub-author">by Max Rashbrooke</p>
  			</li>
  			<li>
  				<a href="#" title="Download 'Guide to Undergraduate Study' in PDF">Review of New Zealand police's progress in response to the 2007 Commission of Inquiry into Police Conduct<span class="label file-pdf">
  					<i>pdf</i>
  					<span>71.2KB</span>
  				</span></a>
  				<h6>Working paper 17-03</h6>
  				<p class="pub-author">by Mike Rowe and Michael Macaulay</p>
  			</li>
  			<li>
  				<a href="#" title="Download 'Guide to Undergraduate Study' in PDF">Wealth Disparities in New Zealand: Final report<span class="label file-word">
  					<i>doc</i>
  					<span>71.2KB</span>
  				</span></a>
  				<h6>Working paper 17-02</h6>
  				<p class="pub-author">by Mike Rowe and Michael Macaulay</p>
  			</li>
  			<li>
  				<a href="#" title="Download 'Guide to Undergraduate Study' in PDF">Permanent Forest Bonds: A pioneering environmental impact bond for Aotearoa New Zealand<span class="label file-pdf">
  					<i>pdf</i>
  					<span>71.2KB</span>
  				</span></a>
  				<h6>Working paper 17-01</h6>
  				<p class="pub-author">by David Hall, Sam Lindsay, and Sam Judd</p>
  			</li>
  
  
  		</ul>
  	</div>
  
  
  	<!-- Basic un-ordered list -->
  	<h3>Basic un-ordered list</h3>
  	<ul>
  		<li>Nice list bro</li>
  		<li>Got a link bro? <a href="">Yeah</a></li>
  		<ul>
  			<li>Sweet as</li>
  			<li>Ripper</li>
  		</ul>
  		<li><a href="">Choice list ay bro</a></li>
  		<li>Yeah nice list bro</li>
  	</ul>
  
  
  </div>

Forms

Basic styles for forms. Note the .error class on inputs, you should also include error text - its helpful.

TODO: Add select options and radio buttons

This error message will show above the field . That way on mobile it's not covered by the keyboard.

<!-- Standard, simple form -->
  <form class="form" method="GET">
  
  	<div class="group required">
  		<label for="email">Your email</label>
  		<input type="email" name="email" id="email" placeholder="your@email.com">
  	</div>
  
  	<div class="group">
  		<label for="name">Your name</label>
  		<input type="name" name="name" id="name">
  	</div>
  
  	<div class="group">
  		<p class="error-text">This error message will show above the field . That way on mobile it's not covered by the keyboard.</p>
  		<label for="department">School / Faculty / CSU <em>(required)</em></label>
  		<input type="text" name="department" id="department" class="error">
  
  
  	</div>
  
  	<div class="group">
  		<label for="feedback">Feedback message</label>
  		<textarea placeholder="Your feedback ..." id="feedback" name="feedback"></textarea>
  	</div>
  
  	<input type="submit" class="button primary" value="Send feedback">
  </form>

Messages

Too many elements in the sidebar

Currently there are 4. The Maximum is 3. Please remove sidebar class from elements you do not want to appear in the sidebar.

The following sidebar elements were not added:

  • first_block_of_highlighted_text

Be careful, Squiz update is in progress

Any changes you will make will not be saved. Update will be finished on 23rd of October 2016.

Did you know?

If you have three quarters, four dimes, and four pennies you have $1.19. you also have the largest possible amount of money in coins without being able to make change for a dollar.

Signed in as administrator

When you finish editing this page, please log out

<div class="formatting">
  
  	<section class="flash-message error">
  		<h2>Too many elements in the sidebar</h2>
  		<p>Currently there are 4. The Maximum is 3. Please remove sidebar class from elements you do not want to appear in the sidebar.</p>
  
  		<p>The following sidebar elements were not added: </p>
  		<ul>
  			<li>first_block_of_highlighted_text</li>
  		</ul>
  	</section>
  
  
  
  
  	<section class="flash-message warning">
  		<h2>Be careful, Squiz update is in progress</h2>
  		<p>Any changes you will make will <strong>not</strong> be saved. Update will be finished on 23rd of October 2016.</p>
  	</section>
  
  
  
  	<section class="flash-message info">
  		<h2>Did you know?</h2>
  		<p>If you have three quarters, four dimes, and four pennies you have $1.19. you also have the largest possible amount of money in coins without being able to make change for a dollar.</p>
  
  	</section>
  
  
  
  	<section class="flash-message success">
  		<h2>Signed in as administrator</h2>
  		<p>When you finish editing this page, please <a href="#" title="Log out from Squiz">log out</a></p>
  	</section>
  
  
  </div>

Tags

Standard tags for filtering, tag clouds, highlighting etc.

Tag group Tag group Tag group
Default Green Grey Red Yellow

Link tag Link tag
<div class="tags">
  
  	<span class="tag">Tag group</span>
  	<span class="tag">Tag group</span>
  	<span class="tag">Tag group</span>
  </div>
  
  <span class="tag">Default </span>
  <span class="tag tag-green">Green </span>
  <span class="tag tag-grey">Grey </span>
  <span class="tag tag-red">Red </span>
  <span class="tag tag-yellow">Yellow </span>
  <br>
  <br>
  <a href="" class="tag">Link tag</a>
  <a href=""><span class="tag tag-green">Link tag</span></a>

Info Message

Info message bar

Facts and figures

Top 2%

Victoria University is New Zealand’s top ranked university for research quality.

Top 2%

Victoria University is New Zealand’s top ranked university for research quality.

Top 2%

Victoria University is New Zealand’s top ranked university for research quality.

<div class="centraliser ">
  	<div class="block">
  		<section class="flash-message info info-row">
  			<h2>Facts and figures</h2>
  			<div class="info-col">
  				<h4>Top 2%</h4>
  				<p>Victoria University is New Zealand’s top ranked university for research quality.</p>
  			</div>
  			<div class="info-col">
  				<h4>Top 2%</h4>
  				<p>Victoria University is New Zealand’s top ranked university for research quality.</p>
  			</div>
  			<div class="info-col">
  				<h4>Top 2%</h4>
  				<p>Victoria University is New Zealand’s top ranked university for research quality.</p>
  			</div>
  		</section>
  	</div>
  </div>

Cards

Card Panel

Card blocks to display and link to content. For use on hub pages.

Choose Victoria and make a difference

Victoria’s research output is used at community, national and international levels. Our academic and business partnerships have global impacts in many fields.

Victoria’s research output is used at community, national and international levels. Our academic and business partnerships have global impacts in many fields.

Learn more

Find a supervisor

Victoria’s research output is used at community, national and international levels. Our academic and business partnerships have global impacts in many fields.

Victoria’s research output is used at community, national and international levels. Our academic and business partnerships have global impacts in many fields.

Learn more

Funding your study

Victoria’s research output is used at community, national and international levels. Our academic and business partnerships have global impacts in many fields.

Victoria’s research output is used at community, national and international levels. Our academic and business partnerships have global impacts in many fields.

Learn more Scholarships

How to apply

Victoria’s research output is used at community, national and international levels. Our academic and business partnerships have global impacts in many fields.

Victoria’s research output is used at community, national and international levels. Our academic and business partnerships have global impacts in many fields.

Learn more
<!-- card panel  -->
  <div class="centraliser ">
  	<div class="block formatting">
  		<div class="card-panel">
  			<section class="card">
  				<h2>Choose Victoria and make a difference</h2>
  				<p>Victoria’s research output is used at community, national and international levels. Our academic and business partnerships have global impacts in many fields.</p>
  				<p>Victoria’s research output is used at community, national and international levels. Our academic and business partnerships have global impacts in many fields.</p>
  				<a title="Why to study at Victoria" href="#" class="button large primary">Learn more</a>
  			</section>
  			<section class="card">
  				<h2>Find a supervisor</h2>
  				<p>Victoria’s research output is used at community, national and international levels. Our academic and business partnerships have global impacts in many fields.</p>
  				<p>Victoria’s research output is used at community, national and international levels. Our academic and business partnerships have global impacts in many fields.</p>
  				<a title="Why to study at Victoria" href="#" class="button large primary">Learn more</a>
  			</section>
  			<section class="card">
  				<h2>Funding your study</h2>
  				<p>Victoria’s research output is used at community, national and international levels. Our academic and business partnerships have global impacts in many fields.</p>
  				<p>Victoria’s research output is used at community, national and international levels. Our academic and business partnerships have global impacts in many fields.</p>
  				<a title="Why to study at Victoria" href="#" class="button large primary">Learn more</a>
  				<a title="Why to study at Victoria" href="#" class="button large ">Scholarships</a>
  			</section>
  			<section class="card">
  				<h2>How to apply</h2>
  				<p>Victoria’s research output is used at community, national and international levels. Our academic and business partnerships have global impacts in many fields.</p>
  				<p>Victoria’s research output is used at community, national and international levels. Our academic and business partnerships have global impacts in many fields.</p>
  				<a title="Why to study at Victoria" href="#" class="button large primary">Learn more</a>
  			</section>
  		</div>
  	</div>
  </div>

Icon Cards

.icon-cards will centre icons and buttons.

Victoria’s research output is used at community, national and international levels. Our academic and business partnerships have global impacts in many fields.

Victoria’s research output is used at community, national and international levels. Our academic and business partnerships have global impacts in many fields.

Victoria’s research performance and rankings

Victoria’s research output is used at community, national and international levels. Our academic and business partnerships have global impacts in many fields.

Victoria’s research output is used at community, national and international levels. Our academic and business partnerships have global impacts in many fields.

<!-- card panel  -->
  <div class="centraliser ">
  	<div class="block formatting">
  		<div class="card-panel icon-cards">
  
  			<section class="card">
  				<span>
            <i class="icon-book"></i>
          </span>
  				<p>Victoria’s research output is used at community, national and international levels. Our academic and business partnerships have global impacts in many fields.</p>
  				<p>Victoria’s research output is used at community, national and international levels. Our academic and business partnerships have global impacts in many fields.</p>
  				<a title="Why to study at Victoria" href="#" class="button large primary">Victoria’s research performance and rankings</a>
  			</section>
  
  			<section class="card">
  				<span>
            <i class="icon-graduation-cap"></i>
          </span>
  				<p>Victoria’s research output is used at community, national and international levels. Our academic and business partnerships have global impacts in many fields.</p>
  				<p>Victoria’s research output is used at community, national and international levels. Our academic and business partnerships have global impacts in many fields.</p>
  			</section>
  
  		</div>
  	</div>
  </div>

Contact Card

Contact card to link faculty contact information.

Contact us

Faculty of Graduate Research

Victoria’s research output is used at community, national and international levels. Our academic and business partnerships have global impacts in many fields.

<!-- card panel  -->
  <div class="centraliser ">
  	<div class="block formatting">
  		<div class="card-panel">
  			<section class="contact-card">
  				<h2>Contact us</h2>
  				<div class="contact-card-details">
  					<div class="contact-title">
  						<h3>Faculty of Graduate Research</h3>
  						<p>Victoria’s research output is used at community, national and international levels. Our academic and business partnerships have global impacts in many fields.
  						</p>
  					</div>
  
  					<address class="contact-info">
              <ul>
                <li>
                  <span class="icon-phone"></span>
                  <a href="tel:0800 VICTORIA (842 867)" title="Call to general enquiries">+64 4 463 5350</a>
                </li>
                <li>
                  <span class="icon-mail"></span>
                  <a href="mailto:info@victoria.ac.nz" title="Send an email to info@victoria.ac.nz">Email the Faculty of Graduate Research</a>
                </li>
              </ul>
  
            </address>
  				</div>
  
  
  				<!-- map iframe -->
  				<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2997.9997526443713!2d174.76632835202034!3d-41.28710984827861!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6d38b02bfa4a862f%3A0x986dc301d1faba16!2s10+Kelburn+Parade%2C+Kelburn%2C+Wellington+6012!5e0!3m2!1sen!2snz!4v1511900346423"
  				 width="100%" height="150" frameborder="0" style="border:0" allowfullscreen></iframe>
  			</section>
  
  		</div>
  	</div>
  </div>

Dialogs And Popups

Popup Box Autoopen

Popup box that opens automatically after a page is loaded.

Requirements:

  • id of the element with class 'popup' has to be unique.

    HTML attributes:
  • data-autoload (required): Initialises the auto-loading.
  • data-opts (optional): Valid JSON Object allowing to customise auto-loading behaviour. Properties: delayInMs (default: 3000) - How long after the page loads should the popup box appear. suppressAfterCanceling (default: true) - Once the user cancels or closes the popup, the popup will (not) load again next time the same page is loaded.
<div class="popup-positioner">
  	<aside class="popup" id="popup-example4" role="dialog" data-autoload data-gtm-track data-opts='{ "delayInMs": 3500 }' aria-labelledby="popup-label" aria-describedby="popup-description" aria-live="polite">
  
  		<header>
  			<a href="javascript:;" class="btn-close" title="Close and don't show again" data-gtm-id="popup-example4-close" data-gtm-track="click">&times;</a>
  			<h2 class="caption" id="popup-label">Auto-opening popup box</h2>
  		</header>
  
  		<div class="body formatting">
  			<p id="popup-description">Pops up immediately after page loads, or after a additional time delay (includes Google Tag Manager tracking)</p>
  			<div class="btn-holder">
  				<a class="button button-cancel" href="javascript:;" title="Hide the popup" data-gtm-track="click" data-gtm-id="popup-example4-no">No, thanks</a>
  				<a class="button primary button-ok" href="https://qualtrics.com" title="Go to the short survey" target="_blank" data-gtm-id="popup-example4-yes" data-gtm-track="click">Take the survey</a>
  			</div>
  		</div>
  
  	</aside>
  </div>

Popup Box On Demand

Popup box that can be opened programatically, e.g. on click to an element.

Requirements:

  • id of the element with class 'popup' has to be unique.

    Function openPopup() parameters:
  • optionsObject (optional): Valid JSON Object allowing to customise auto-loading behaviour. Properties: delayInMs (default: 0) - How long after the page loads should the popup box appear. suppressAfterCanceling (default: false) - Once the user cancels or closes the popup, the popup will (not) load again next time the same page is loaded.
Open popup box on click
<!-- Example link triggering the popup opening dynamically -->
  <a href="javascript:;" onclick="$( '#popup-example' ).vicApp().openPopup()">Open popup box on click</a>
  
  <!-- Popup -->
  <div class="popup-positioner">
  	<aside class="popup" id="popup-example" role="dialog" aria-labelledby="popup-label" aria-describedby="popup-description" aria-live="polite">
  
  		<header>
  			<a href="javascript:;" class="btn-close" title="Close and don't show again">&times;</a>
  			<h2 class="caption" id="popup-label">Popup box opening on demand</h2>
  		</header>
  
  		<div class="body formatting">
  			<p id="popup-description">This popup opens on demand (e.g. when the element is clicked) or dynamically.</p>
  			<div class="btn-holder">
  				<a class="button button-cancel" href="javascript:;" title="Hide the popup">No, thanks</a>
  				<a class="button primary button-ok" href="https://qualtrics.com" title="Go to the short survey" target="_blank">Take the survey</a>
  			</div>
  		</div>
  
  	</aside>
  </div>

Embedded Popup Block

Popup block embedded in a conten. Can be opened programatically, e.g. on click to an element.

Requirements:

  • id of the element with class 'popup' has to be unique.
  • element with class 'popup' is not wrapped in div.popup-positioner

    Function openPopup() parameters:
  • optionsObject (optional): Valid JSON Object allowing to customise auto-loading behaviour. Properties: delayInMs (default: 0) - How long after the page loads should the popup box appear. suppressAfterCanceling (default: false) - Once the user cancels or closes the popup, the popup will (not) load again next time the same page is loaded.
Open embedded popup block on a click

<!-- Example link triggering the popup opening dynamically -->
  <a href="javascript:;" onclick="$( '#popup-example3' ).vicApp().openPopup()">Open embedded popup block on a click</a>
  <br>
  <br>
  <!-- Popup -->
  <aside class="popup" id="popup-example3" role="dialog" aria-labelledby="popup-label" aria-describedby="popup-description" aria-live="polite">
  
  	<header>
  		<a href="javascript:;" class="btn-close" title="Close and don't show again">&times;</a>
  		<h2 class="caption" id="popup-label">Embedded popup block opening on demand</h2>
  	</header>
  
  	<div class="body formatting">
  		<p id="popup-description">This popup block opens dynamically on demand (e.g. when the element is clicked) or dynamically.</p>
  		<div class="btn-holder">
  			<a class="button button-cancel" href="javascript:;" title="Hide the popup">No, thanks</a>
  			<a class="button primary button-ok" href="https://qualtrics.com" title="Go to the short survey" target="_blank">Take the survey</a>
  		</div>
  	</div>
  
  </aside>

Promo Panels

Promo

<div class="formatting">
  	<article class="promo primary">
  		<a href="http://www.victoria.ac.nz/about/global-engagement">
  			<h2>Global and national engagement</h2>
  			<p>We seek to bring the world to Victoria and Victoria to the world. <b>Find out more…</b></p>
  		</a>
  	</article>
  </div>

Promo Blue

<div class="formatting">
  	<div class="promo secondary">
  		<a href="http://www.victoria.ac.nz/about/global-engagement">
  			<h2>Global and national engagement</h2>
  			<p>We seek to bring the world to Victoria and Victoria to the world. <b>Find out more…</b></p>
  		</a>
  	</div>
  </div>

Text Promo Panel

Research matters

In the Faculty of Humanities and Social Sciences, we explore the fundamental questions that define human experience.

<div class="text-promo-panel ">
  	<div class="block formatting centraliser">
  		<div class="text-wrap">
  			<h2>Research matters</h2>
  			<p>In the Faculty of Humanities and Social Sciences, we explore the fundamental questions that define human experience.</p>
  		</div>
  		<div class="button-wrap">
  			<a href="http://www.victoria.ac.nz/fhss/research " title="Check out our student services" class="button primary large">Find out more</a>
  		</div>
  	</div>
  </div>

Tiles

Tile Strips

<div class="tiles-panel">
  	<div class="centraliser block">
  		<div class="tile-strip-grid updated-tile-grid">
  			<div class="tiles-wrap">
  				<ul>
  					<li class="tile">
  						<a href="">
  							<h2>Bachelor of Engineering with Honours</h2>
  							<h4>BE(Hons)</h4>
  							<h4>3 years</h4>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Bachelor of Engineering with Honours</h2>
  							<h4>BE(Hons)</h4>
  							<h4>3 years</h4>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Bachelor of Engineering with Honours</h2>
  							<h4>BE(Hons)</h4>
  							<h4>FOH</h4>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Bachelor of Engineering with Honours</h2>
  							<h4>BE(Hons)</h4>
  							<h4>FHSS</h4>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Bachelor of Engineering with Honours</h2>
  							<h4>BE(Hons)</h4>
  							<h4>Law</h4>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  				</ul>
  			</div>
  		</div>
  	</div>
  </div>

Tiles

<div class="tiles-panel">
  	<div class="centraliser block">
  		<div class="updated-tile-grid">
  			<div class="tiles-wrap four-col">
  				<ul>
  					<li class="tile">
  						<a href="">
  							<h2>Master of Museum and Heritage Practice</h2>
  							<div class="sub-text">
  								<h4>MMHP</h4>
  
  							</div>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Master of Museum and Heritage Practice</h2>
  							<div class="sub-text">
  								<h4>MMHP</h4>
  
  							</div>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Master of Museum and Heritage Practice</h2>
  							<div class="sub-text">
  								<h4>MMHP</h4>
  
  							</div>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Master of Museum and Heritage Practice</h2>
  							<div class="sub-text">
  								<h4>MMHP</h4>
  
  							</div>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Master of Museum and Heritage Practice</h2>
  							<div class="sub-text">
  								<h4>MMHP</h4>
  
  							</div>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Master of Museum and Heritage Practice</h2>
  							<div class="sub-text">
  								<h4>MMHP</h4>
  
  							</div>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Master of Museum and Heritage Practice</h2>
  							<div class="sub-text">
  								<h4>MMHP</h4>
  
  							</div>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  				</ul>
  			</div>
  		</div>
  	</div>
  </div>

Tiles Option

<div class="tiles-panel">
  	<div class="centraliser block">
  		<div class="updated-tile-grid fixed-height-tiles">
  			<div class="tiles-wrap four-col">
  				<ul>
  					<li class="tile">
  						<a href="">
  							<h2>Anthropology</h2>
  							<div class="sub-text">
  								<h4 class="icon-book">Subjects</h4>
  								<p>Cultural Anthropology</p>
  							</div>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Anthropology</h2>
  							<div class="sub-text">
  								<h4 class="icon-book">Subjects</h4>
  								<p>Cultural Anthropology</p>
  							</div>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Anthropology</h2>
  							<div class="sub-text">
  								<h4 class="icon-book">Subjects</h4>
  								<p>Cultural Anthropology</p>
  							</div>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Anthropology</h2>
  							<div class="sub-text">
  								<h4 class="icon-book">Subjects</h4>
  								<p>Cultural Anthropology</p>
  							</div>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Anthropology</h2>
  							<div class="sub-text">
  								<h4 class="icon-book">Subjects</h4>
  								<p>Cultural Anthropology</p>
  							</div>
  							<i class="icon-arrow-right"></i>
  						</a>
  					</li>
  				</ul>
  			</div>
  		</div>
  	</div>
  </div>

Tiles Three Column

Three column tile layout for hub top level pages.

<div class="tiles-panel ">
  	<div class="centraliser block">
  		<div class="updated-tile-grid dynamic-height-tiles ">
  			<div class="tiles-wrap three-col">
  				<ul>
  					<li class="tile">
  						<a href="">
  							<h2 class="">Course planning appointments</h2>
  							<div class="sub-text">
  								<p>If you need help deciding what degree might be right for you, or what courses to take, book a course planning session with us.</p>
  							</div>
  							<span class="tile-icon">
                  <span class="tile-icon-title"></span>
  							<span>
                    <i class="icon-arrow-right"></i>
                  </span>
  							</span>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>Book a campus tour</h2>
  							<div class="sub-text">
  								<p>Get a taste of what life at Victoria is like—book a campus tour and check out our student accommodation while you are here.</p>
  							</div>
  							<span class="tile-icon">
                  <span class="tile-icon-title"></span>
  							<span>
                    <i class="icon-arrow-right"></i>
                  </span>
  							</span>
  						</a>
  					</li>
  					<li class="tile">
  						<a href="">
  							<h2>School visits</h2>
  							<div class="sub-text">
  								<p>We're visiting schools throughout the year. For your introduction to Victoria, find out when we're in your region.
  								</p>
  							</div>
  							<span class="tile-icon">
                  <span class="tile-icon-title"></span>
  							<span>
                    <i class="icon-arrow-right"></i>
                  </span>
  							</span>
  						</a>
  					</li>
  
  				</ul>
  			</div>
  		</div>
  	</div>
  </div>

Tiles Three Column With Image

Three column tile layout with images, for hub top level pages. To be used for linking to external related sites.

<div class="tiles-panel ">
  	<div class="centraliser block">
  		<div class="updated-tile-grid  ">
  			<div class="tiles-wrap three-col image-no-gutter">
  				<ul>
  					<li class="tile">
  						<img src="https://www.victoria.ac.nz/__data/assets/image/0008/358388/mim-banner.jpg" alt="">
  						<a href="#">
  							<h3 class="">Faculty of graduate research</h3>
  							<div class="sub-text">
  								<p>We oversee all doctoral degrees and work to ensure that your experience as a thesis student is a positive one.
  									<br>br We administer the registration, enrolment, support and funding elements of your study.</p>
  							</div>
  
  							<span class="button  ">Learn more</span>
  
  						</a>
  					</li>
  					<li class="tile">
  						<img src="https://www.victoria.ac.nz/__data/assets/image/0008/358388/mim-banner.jpg" alt="">
  						<a href="#">
  							<h3>Research office</h3>
  							<div class="sub-text">
  								<p>The Research office supports the research culture at Victoria through promoting funding initiatives, managing ethics, professional development.
  									<br> We also manage PBRF and support commercialisation and intellectual property licences.</p>
  							</div>
  
  							<span class="button  ">Learn more</span>
  						</a>
  					</li>
  					<li class="tile">
  						<img src="https://www.victoria.ac.nz/__data/assets/image/0008/358388/mim-banner.jpg" alt="">
  						<a href="#">
  							<h3>VicLink</h3>
  							<div class="sub-text">
  								<p>The commercialisation arm of Victoria research, VicLink have the skills and connections to deliver your research into the market place.
  									<br> We assist researchers to transform their discoveries into assets that have real benefit to society.
  								</p>
  							</div>
  
  							<span class="button  ">Learn more</span>
  						</a>
  					</li>
  
  				</ul>
  			</div>
  		</div>
  	</div>
  </div>

Strip Tiles Accordion

NOT USED ANYWHERE - refactor and fix before using
Strip tiles with accordion to display links and similar list content.

<div class="tiles-panel">
  	<div class="centraliser block">
  		<div class="tile-strip-grid tile-accordion">
  			<div class="tiles-wrap">
  				<ul>
  					<li class="tile accordion-closed ">
  						<a href="javascript:void(0)">
  							<h2>Architecture</h2>
  							<h4>With an impressive breadth of collaborations, we champion creativity and exploration. From urban design to wearable technologies, this faculty embodies innovation. </h4>
  							<i class="icon-caret-right"></i>
  						</a>
  						<div class="accordion-content closed list">
  							<ul class="links">
  								<li>
  									<a href="#">Centre of Building Performance Research (CBPR)</a>
  								</li>
  								<li>
  									<a href="#">Earthquake Hazard Centre (EHC)
                    </a>
  								</li>
  							</ul>
  						</div>
  					</li>
  
  					<li class="tile accordion-closed ">
  						<a href="javascript:void(0)">
  							<h2>Business</h2>
  							<h4>At the heart of New Zealand’s business, finance, public and government community, our research expertise supports local and international solutions. </h4>
  							<i class="icon-caret-right"></i>
  						</a>
  						<div class="accordion-content  list">
  							<ul class="links">
  								<li>
  									<a href="#">BNZ Chair in Business in Asia
                    </a>
  								</li>
  								<li>
  									<a href="#">Brian Picot Chair in Ethical Leadership</a>
  								</li>
  								<li>
  									<a href="#">Centre for Accounting Governance and Taxation Research
                    </a>
  								</li>
  								<li>
  									<a href="#">Centre for Labour, Employment and Work (CLEW)</a>
  								</li>
  								<li>
  									<a href="#">Chair in the Economics of Disasters
                    </a>
  								</li>
  								<li>
  									<a href="#">Chair in Public Finance
                    </a>
  								</li>
  								<li>
  									<a href="#">Competitive Advantage New Zealand</a>
  								</li>
  							</ul>
  						</div>
  					</li>
  
  					<li class="tile accordion-closed ">
  						<a href="javascript:void(0)">
  							<h2>Engineering</h2>
  							<h4>Our engineering, computer and mathematical science researchers are at the forefront of their fields. Work on pure and applied solutions have global relevance.</h4>
  							<i class="icon-caret-right"></i>
  						</a>
  						<div class="accordion-content  list">
  							<ul class="links">
  								<li>
  									<a href="#">Computational Media Innovation Centre (opening June 2018) </a>
  								</li>
  								<li>
  									<a href="#">Robinson Research Institute
                    </a>
  								</li>
  							</ul>
  						</div>
  					</li>
  				</ul>
  			</div>
  		</div>
  	</div>
  </div>

Tracking Api For Gtm

Import Script

To start using Toolkit's Tracking API for Google Tag Manager, you need to make sure that following scripts are imported to the page, in the following order:

  • A. Google Tag Manager script snippets in the <head> and <body> element
  • B. jQuery v1.10 and newer
  • C. toolkit.js (bundle with all UI toolkit's scripts) or toolkit.tracking.js (standalone library for GTM tracking only)
  • D. Your custom tracking API calls

    An example with the standalone tracking library loaded from our CDN:
<head>
  	<!-- Google Tag Manager scripts *MUST BE* as high as possible in the <head> and <body>! -->
  
  	<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  
  	<script src="https://static.victoria.ac.nz/toolkit.tracking.min.js" type="text/javascript"></script>
  
  	<script>
  		/** Dynamic code to work with Tracking API */
  	</script>
  </head>

Html Attributes

When the DOM has been fully intialised, the improted script automatically subscribes any HTML element on a page with attribute data-gtm-track to be tracked and (optionally) send custom information to Google Tag Manager.

The data-gtm-track attribute can receive a type of interaction as a value. All event types specified in https://developer.mozilla.org/en-US/docs/Web/API/Event/type are supported. Check Types of interaction presets section to see what basic information are pushed into GTM for different interactions.

A secondary optional attribute id (or data-gtm-id if id cannot be used for this purpose) allows to define unique identifier for a group of related interaction.

Last optional attribute data-gtm-vars allows you to pass a valid Object in a String format. All the injected data will be added to (or override) the presets and will be pushed into GTM. Note that this HTML attribute requires single quotes to accommodate JSONs requirements.

An example of a button that sends information as a custom event 'main-logo' when clicked. Note, that Google Tag Manager has to be configured to trigger a tag when the 'main-logo' event is received:

<a id="logo" href="example.com" title="Link to the example page" data-gtm-track="click" data-gtm-id="main-logo" data-gtm-vars='{ "width": "153px", "height": "1003px", "loadingTime": 13.342 }'>Link that triggers custom event</a>

Api

Constructors and configurators (non-ES6 / ES6):
- global toolkitTracker( options: Object) - A constructor, overrides the settings and returns the object with all other public methods. A recommended way to override default settings and/or access API in non-ES6 and legacy JS environments.
- module trackerConfig( options: Object) - Importing and invoking this module is a recommended way to override the tracking's settings in ES6 JS environments.
- module tracker: Object - Importing this module is a recommended way to gain access to the tracking's public API methods in ES6 JS environments

Public API methods
- shouldTrackElement( element: DOMElement ) - True if an element has got data-gtm-track attribute, false otherwise. Useful to do custom tracking while enabling/disabling it through the HTML attribute (e.g. via CMS)
- trackEvent( eventId: String, trackingSource: Object|Event, customData: Object ) - Sends a tracking data to the GTM. If an 'Event' is passed as a 'trackingSource' parameter, it might automatically extract some pre-defined attributes based on the event type (see Types of interaction presets for more details about all available presets). If a 'non-Event' object is passed, its attributes will be pushed into GTM unchanged. Passing object as a 'customData' allows you to further extend the information pushed to the GTM and should be only used in tandem with an 'Event' object.
- registerForTracking( elements: DOMElement[], eventType: String = [data-gtm-track] | 'auto', eventId: String = [data-gtm-id] | [id]) - Subscribes a list of DOM elements to a specified user interaction (~ interaction type, e.g. 'click'). When the interaction occurs, a message in a pre-defined format is pushed into Google Tag Manager. If the eventId is not specified, the element's data-gtm-id or id attribute is used to uniquely identify the event. All user interactions defined in https://developer.mozilla.org/en-US/docs/Web/API/Event/type are supported (check 'Types of interaction presets' section to find out what information are pushed for various interactions).

Configuration object (options):
- autoRegister: boolean (true) - Whether or not should script automatically subscribe all elements with a data-gtm-track attribute after the DOM is initialised. Note that this must be set before the document.onLoad() event is triggered.

Types of interaction presets:
- auto (default) - Does not push anything to the GTM.
- click - If specified in the HTML, it gets triggered whenever a user clicks on the element. Following data are sent to GTM: event - ID of the event to identify it in the GTM's backend (see id or data-gtm-id below) | custom.selector - Element's DOM object | custom.eventType - 'click' | custom.href - URL of the element (if exists) | custom.text - Element's text content.
- any other event type specified in https://developer.mozilla.org/en-US/docs/Web/API/Event/type - Following data are sent to GTM: event - ID of the event to identify it in the GTM's backend (see id or data-gtm-id below) | custom.eventType - '{event's type}'.

Example: Do not automatically register elements with 'data-gtm-track' and define your own behaviour on pre-ES6 or legacy JS system.

<!-- Imported GTM scripts + jQuery + tracking plugin -->
  
  <script>
  	var tracker = toolkitTracker({
  		autoRegister: false
  	});
  
  	// Now, you can check if the main logo should be tracked (= contains `data-gtm-track` attribute)
  	var logoElement = $('#logo');
  	if (tracker.shouldTrackElement(logoElement)) {
  		// Manually perform your own GTM tracking or use any pre-defined method
  
  		tracker.registerForTracking(logoElement, 'click'); // Send information with event id 'logo' if user performs click on the element
  	}
  </script>