Overview

The news article page pattern is designed to communicate a news story, communique, media release or speech. Many variations in information hierachy and additional components are available depending on content needs. This is the most used page pattern for various news article pages located in the news section of the website. For case studies, please refer to the case study page pattern.

Components

1

2

3

4

5

6

7

8

9

10

View Code

• 1

  Heading (page title)
• 2

  Page summary
• 3

  Metadata
• 4

  Tags
• 5

  Banner image
• 6

  Lead text
• 7

  Body copy
• 8

  Call to action card
• 9

  More information links
• 10

  Contact footer

Variations

You may need to use additional components based on your content needs. These components are listed in this section.

Image

This is used when you would like to include a relevant image, photo or diagram. The caption or written description below each image is optional.

View Code

Video

Used when you would like to include or embed a relevant video.

View Code

Blockquote

Used when you woud like to include a quote relevant to the news article. This draws attention to the quote and creates a visual break in the content.

Bio card(s)

Used for featuring information about people in a news article. Examples include prize/award recipients, members of a committee or organisation.

View Code

Callout

Used for giving additional important information or corrections. Examples include noting the original published date after it has been updated, or clarifying a piece of information that was correct at the time the article was written but has since changed.

View Code

Downloads

Used for providing a file or document related to the news article. Examples include information kits and stakeholder kits.

View Code

Call to action options

There are a few different design options for a call to action based on what is being linked to.

Standard CTA

The standard CTA is used for most call to action links. This includes a title and an optional summary.

View Code

View Code

Two standard CTA

Sometimes you will have two equally important call to action links. These use medium cards, side by side.

View Code

Image CTA

We have a CTA with image option. Use this if there is a need to feature this CTA more prominently or there is a branded image requirement. Always have the image on the right hand size of the card.

View Code

Featured CTA

This CTA is generally used when this news article or case study is part of a publication. The featured CTA links back to this publication and makes it clear that this news article is part of a broader product.

View Code

Recommendations