Product Overview
Figma Component: 22867-861370
GitHub Issue: #73
Last modified with commit 1c14369 on
by Aljaž.
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.
Functional Documentation
| Role | Scenario | Description |
|---|---|---|
| system | Display product title and description | Shows large heading and expandable description text with "Show more" button to reveal full content. |
| system | Display anchor navigation cards | Shows 3 cards with large numbers, descriptive text, and yellow scroll-down icons. Cards link to sections further down the page. |
| system | Display selling points section | Shows section title and list of feature cards. Each card has image, bold title, and description text. |
| system | Display what's included list | Shows section title and list of included items with green checkmarks. Extra/add-on items marked with orange plus icon and underlined text (clickable). |
| system | Display gallery section | Shows section title and gallery preview component with image grid and optional video embed. |
| editor | Add product title and description | Set main product title. Add description text that can be expanded/collapsed. |
| editor | Configure anchor cards | Set number, label text, and target section ID for each navigation card. |
| editor | Add selling points | Set section title. Add feature cards with image, title, and description. Cards can be reordered. |
| editor | Configure included items | Set section title. Add included items (with checkmarks) and optional extra items (with plus icons and underline). |
| editor | Add gallery | Set gallery section title. Choose gallery images and optional video. |
| user | Expand description | Click "Show more" button to expand full description text. |
| user | Navigate via anchor cards | Click anchor card to scroll to corresponding section on page. |
| user | View gallery | Click gallery preview to open full gallery lightbox or video player. |
Properties
Responsive (Variant)
| Value | Example |
|---|---|
| Desktop |  |
| Mobile |  |