Web components

Content structure

In this section

Page titles and headings
Intro block
Body content
Accordions
Comparison cards
Dividers
FAQs - don't use them
Info cards
Lists
Procedural guidance
Tables

Page titles and headings

Page titles quickly tell visitors what the page is about, so they know they are in the right place and the content is of value to them.

Do not use AT or Auckland Transport in page titles. A page being on the AT website shows it belongs to AT.

Avoid changing titles of existing pages. Page titles on the AT website are used in page URLs. These are complicated to change after a page has been published, as they affect navigation.

Headings organise content into smaller sections and help visitors quickly scan the page to find the specific information they need.

Titles and headings should:

be clear, concise and less than 60 characters
be written in sentence case and not end with any punctuation
not use an ampersand, except for page titles on levels 1, 2, and 3 of the website
not use abbreviations, unless the abbreviation is a specific term for the project
be front-loaded with keywords to make them easy to scan
avoid using questions, as this will mean starting with words such as what, when, where, which are not keywords
use keywords to help inform search engines about the content of the page.

For more on writing, see the web writing guidelines.

Also see media title and captions.

Check if you need to include te reo.

Back to top of section

Intro block

The intro block is a concise summary of key page content.

Text in the intro block must be one to two sentences and 160 characters or less.

Try to use keywords in intro block content, as this helps with SEO.

Back to top of section

Body content

Make content easy for visitors to scan by breaking up the page with chunked content.

Break up text using:

page titles and headings
short paragraphs
bullet points or numbered lists
images, videos, maps.

Learn how to use te reo Māori in your copy.

Back to top of section

Accordions

Accordions are collapsible panels that stack in a vertical list. They present content in a progression and are used to organise information on long, content-heavy pages.

A collapsed panel only displays a heading. It expands and shows more information when clicked on. Accordion headings and titles must be descriptive and enticing enough to motivate people to click on them.

The collapsed headings serve as a menu. They allow visitors to quickly scan content topics and decide what they want to read without a lot of scrolling. This makes the content more approachable.

Accordions are not ideal for accessibility and should not be used:

to cram related content onto a page
when people need to open most of the headings to answer their questions
when the panels hide only a small amount of information, which is not worth the extra step of a click, and it would be better just to scroll
for important content that needs to be clearly visible - hiding content makes people less aware of or more inclined to ignore it
when visitors may want to print the information.

Back to top of section

Comparison cards

A comparison card is designed to help customers compare attributes and assist them in making decisions. Each comparison card has a mandatory title, optional image and caption, and a maximum of 5 cells.

Minimum of 2 cards, maximum of 7
5 cards per collection recommended
All cards in a collection must have the same number of cells
If one card in a collection has an image, all cards should have images.

The cards with black headers in this style guide are comparison cards. View more examples on our Zeroheight design system.

Also see info cards

Back to top of section

Dividers

Dividers are thin horizontal lines used to group content by separating it from other elements on the page. Only use dividers when white space doesn’t separate elements clearly enough.

Back to top of section

FAQs - don't use them

FAQs often duplicate information and make a page unnecessarily long.

If a question is asked frequently, it means the content is not satisfying a specific user need and may need to be rewritten.

Find more FAQ information on Digital NZ.

Back to top of section

Info cards

Information cards contain content and actions (a standalone link or button) about a single subject that needs to be highlighted. Info cards can contain up to 5 icon list instances.

Unlike comparison cards, you may have just 1 info card. But if there's more than 1 and an image is included, all the cards should have an image.

View info card examples on our Zeroheight design system.

Also see comparison cards

Back to top of section

Lists

Lists are styled using bullet points or numbers, with vertical spacing between list items to make the content easier to read.

How to write a list:

start with a stem (introductory) sentence, which should be a sentence all the list items have in common
end the stem sentence with a colon (:)
avoid saying 'the following', as it is obvious that items in a list follow
check that each list item grammatically fits with the stem sentence.

If a complete sentence introduces a list, start each list item with a capital letter, and end it with a full stop.

Otherwise, do not capitalise list items, and only put a full stop after the last item on the list.

Bulleted lists

Bulleted lists break up information into a set of short points, making it easy for visitors to scan.

Numbered lists

Use a numbered list when you need to list items in particular order.

For step-by-step processes, see procedural guidance.

Back to top of section

Procedural guidance

Procedural guidance breaks up a complex sequential process into simple actionable steps.

Back to top of section

Tables

Tables can be used to display related data in a readable format.

Tables are not accessibility-friendly and should be kept as simple as possible.

Complex tables, with multiple levels of headers or merged rows and columns, should be avoided where possible. Otherwise, make them into multiple simple tables, which have a single row of headers, and no merged rows or columns.

Do not use tables for purely layout effects, such as displaying content side by side.

When creating tables:

avoid merging cells - this makes it confusing for people with learning disabilities and those using screen readers
avoid using large blocks of text
always include a header row
use sentence case, including in the header and footer.

Back to top of section

Return to style guide home page

Links

Back to top

Links are clickable text that navigate the user to a related internal or external page, a file, or an anchor within a page.

Links should:

describe the link's destination or purpose, or match the title of the linked page or document
be less than 40 characters
use keywords to help SEO
use sentence case
open in a new browser window if they link to an external page or are part of a process
be consistent - don’t use the same link text within one page to refer to different destinations.

Don’t use ‘click here’ or ‘read this’ with no additional context, as this will confuse screen readers.

Don’t use the URL on the website unless it’s a known brand name.

Back to top of section

In-text links

Always provide a link when you refer to a specific AT webpage or external website.

Write the sentence and link relevant keywords. The link's purpose should still be clear when the link is removed from its context on the page.

Punctuation can be used following a link, but don’t link the punctuation mark. Don’t use punctuation when the link is a URL.

Back to top of section

Linking to files

Avoid linking to files. Where possible, include the content of the file on the webpage.

If you must link to a file, use the download component to do so.

When linking to a file, always include the title, type and size of the file in the link text.

All PDFs must be accessible.

Make sure to properly name your file.

Back to top of section

CTA links

Some links are used for performing actions. The copy should reflect this with a call to action (CTA).

CTA links are meant to bring prominence to something. They are usually an important link on the page and are highlighted.

Don’t use multiple CTA links on a page as this will confuse visitors as to which link they should act on.

Don’t refer to a link in text. Refer to the call to action.

Back to top of section

Buttons

For example, submitting a form

Back to top of section

Cards

For example, event information

Back to top of section

Media

In this section

Alt text
Crediting someone
Files
File names
Forms
Gallery
Icons
Images, graphics, and videos
Maps
Media titles and captions
Webtiles
YouTube

Back to top

The Digital Enablement team do not produce media. If you want to put media (such as an image, file, or form) on the website, please read these guidelines.

If you need media produced or branded, please get in touch with Creative@AT.

Back to top of section

Alt text

All images must have alt text.

Alt text is a brief description of what an image is. It helps visitors who rely on screen readers and is important for SEO.

Learn more about other accessibility requirements.

Back to top of section

Crediting someone

Back to top of section

Files

Check your files meet our accessibility standards.

Files must be no more than 2MB. This rule includes:

Microsoft Word docs (.DOC and .DOCX files)
Microsoft Excel docs (.XSL and .XSLX files)
PDFs
Images (JPG and PNG files).

This is because large files will slow down the loading time of pages and harm our website rating.

Videos are an exception. That's because YouTube reduces the size of video files (MP3s and MP4s) when they're uploaded.

Avoid linking to files where possible. Instead, try to include the content of the file on the webpage itself.

Back to top of section

File names

It’s important to name your file accurately. This rule applies to all files, including:

images
videos
maps
other documents.

File names tell search engines what's in the file, which helps people find relevant files.

File names should:

be as short as possible
use keywords instead of a phrase
be all lowercase
replace spaces with hyphens or full stops (not underscores)
not use special characters (?, %, #, /, : , and ’ )
avoid dates where possible
avoid abbreviations
not include version numbers - if a file's version is important, mention this in the page content.

Name your file using this formula:

auckland-transport-project-title-what.format

Check file extension type.

SEO rules for naming files

When uploading a new file to replace an existing file:

Delete the old file.
Name the new file the same name as the old file.
Maintain a standard naming convention for similar types of files, such as timetables.

When uploading reports or files related to specific time periods, you can rename these files and use dates.

Back to top of section

Images, graphics, and videos

Images, graphics and videos can help tell a story, communicate information, and break up text on a page to make it more approachable.

When referring to the position of images on a page, avoid saying 'below' and 'above'. That's because people using screen readers don't navigate a page visually.

Visual media must be:

relevant and provide additional value to written content
used sparingly
in alignment with our brand guidelines
landscape.

Images and graphics

All images and graphics must:

have alt text
be saved as RGB (not CMYK or Pantone)
be no more than 1MB in size, to keep page load time short
not crop people's heads or limbs, as this is culturally insensitive.

Images, including photographs, complex, and opaque images, should be:

no smaller than 3072px wide and 1728px high
in a 16:9 ratio
in JPG format, with quality above 70%.

Use PNG format for graphics, including:

charts
icons
photographs that require transparency.

Hero banners should be no smaller than 5000px wide.

For more information on how to use images, see imagery on Material Design

Videos

Videos must:

be in a 16:9 ratio and 1080p format
be an MP4 file
have alt text
consult our online video standards
come with a subtitle file (.SRT) if they have speech.

Please provide a subtitle file (.SRT) for New Zealand Sign Language (NZSL) videos. This helps people who are new to or learning NZSL.

Back to top of section

Maps

Back to top of section

Media titles and captions

Media titles should quickly inform visitors what the media's purpose is.

Use keywords in media titles.

Captions should describe why you chose to include a piece of media. They can include any specific information not included in the title.

Captions are not the same as alt text. Do not use the same text for both.

Use the same piece of alt text every time you use a specific image. The caption depends on the context in which you use the image.

Make sure you use a title for informative images, such as:

maps
graphics
project mock-ups.

Decorative images, which are images used to make a page look nicer, do not need a title or a caption.

Video titles

Video titles have additional considerations so they will be compatible with YouTube.

Keep them short - anything longer than 60 characters will get cut off in search results.
Add AT to the end of the title if Auckland Transport or AT is not used in the title.
Include NZSL in brackets at the end of titles of videos in NZSL.

Back to top of section

Webtiles

Webtiles are small images that link to a related page. They visually represent the topic of the page they link to.

Webtiles should follow the same standards as images. However, webtiles must be 220px wide by 150px high.

Tiles for the curated footer on the homepage must be 220px by 220px.

Back to top of section

YouTube

Back to top of section

Return to style guide home page

Temporary messages

In this section

Banners
Permanent banners
Alert banners
Feedback banners
Growlers

Back to top

Banners

Banners highlight important pieces of information that may help people with or affect tasks or user journeys.

Banner messages should be no more than 250 characters, including spaces.

Use banners sparingly. That way, people will take notice when they are used.

Banners can come in several configurations:

Text only

Heading and text

Text and standalone link

Heading, text, and standalone link

Heading, text, and in-text links

Back to top of section

Permanent banners

Banners can be permanent or temporary.

In procedural guidance, use a permanent banner if the information in the banner:

isn't obvious from the rest of the content
prevents you from moving to the next step
covers some detail in the step, not the step itself.

Do not use a banner in procedural guidance:

just for emphasis
if it is not a step in the procedure
to repeat information that is already there.

View examples of page banners in the AT Design System on Zeroheight.

Informative banners

A white banner.

Used to highlight specific pieces of information in content or through a process.

The information in the banner should not be mandatory or necessary to complete a function.

Back to top of section

Alert banners

Alert banners come in 3 styles.

Blue banners are low alerts.
Yellow banners are medium alerts.
Magenta banners are high alerts.

Low alert

A light blue banner.

Used to highlight specific pieces of information in content or through a process.

The information in the banner should be:

useful or helpful
not mandatory or necessary to complete a function.

Medium alert

A yellow banner.

Used for any information:

where a user needs to know or consider something before taking action or making a decision
that affects or influences a user's decision
that tells a user what to do next or about a status changing.