Icon with text
The Icon with Text block displays a set of icons or images paired with short text labels to highlight key product benefits or features. It helps communicate important information quickly through visual cues.
This block improves scannability and enhances the overall user experience by combining visuals with concise messaging.
Multiple icon-text items can be used to emphasize different aspects of the product.
Settings
| Setting | Type | Description |
|---|---|---|
| Layout | select | Controls the layout direction of the items: Horizontal or Vertical. |
| Icon 1–3 | select | Choose an icon from a predefined list using a dropdown menu. |
| Image 1–3 | image | Optionally upload a custom image to replace the icon. |
| Heading 1–3 | richtext | Defines the text displayed below or next to each icon or image. |
Switch between Horizontal and Vertical layouts to control how items are displayed.
Vertical:
Stacks items vertically for a clean, column layout.
Horizontal:
Displays items side by side in a single row.
Pick an icon from the dropdown to visually support each item.
Changes are reflected in real time in the preview.
Notes
- Icons can be selected from a built-in library or replaced with custom images.
- If both an icon and image are set, the image is typically prioritized.
- Use short and clear text (2–3 words recommended) for better readability.
- The layout can be adjusted to fit different section designs (horizontal or vertical).
- Leaving the heading empty may hide the corresponding item, depending on the layout.