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.

Usage: Article page.

Requirements: https://fiserv-com.atlassian.net/browse/FC-697

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

The article hero eyebrow includes five fields Resource Type Icon, Resource Type, Article Date, Article length icon, Article length

It includes an article title field and a multifield to include author thumbnails. article content field can include author names & their designation.

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