Icon Box Widget

🎯 Purpose

The Icon Box widget provides a compact, stylish combination of an icon, headline, description, and optional link. It’s ideal for showcasing features, services, benefits, or highlights in a visually engaging format.

⚙️ Core Features & Setup

• Content Setup

  • Upload or select an icon.

  • Enter a headline and description.

  • Optionally add a link to the entire box or specific elements, with the choice to open in a new tab or apply nofollow.

• Icon Positioning

  • Position the icon above, to the left, or to the right of the text for flexible layout options.

• HTML Tag for Headline

  • Choose a suitable tag (H1–H6, DIV, SPAN, or P) for semantic accuracy and SEO optimization.

🎨 Style Customization

Icon Styling

• Configure icon color, size, padding, and spacing from the text.

• Choose background shapes—circle, square, or custom radius—and set hover color effects.

• Apply border, border radius, and CSS filters (e.g., blur or brightness) for added style.

Title & Description

• Customize typography: font size, weight, spacing, transformation, decoration, and shadow.

• Set text colors for both normal and hover states.

• Define spacing between headline and description to enhance readability.

Box Design

• Style the container’s background, border, shadow, padding, and corner radius.

• Use hover effects to animate box or content areas for interactive feedback.

🛠️ Advanced Controls

• Responsive Settings

  • Tailor icon size, text styling, padding, and layout separately for desktop, tablet, and mobile views.

• Motion & Animation

  • Add entrance motions or scroll effects to draw attention as users navigate.

• Layout & Positioning

  • Fine-tune margin, z‑index, positioning, HTML attributes, and add custom CSS classes for deeper layout control.

✅ Best Practices

• Choose icons that represent your content clearly and enhance understanding.

• Maintain consistent alignment and spacing across similar icon boxes for visual harmony.

• Use hover animations sparingly for subtle emphasis without distraction.

• Select semantic headline tags (like H2 or H3) to support accessibility and structure.

• Preview across devices to ensure responsiveness and readability.

📌 Ideal Use Cases

• Feature or service presentations on landing pages.

• Step-by-step process highlights or solution overviews.

• Team member profiles or service category showcases.

• Interactive grid layouts or call-to-action blocks on websites.

The Icon Box widget offers a flexible, visually engaging way to present icon-based content with headline, text, and optional interactivity.