The Widget Library for Squarespace is here! Get it now >>

High-Contrast Bold Feature Grid - Text-First Benefit Cards

Free

Command attention and drive conversions with the High-Contrast Bold Feature Grid. Inspired by the industry-leading design systems of top B2B SaaS brands (like Gong), this widget abandons generic stock imagery in favor of bold, authoritative typography and high-impact color blocking.

The design philosophy here is "Content is King." The layout features a responsive grid of tall, substantial cards that alternate between three distinct themes: Deep Purple (Dark), Clean White (Light), and Vibrant Violet (Accent). This rhythm keeps the user engaged as they scan through your value propositions or core benefits.

The standout feature of this widget is its Rich Text Accent Logic. You don't need to be a coder to create emphasis; simply formatting a word as bold within the editor automatically applies a high-contrast accent color (e.g., turning white text to neon purple on a light card). This allows marketing teams to highlight key "power words" instantly. With full Rich Text support, you can include multiple paragraphs, lists, or headers within each card, making it a versatile tool for storytelling.

Key Features:

  • Gong-Style Aesthetic: Replicates the trendy, high-contrast, bold typography look popular in modern tech branding.
  • Automatic Theme Rotation: Cards visually alternate between dark, light, and accent backgrounds to create visual rhythm.
  • Smart Bold Accents: Bolding text (<b> or <strong>) dynamically changes the text color to a high-contrast accent based on the card's theme.
  • Image-Free Design: focuses entirely on copywriting and typography, improving page load speed and readability.
  • Rich Text Enabled: Full control over the content structure—add lists, multiple paragraphs, or varying heading sizes.
  • Editor-Ready: Built with data-slide and data-slide-template attributes to work seamlessly with "Add Item" functionality in visual editors, while maintaining a robust CSS Grid layout on the frontend.

How to use this widget

  • Change your content and adjust the styles to match your design
  • Click export and copy the code
  • Paste it on your web page by adding a code/html block in your website builder (e.g., Squarespace, WordPress, Webflow, Wix) and paste the code.

đź‘‹ P.S. Have questions? Leave a comment.