HERO - ARTICLE AND PUBLICATION (UN-GATED)

Presents the ungated articles, case studies and publications

The presented module is used for the un-gated written resources such as Articles and Case studies.

Desktop - Article

Mobile - Article

Desktop - Case study

Mobile - Case study

Design specs

The Article hero is a prominent visual element placed at the top of an article or un-gated document page. It serves to grab the reader's attention and provide essential information about the content.

This module has fixed background color that can’t be edited. 

Tags

Tags are displayed to categorise or label the content, making it easily identifiable for readers.

Header

The header contains the title or headline of the article or document, presented in a larger font size for emphasis.
Character limit:  50 - Max 3 lines on 360px viewports

Short description

A concise and informative description placed beneath the header, providing a brief overview of the content's key points or main topic.
Character limit: 250 - Preferably written in one paragraph

Byline - content and layout

Apart from the Header and description the main part of the Hero module is the the Byline. The Byline can include the following elements:

  • Author description; if applicable, include the author's name and a brief description, highlighting their expertise or credentials (optional)
  • Reading time*
  • Share button - to share the case study on social media platforms*
  • Listen button (optional)
  • Add to favourites icon (optional)
  • Download button - applies to the case studies*

When to use

Use an Article hero when you want to create a visually striking and informative introduction at the top of an article or un-gated document page, effectively engaging readers by showcasing essential information such as tags, information about the author and read time.

Examples of use

Do's and Don'ts

DO: Use maximum advised character limit and correct text styling. Read more about typography.

DON’T: Use too long text. Avoid very long titles.

DON’T: Change the styling of the text. The text should always be in reduced styling and in black.