Article Hero Component

Synopsis: The Article Hero component sits at the top of the article detail pages and contains the article title with supporting information.

Content Fields:

Resource Type, Article Date, Article Length, Article Content, Author Thumbnail, Author Content (supports multiple authors)

Options:

Image Position: Top, Center, Bottom

Check box - Hero Design v2(Optional)

Resource Type Icon: None, Article, Case Study, Event, Infographics, Interview, Podcast, Press Releases, Read Time, Reports, Research Insights, Solution, Videos, Webinars.

Article Length Icon: None, Article, Case Study, Event, Infographics, Interview, Podcast, Press Releases, Read Time, Reports, Research Insights, Solution, Videos, Webinars.

Recommended Image Specifications: Recommended size for headshot images is 150 x 150

Usage: Article page.

Note: This should be used as an example only. There will be additional requirements related to each individual component usage and page design, such as font treatments, padding and margin requirements, ADA compliance etc, so please use the below examples for reference only to demonstrate core function.

Scenario 1

Ingredients: 2 Containers, 1 Article Hero Component

This article hero includes 1 author including the author's headshot.

This use case involves an outside container set to full width and an inside container to contain the article hero to 1440px.

Scenario 2

Ingredients: 2 Containers, 1 Article Hero Component

This article hero includes 2 authors including the author's headshots.

This use case involves an outside container set to full width and an inside container to contain the article hero to 1440px.

Scenario 3

Ingredients: 2 Containers, 1 Article Hero Component

This article hero includes 1 author with no headshot. It only includes the Resource Type and Article Date, and does not include Read Time. As of February 2024, this is our standard use example of the article hero.

This use case involves an outside container set to full width and an inside container to contain the article hero to 1440px.

Scenario 4

Article hero with Hero Design v2 (check box is checked) 

Ingredients: Article Hero Component

This article hero includes Hero Design check box is checked and 1 author with headshot. It only includes the Resource Type and Article Date, and does not include Read Time.

This use case involves an outside container set to full width