Ecommerce Product Hero
Figma Component: 23690-196863
Last modified with commit dcfcf93 on
by Sara Deric.
Full-screen hero section with 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 section | Displays full-screen hero with image background and gradient overlay (top and bottom for dramatic lighting and readability). Shows optional countdown timer with four boxes (days, hours, minutes, seconds) with semi-transparent backgrounds, heading, location with pin icon, dates with calendar icons, and urgency messaging with tier arrows. Uses responsive spacing variables for navigation offset, padding, and CTA positioning. On desktop, positions CTA box in right column. On mobile, overlaps CTA box below hero content. |
| editor | Configure display | Set event title, location, dates, optional countdown timer and background image. |
| user | View event information | Sees full-screen hero with high contrast countdown timer, title, location, dates, early bird pricing message with tier arrows, and pricing comparison with discounted price, strikethrough original, and discount badge. Responsive layout shows two-column layout on desktop with CTA box alongside content, or card-like floating CTA box on mobile with hero content below. |
| user | Take action | Clicks primary "Reserve now" or secondary "View offer" button. |
Properties
Responsive (Variant)
| Value | Example |
|---|---|
| Desktop |  |
| Mobile |  |