Product Single
Figma Component: 23108-396776
GitHub Issue: #35
Mobile: View design
Desktop: View design
Last modified with commit f9a8a3c on
by Martin Jagodic.
E-commerce product detail page layout with hero, sticky CTA box, product overview, program details, booking offers, and FAQ sections. Used for travel packages, experiences, and events.
Components
| Name | Description | Mode |
|---|---|---|
| Header | The Header component provides site navigation and branding. Shows brand logo, website switcher dropdown, main navigation menu with dropdown submenus, optional CTA button, and responsive mobile hamburger menu. Main navigation supports up to 2 levels of navigation (main items + one level of submenus/dropdowns). | global |
| Product Hero Slider | The Product Hero Slider displays a rotating carousel of hero images or content at the top of product pages. Features navigation controls and automatic progression through slides. | fixed |
| sticky-cta | fixed | |
| Product Overview | Comprehensive product overview section displaying title, expandable description, anchor navigation cards, selling points with images, what's included list, and gallery preview. Desktop layout uses two-column structure. | fixed |
| Anchor Link Navigation | The Anchor Link Navigation component displays a navigation menu with links to different sections within the same page. Shows section links that smooth scroll to corresponding content when clicked. | fixed |
| Product Program | The Product Program component displays detailed itinerary or schedule for an experience or trip. Shows day-by-day breakdown with activities, timings, and descriptions. | fixed |
| Product Booking Offer | The Product Booking Offer component displays pricing and booking options for a product or experience. Shows package options with pricing, inclusions, and booking buttons. | fixed |
| Product Text Offer | A comprehensive product offer section displaying included items, upgrades, exclusions, and optional package cards with legal disclaimers. Used for detailed product breakdowns and travel packages. | module |
| Product Additional Information | The Product Additional Information component displays supplementary details about a product or experience. Shows organized content sections with headings and descriptions for terms, policies, requirements, etc. | module |
| Product Template FAQ | The Product Template FAQ component displays frequently asked questions specific to a product or experience type. Shows accordion-style Q&A list with expandable answers. | fixed |
| Social Media Cards | The Social Media Cards component displays embedded social media posts or links to social media profiles. Shows cards with social media platform branding, content previews, and links to full posts. | module |
| Social Media Carousel | A full-width section showcasing actual social media posts in a horizontal scrolling carousel, with heading, social media icon buttons, and post preview cards with video/image content. Used to display recent social media activity and encourage users to follow brand's social channels. | module |
| Footer | Multi-column footer section with site branding, navigation links, support information, and related site logos. Adapts across different brand sites (Collegium, Mondial, Collegium CRO, Cooltura) and responsive breakpoints. | global |