The widget library for WordPress is here Download plugin

Electric Geometric Quote Card

Inject energy into your layout with the Electric Geometric Quote Card, a high-contrast testimonial component designed for brands that refuse to blend in. Drawing inspiration from modern "Tech Brutalism" and Cyberpunk aesthetics, this widget replaces standard, boxy reviews with a dynamic, architectural statement piece.

The design is anchored by a chamfered (cut-corner) container rendered in a vivid, electric blue (#2400ff). This geometric edge is created using advanced CSS clip-path technology, giving the card a sleek, futuristic silhouette that looks sharp on any screen. Inside, a neon green (#00ff88) quote icon serves as a visual anchor, guiding the eye to the typography. The layout utilizes a split-panel approach: the left side houses the testimonial text and author credentials, while the right side features a flush-mounted image area for a portrait or case study photo.

This widget is fully responsive and editable. On desktop, it creates a sophisticated horizontal profile with overlapping visual elements. On mobile devices, it intelligently stacks, ensuring the text remains legible and the image remains impactful without breaking the layout. It is the ideal choice for SaaS platforms, Fintech startups, Web3 projects, and creative agencies looking to showcase social proof with a bold, modern voice.

Key Features:

  • Chamfered Edge Design: Features a custom CSS clip-path that cuts the top-right corner, creating a unique, non-rectangular shape that stands out.
  • High-Voltage Palette: Pre-configured with a "Vivid Blue" and "Neon Green" color scheme that drives high visual engagement and contrast.
  • Split-Panel Layout: A balanced asymmetrical grid that pairs persuasive copy with humanizing imagery (author photos).
  • Scalable Vector Icon: Includes a built-in SVG quote mark that automatically inherits the accent color for perfect consistency.
  • Responsive Stacking: The complex geometric shape simplifies automatically on smaller screens to maintain a clean, vertical reading flow.

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.