Latest news: Canada.ca design system
Last updated: 2024-04-03
Latest news is a pattern to display the most recent Government of Canada newsroom items directly associated with the content of the page.
On this page
When to use
Use the latest news pattern to offer news items that directly relate to your page content or your organization.
What to avoid
Don’t use this pattern if your organization doesn’t regularly issue news.
Don't use this pattern to display news by a different organization or for unrelated content.
Don’t use this pattern to display Features, which is a type of promotional product, not news.
Don’t use this pattern on navigational pages.
Don’t use this pattern when you want people to stay on the page and do their task.
Content and design
The label for the heading is “News” in English and “Nouvelles” in French.
Include three news items, followed by the link “More:” that directs people to the full newsroom feed, such as “More: [Institution] news”. Use descriptive link text so it's clear where the user will go if they click on the link.
Each news item is formatted in the following manner:
[link to news release]
[YYYY-MM-DD HH:MM]
Design specifications
-
Text uses standard Canada.ca styles:
- Typography
- Colours
- Heading is coded as an H2 but styled as an H3
-
Layout
- Maximum of 3 items listed at a time, use the “More” link to connect other news items
- News items is coded as an unstyled list
Visual examples
Image description: latest news
A heading, News, is followed by three links. Each link title is [News title]. Under each link is a placeholder for the date and time, presented as YYYY-MM-DD HH:MM. Below the list of links and dates there is a line that says More: [Institution] news.
How to implement
Find working examples and code for implementing the latest news pattern.
GCweb (WET) theme implementation reference
The implementation reference includes how to configure elements of the design system.
Implementations
Determine what best suits the type of page you're creating.
GC-AEM
For the Government of Canada Adobe Experience Manager (AEM):
Research and rationale
The latest news pattern is an optional pattern for the following mandatory templates:
Latest changes
- Updated the guidance to include content and design specifications, visual examples and implementation guidance
Page details
- Date modified: