Service/Product Card Grid

Elevate your offerings with the Vibrant Split-Card Grid, a high-impact layout designed to merge clear messaging with compelling visual storytelling. This widget utilizes a distinct two-part architecture:

Top Content Block: A solid color panel (customizable per card) that houses a pill-shaped category tag, a bold headline with stylized underlining, and a descriptive summary. This ensures your key value proposition is read first.

Bottom Visual Anchor: An image container that visually reinforces the message. It features a seamless Call-to-Action (CTA) overlay at the bottom, complete with a floating SVG arrow button that invites clicks.

The design is characterized by its friendly, modern aesthetic, featuring deeply rounded corners (32px) and a high-contrast color palette (defaulting to a trendy neon yellow accent). Interaction is baked into every element: hovering over the card triggers a subtle lift effect on the container and a smooth zoom on the product image, creating a tactile and responsive user experience.

This widget is incredibly versatile, making it perfect for displaying e-commerce product collections, service packages, or featured blog categories.

Key Features:

• Split-Layout Design: effectively separates text hierarchy from visual media for better readability.
• Deep Rounded Aesthetics: Modern 32px border radius creates a friendly, approachable look.
• Interactive CTA Overlay: Bottom overlay features a text prompt and an SVG arrow button that animates on hover.
• Custom Styling: Includes unique details like pill-shaped tags and CSS-based text underlining.
• Micro-Interactions: Smooth image zoom and card lift effects engage users without being distracting.
• Fully Editable: All text, images, and links are CMS-ready with data-text-editable, data-image-editable, and data-link-editable attributes.
• Responsive Architecture: Uses CSS Grid to flow naturally from a multi-column desktop view to a stacked mobile layout.