Icon with text

Overview

The Icon with text block makes important information stand out by combining an icon with a clear, concise message. This block is ideal for highlighting unique features, essential benefits, or calls to action. By pairing visual elements with direct text, you increase both engagement and user understanding.

⚠️ Important: Place the Icon with text block in strategic areas to spotlight your key selling points and ensure customers never miss what matters most.

Available in sections

You can use the Icon with text block in these sections:

1. Product information

2. Hero

Key components and functionality

Block introduction

The Icon with text block delivers messages with impact using recognizable icons paired with straightforward text. This combination draws attention and helps visitors process key points very quickly.

Main content settings

Shape the look and feel of the Icon with text block to fit your brand and communication style by adjusting the core settings described below.

1. Icon

   1. Provide the identifier for the icon that should display next to your message.

   2. There is no default; you must specify an icon for it to appear.

2. Text

   1. Enter a short message that explains the feature, benefit, or offer.

   2. The default value is Feature or unique selling point.

   3. Use concise, clear language for best results.

3. Link

   1. Add a URL to make the whole block clickable, leading users to related information or another page.

   2. If left blank, the block works as a static visual—no click action is available.

4. Open link in a new tab

   1. Activate this if you want the link to open in a separate browser tab.

   2. The default state is off; links open in the same tab unless changed.

Alignment settings

Alignment controls determine how the Icon with text block appears on both desktop and mobile, helping you maintain strong layout and readability everywhere.

1. Desktop alignment

   1. Set the content’s horizontal alignment specifically for desktop screens.

   2. Proper alignment ensures a balanced, professional appearance on large displays.

2. Mobile alignment

   1. Configure the content’s horizontal alignment for mobile devices.

   2. Adjust as needed to preserve readability and prevent layout issues on smaller screens.

Visibility settings

Visibility choices let you decide when and where the block should display, offering device-level control to refine your user experience.

1. Visibility

   1. Do not hide — shows the block on all devices. The default is do not hide.

   2. Hide on desktop — hides the block from desktop view.

   3. Hide on mobile — hides the block from mobile view.

Usage notes

1. Select icons that are visually clear to help your message stand out instantly.

2. Maintain strong contrast between icons, text, and the background to promote maximum readability and accessibility.

3. Adjust alignment for desktop and mobile separately so the block continues to look polished everywhere.

4. Turn on the open-in-new-tab option for external links or when you want visitors to stay on your page.

5. Use visibility controls to reduce clutter and ensure the right content is shown on the right device.

💡 Tip: Pair high-contrast icons with straightforward, brief text. Always check your Icon with text block on both desktop and mobile to confirm it looks its best everywhere.