Article card

Best practices

Article cards should present just enough information for users to decide whether an article is relevant. They should be easy to scan individually while remaining visually consistent when displayed in lists or grids. Keep the emphasis on the article title, supported by only the metadata necessary to aid decision-making.

Use article cards consistently wherever articles are presented to help users quickly recognise editorial content throughout the experience. The choice between the default and accent background should support the overall visual design of the page rather than communicate differences in meaning or importance.

When to use

• Displaying articles within a listing or collection.
• Linking to related or recommended articles.
• Presenting featured editorial content.
• Building news, insights, or knowledge sections.

When not to use

• Linking to pages that are not articles.
• Representing products, services, tools, or applications.
• The content requires additional actions beyond opening the article.
• Rich comparison or complex metadata is required.

Use a more appropriate card variant if the destination represents a different type of content.

Anatomy

1. Image
2. Card brow topic (optional)
3. Card brow category (optional)
4. Article title
5. Card background

Behaviour

The entire card acts as a single interactive element and navigates users directly to the associated article. Interactive states such as hover and focus provide clear feedback while maintaining a consistent experience across devices and input methods.

Appearance

The article card is available with two background options:

• Default: Uses the default surface background.
• Accent: Uses the accent surface background.

Both options share the same structure, content, and behaviour. The background colour is a visual styling choice only and should not communicate differences in importance, content type, or functionality. Choose the option that best complements the surrounding layout or page design while maintaining sufficient contrast and readability.

Content guidelines

Keep content concise and prioritise the article title as the primary point of focus. Titles should clearly communicate the subject of the article and avoid unnecessary length or marketing language. Supporting metadata should help users understand the content without competing with the title.

Avoid repeating information that is already communicated elsewhere on the page.

Accessibility Considerations

• Ensure the entire card is keyboard accessible as a single interactive element.
• Titles should clearly describe the destination.
• Avoid relying on colour alone to distinguish featured content.