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
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*
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: 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.