Accordions provide a means of hiding blocks of content in a fold-out widget.

The widgets.js javascript file is required for accordion functionality and can be loaded from:

//www.swinburne.edu.au/import/wcms/js/widgets.js

The blocked page header enables a heading to have a solid background colour which also has negative left and right margins to pull the block to the edge of the content section.

You can see an example in the course details template

Adding either faux tabs or swin tabs to the section will also make them sit a the bottom of the blocked section.

Indicates the current page with the navigation hierarchy. At mobile the breadcrumb only shows the parent page.

Bricks are small, stacked snippets of content that contain an image or date with a short piece of text.

By default the .brick block is padded all around. There are some modifier classes that change the layout.

• .brick--extruded will reduce the padding from 12px to 6px to give more compact spacing.
• .brick--full-inlay will enable the child element, .brick__inlay, to pull the margins into the padding, giving a full bleed image.

These modifier classes should go with the .brick default class.

Adding more than one brick will space them to the same amount as the padding. You can view an example on the home page template in the events section.

The contact actions block is placed in the sidebar and is associated with the course pages.

• On desktop it will be in the sidebar
• On mobile it will be below the page content

Course meta gives the course code, who the course is for and the campus location.

The date block by default displays inline but there are some modifier classes that can change this. .date--stacked will stack the date on top of the month. .date--blocked will add a background and foreground colour to create a date block.

Full width header image to be used at the top of any page of content or index. The header can contain a background image with a marketing message, call to action or quotation added on top.

The section.feature-header block must be placed directly inside the .l-wrapper div and before the main .l-container. You can see an example in the templates section or in this template: template-left-content-right.html

Feature promo blocks or widgets can be placed within the feature header as demonstrated.

The .heading-blocked class is deigned to go directly onto the 'h' tag. This will pad out the heading and provide a red background and faded image with white text.

There are currently no modifier classes but these could be created a later date if needed.

Ideally used for personal quotes this tile can be used in a right or left image configuration.

By default, the image is on the right but this can be flipped by adding the .highlighted-blockquote--flip modifier class.

These panels are designed to be placed at the bottom of landing pages to provide news and events listings where the right-hand sidebar is not available.

Note that you will need to either develop the required back-end code to load the news from your desired data source, or contact Web Services to discuss options for integrating with the Swinburne News and Events applications.

These panels are designed to be placed at the bottom of landing pages to provide news and events listings where the right-hand sidebar is not available.

Note that you will need to either develop the required back-end code to load the news from both Tumblr and your desired news data source, or contact Web Services to discuss options for integrating with the Swinburne News and Events applications.

Panels can be used in the page sidebar to display related information such as news or events.

Promo boxes are used sort of like Ads. They have the same structure as teasers but different layout options.

Promo boxes have the following modifier classes.

• .promo--highlight
• .promo--horizontal
• .promo--stacked
• .promo--inverted
• .promo--compact

Specifically used on the course search results page to filter the results of the search.

Refine search requires the use of swin accordion to add the correct classes for styling and functionality. You can view an example on the course search template.

The 'update search' button has a modifier which is added via js when filter have been selected. The class .is-active is added, which highlights the button.

Shows a course search result. The whole block should be clickable.

Intended for a section or div tag to make it have a full bleed background. Negative margins on the left and right pull the section into the padding.

Tabbed panels required Swin tabs for functionality and classes for style.

Tabs require the swintabs.js for functionality and styling. There is also faux tabs which enables the look of tabs but which are really links to other pages.

To use the faux tabs, they need to manually have the .ui-nav-tabs, .ui-state-default and .ui-state-active classes added for the styling to work as expected.

The teaser block is meant to show an image, heading and a small snippet of teaser text with a link call to action.

There are a few modifier classes to make the teaser block be more flexible.

By default the .teaser__bd is padded with no background and the image is stacked on top. The .teaser__ft is meant to hold the anchor link call to action text.

• .teaser--red will give the body and footer sections the swinburne red background with white text.
• .teaser--dark will use the swinburne dark grey as the background and white text.
• .teaser--horizontal will make the .teaser__hd sit to the left of the content.
• .teaser--horizontal--flip will flip the .teaser__hd to the right hand side. This needs to be used in conjunction with the .teaser-horizontal modifier class.
• Wrapping the teasers in a .teaser-wrap div will enable the teaser to have a background on hover. This is normally used when in the main content as seen here

If you are using the .teaser-wrap div, you still need to provide layout classes if you want columnar layouts. Otherwise the teaser will always span full width.

Video panels are structurally similar to a teaser block but also have a video category title to name the video. It also does not have padding on the body. There are also no modifier classes currently.

Videos, like images will fill their container.