Other names: News landing page

Newsroom is the news landing page for your website. This pattern includes:

  • Featured news section
  • List of latest news
  • Link to all news items
  • News related side navigation

We provide two patterns with different featured news options.

  • Featured images: 3 featured item with small images
  • Featured hero image: 1 featured item with a larger image

Landing page with feature images

You can also omit images if you do not have them.

Featured news

News cards

Subscribe for updates

Keep up-to-date on our latest updates. Sign up for email notifcations.

Blog post title

Month 00, 0000

Short 1 - 2 sentence description promoting this blog post.

News list

Landing page with feature banner


When and how to use it

We provide a news landing page framework for you to add your department news information. It provides easy access to news items such as:

  • News releases
  • Subscription services
  • Press information
  • Trending topics

Featured section

Use the featured section at the top of the page to highlight important content (top tasks or needs).

It includes:

  • 1 main featured topic
  • 2 secondary featured topics

Choose an image that is relevant and supports your brand identity, mission, and tone. For best results, use images with this aspect ratio:

  • For each of the 3 feature images: 275px x 160px
  • For feature banner : Container maximum width 1176px

How not to use it

Do not use this to publish extensive content. The purpose of this page is to get people to the content they want.

Components and patterns used

  • Card
  • Feature banner
  • Side navigation
  • Horizontal separator
  • News list (partial)


Standard accessibility review

Each time a new component version is published:

  • Test with the axe accessibility tool
  • Review with the VoiceOver or NVDA screen reader
  • Ensure all actionable elements are accessible by keyboard command and tab in a logical order
  • Check the component layout on a variety of screen sizes