Ecommerce Product Hero
Figma Component: 23690-196863
Last modified with commit 74094e5 on
by Martin Jagodic.
Full-screen hero section with video/image background, countdown timer, event title and metadata, and integrated CTA box with pricing and booking options.
Functional Documentation
| Role | Scenario | Description |
|---|---|---|
| system | Display hero with media background | Shows video or image background with dark gradient overlay for text readability. |
| system | Display countdown timer | Shows four boxes (days, hours, minutes, seconds) with semi-transparent backgrounds and white text. |
| system | Display title and metadata | Shows large heading, location with pin icon, and dates with calendar icons. |
| system | Position CTA box | Desktop shows CTA box in right column. Mobile overlaps CTA box below hero content. |
| editor | Select product variant | Choose product determines background media and content. |
| editor | Set event information | Configure title, location, dates, and countdown target. |
| editor | Configure pricing | Set prices, discount percentage, urgency messaging, and button text. |
| user | View event information | Sees hero with countdown, title, location, and dates. |
| user | Take action | Clicks primary or secondary CTA button to book or view offer. |
| system | Display urgency messaging | Shows urgency section with bold title, description, pricing tier arrows, and link. |
| system | Apply responsive spacing | Uses responsive spacing variables for navigation offset, padding, and CTA positioning. |
| system | Apply gradient overlay effect | Background has top and bottom gradients for dramatic lighting and text contrast. |
| editor | Select background media | Choose between auto-play looping video or static image background. |
| editor | Configure countdown timer | Set target date/time. Timer shows days, hours, minutes, seconds with real-time updates. |
| editor | Configure event details | Set title, location, and date ranges (supports multi-week events). |
| editor | Configure pricing and CTA | Set prices, discount percentage, urgency messaging, tier labels, and button text. |
| editor | Choose product variant | Select variant to apply corresponding background and CTA configuration. |
| user | View event information at a glance | Sees hero with title, location, dates, and countdown. High contrast ensures readability. |
| user | Monitor countdown timer | Sees real-time countdown with visually distinct timer boxes. |
| user | Read urgency messaging | Sees early bird pricing message with tier arrows and link for more info. |
| user | View pricing comparison | Sees discounted price next to strikethrough original with discount badge. |
| user | Take action with CTAs | Clicks primary "Reserve now" button or secondary "View offer" button. Reassurance text reduces friction. |
| user | Experience responsive layout | On desktop, user sees cinematic wide layout with CTA box elegantly positioned alongside content. On mobile, CTA box floats above hero creating card-like focus on pricing and action buttons, while hero content remains visible below countdown timer. |
Properties
Responsive (Variant)
| Value | Example |
|---|---|
| Desktop | ![]() |
| Mobile | ![]() |

