Icon Boxes
Figma Component: 20982-114065
Last modified with commit 51d9a21 on
by Sara Deric.
The Icon Boxes component displays a grid of numbered icon-based process steps. Shows the booking flow steps (choose, upgrade, pay, enjoy) with optional CTA button.
Functional Documentation
| Role | Scenario | Description |
|---|---|---|
| system | Display process steps | Shows numbered icon boxes in a grid, each explaining one step or feature. Number of boxes is flexible (typically 4-8). Grid layout adjusts based on viewport size. |
| system | Display with CTA button | When displayed on main pages (home, why pages), includes a CTA button below the icon boxes linking to experiences archive or other destination. |
| system | Display without CTA button | When displayed on archive or template pages, shows only the icon boxes without CTA button. |
| editor | Configure boxes | There are two fixed variants - ecommerce (4 boxes showing booking process steps) and catalog (8 boxes showing features/benefits). Both the number of boxes and content are fixed per variant type and cannot be edited. An optional CTA button can be added below the boxes. |
| user | Click box | When link URL is present, CTA button is clickable and navigates to destination. See hover state on hover. |
Properties
Has CTA Button (Variant)
| Value | Example |
|---|---|
| With CTA |  |
| Without CTA |  |
Responsive (Variant)
| Value | Example |
|---|---|
| Desktop |  |
| Mobile |  |