Task - Reading articles

This pattern will help provide your users with articles to read. Article pages not only house text for reading, but also other ways of conveying information, such as components for displaying images, videos, and block quotes.

Use Cases

When to use

There are several different components used for displaying articles (Article: Card > Featured, Article: Card > Featured (Excerpt), Article: Card > Featured-4, Article: Card > List, Article: Card > Related). Use this pattern on pages where it can be anticipated a user may want to read an article. For example:

• on pages where users would expect to find media releases and articles, for example the media section
• on pages where users first land on our website and browsing a general page, like the homepage
• on pages where users are already reading an article and may want to read another one
• on pages where articles are relevant to the topic at hand, for example community benefits

When not to use

Do not use this pattern when the user is involved in a focused task or page unrelated to articles.

Tips

Use the correct header on article pages

Depending on the quality of the image asset, there are different types of article headers to use: 

• use the full width article header when the image is high resolution
• use the cropped and scaled version of the article header for images that are not high resolution
• use the text only version of the article header for articles that do not have an image asset

Add related articles for users to continue reading

When users are already reading content on an article page, related articles can supplement the content and invite users to continue to read more if interested.

Provide related materials

Povide additional links and documents for the user to access if they are related to the article at hand. This provides users with more information that may not be included in the article.