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