Every component has been designed, developed, and tested to be:

• fit for purpose.
• responsive on various devices.
• platform and theme agnostic.
• lightweight and performant.
• accessible.

Banner

Introduction

The banner component gives the user some context about the website they are in within the department. It can be used in various ways:

• show a brief description of the business unit
• link to a key announcement
• link to key seasonal content

Example

Usage

Sites that do not require this component can choose to use a shorter image-only variant or forgo it completely.

Specifications

• Full size banner (with button and text): 1350 pixels (width) x 520 pixels (height)
• Shallow banner (image only): 1350 pixels (width) x 277 pixels (height)

Availability

This component is available in:

• Home page

Squiz Matrix how to guide

Learn how to add a banner to your home page.

Popular teaser

Introduction

The popular teaser block is used to highlight a key page within a site.

Example

Usage

This component appears on the page as three blocks in a three-column layout.

Each popular teaser consists of a:

• category label - gives the user context about the type of content the block contains
• title - auto-populated from the linked page’s name
• thumbnail - auto-populated from the linked page’s image
• description - auto-populated from the linked page’s description

Specifications

300 pixels (width) x 200 pixels (height)

Availability

This component is available in:

• Home page

Squiz Matrix how to guide

Learn how to add teasers to your home page.

Link group

Introduction

The link group component creates named groups of related links. Content owners can use this component to highlight popular and useful content for their audience groups.

Example

Usage

Each group can contain up to five links. External links are visually marked so users get adequate notice before they click on them. External links do not open in a new window.

The link group component automatically appears in either two or three column layouts.

Availability

This component is available in:

• Home page

Specifications

• Minimum two link groups.
• Maximum four link groups.
• Each link group can contain up to five links.

Squiz Matrix how to guide

Learn how to add link groups to your home page.

Show hide

Introduction

Show/hides (also know as accordions) are collections of content pairs, where each pair consists of a title and content block. The user scans the list of titles then selects one to reveal its content. Multiple items can be open at any one time.

Example

Usage

Show/hides are best suited for paired content that follow a before-after rhythm. For example: question and answer, topic and description.

Both title and content should be concise. Each pair should be similar in size to others in the same collection. This keeps the interaction and user's expectations consistent.

Show/hides have an added benefit of reducing a page’s vertical height. However this should not be the primary reason for using this pattern.

The content area can contain any standard typographic element, such as headers, and bullet lists.

Accessibility

Every item should be keyboard-accessible. The user must be able to:

• navigate to each title
• expand the item
• access its content block
• continue to the next item

Availability

This component is available in:

• Landing page
• Standard content page

Squiz Matrix how to guide

Learn how to add show/hide to your page.

Image and caption

Introduction

To enhance user experience, images should only be used when they add value and/or provide context to the content. This means that all images should include a caption using the 'Image and caption' pattern.

Do not use images solely for decoration. Do not insert images using the Squiz Matrix WYSIWYG editor. The only exception is if you're including a screenshot in instructions. In that case, the instructions form the text alternative for the image.

Example

Usage

Your caption text should be useful and succinct, give additional background and context.

Captions for images should be written in full sentences, with no more than 150 characters and a full stop at the end. Example:

• Flexible furniture configurations allow students to learn in the manner that suits them best.

Captions for charts or graphs should include a figure number and label text, with no more than 150 characters and no full stop at the end. Example:

• Figure 1: Components of the Resource Allocation Model explained

Accessibility

Every image needs to include alt text that describes the image for individuals using assistive technology. Example:

• primary school students using flexible furniture

Availability

This component is available in:

• Standard content page

Squiz Matrix how to guide

Learn how to add image and caption to your page.

Call out box

Introduction

With the call out box, content writers can highlight key blocks of content in an article.

Example

Usage

The call out box is designed to draw the user’s attention. Content writers should use this component sparingly as excessive use will diminish its impact on the page.

This component can contain any standard typographic element, such as headers, bullet lists, and images.

Availability

This component is available in:

• Landing page
• Standard content page

Squiz Matrix how to guide

Learn how to add a call out box to your page.

Tabs

Introduction

The tabs component keeps related content in a single container. The user can switch between different content areas by clicking on a tab.

Example

Usage

Due to its design, tabs contain fewer items compared to the Show/Hide component (which has better support for arbitrary lists of items). Tabs also only show one content area at a time.

If you are unsure as to which component to use, here is a rule of thumb: Tabs can be converted to Show/Hide, but not vice versa.

Accessibility

Every item should be keyboard-accessible. The user must be able to:

• navigate to each title
• select the item
• access its content block
• continue to the next item

Availability

This component is available in:

• Landing page
• Standard content page

Squiz Matrix how to guide

Learn how to add tabs to your page.

News

Introduction

News allows content writers to create a single source of news and announcements within their site. News consists of two page templates: news index and news article.

Example

Usage

Please refer to content and user experience guidelines (staff only) for information on writing effective news articles.

Availability

When enabled, news will be accessible from the site's local footer.

Squiz Matrix how to guide

Learn how to add news to your section.

Catalogue

Introduction

The catalogue component is used to show a collection of items, grouped into categories. The user can sort the items and also choose to view items in a grid (pictured) or list format.

Example

Usage

A collection is suitable for the catalogue component when:

• all items share a common category or domain (e.g. computer hardware)
• items can be sub-categories (e.g. desktop, laptop, tablet)
• users benefit from being able to sort items according to some criteria (e.g. price)

Availability

This component is available in:

• Landing page

Squiz Matrix how to guide

Learn how to add a catalogue to your section.

Partnership footer

Introduction

The partnership footer component is designed to display non-department agencies logos who collaborated with the department to produce content or supplied material published on a public section of education.nsw.gov.au.

• Show up to 5 partnership logos (approved by the Communication and Engagement design team).
• Logos link to partner websites.
• Include text summarising the partnership (150 characters).

Example

Usage

Request the component from the Communication and Engagement design team (staff only).

Make sure you include:

• an explanation of why the section needs a partnership footer
• high-resolution logos
• URLs to partner websites.

The team will then review your request for approval.

Availability

When enabled, the partnership footer will appear on all pages within the specified section. It will be below social media links and local footer links and above the global footer.