Event Hero Component

Synopsis: The event hero component is a hero that displays at the top of the event detail page. It contains a primary background image, a title subject, and an inner container background that is typically a speedline or vector graphic to pull focus to the title. The background image is intended to expand full width. Additionally, there is a CTA that displays on the lower left, which can direct the user to a registration page or further information.

Content Fields: 

Primary and secondary background images, Event Title, CTA Label and Link

Options:

Secondary Background Type: Solid, Image, Animation

Secondary Background Size: Scale Width, Scale Height or Fixed

Secondary Background Position: Left, Center, Right

CTA Theme: Light or Dark mode

Recommended Image Specifications: Horizontal image, the secondary background image anchors verttically at the top and disappears for Mobile.

Usage: Event detail 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 2

Contained, Light Mode

Ingredients: 1 Event Hero Component

This use case involves use of the light theme cta and white text to create the necessary contrast. The Event Hero does not require a container so that the secondary background image can expand full width.