HERO - EVENT AND WEBINAR

Presenting relevant information above the fold

This module can be used for events and webinars. The purpose of the module is to provide an overview of the time and place that the event will take place as well as create a sense of social proof/scarcity by listing the number of registered people and the number of seats still available.

Desktop

Mobile

Desktop

Mobile

Design specs

The module's layout and specifications are derived from Hero variant 1, with minor stylistic adjustments. In the event and webinar hero, the title of page is stylised in the reduced version of the typeface, and not capitalised. The primary button, “Get access”, is an anchor link to the form that is placed further down on the page. The secondary button has been substituted with tertiary styling, serving the purpose of a “Share” button.

The hero includes key information about the event or webinar:

  • Date and time
  • Address (if the event has a physical location) / Indication that event is online (for webinars)
  • Number of participants

Image

While choosing the image, be mindful of the image ratio and how the image will be cropped to the designated area. 

Image ratio: 1:1

Headline

Character limit: 40

Max 3 lines of text, on 360px screens

Colorways

Upcoming/Past events label

Above the title, there is a label presenting whether the event will happen in the future or if it already took the place. 
The upcoming events should have a label in red color, while the past events should use dark grey. 

When to use

This module should be used on event and webinar pages. The module will display all relevant information about an event or webinar above the fold ensuring it is the first thing a customer sees when they land on the page.

Examples of use

Do's and Don'ts

DO: Use the reduced styling (not capitalised) for event/webinar title.

DON’T: Use the capitalised letters for event/webinar title.

DON’T: Use the expressive styling for the event/webinar title.