Features Breakdown: Masonry Reviews Grid

This section creates a dynamic, Pinterest-style grid layout that automatically adjusts to fit reviews of varying lengths without unsightly gaps. It includes advanced media handling and "Read More" functionality for long content.

1. Intelligent Masonry Grid

• Gap-Free Layout: Uses a JavaScript-enhanced CSS grid (Masonry) to vertically stack cards, ensuring a compact and professional look regardless of text length.

• Responsive Columns: Full control over the number of columns for Mobile (1-3), Tablet (1-3), and Desktop (1-5).

• Container Width: Options to use the Theme Default, a fixed Container, or a fully Custom Width with adjustable padding.

2. Review Card Styling

• Backgrounds: Supports solid colors or fully customizable Gradients (2 colors + angle).

• Borders & Shadows: Adjustable border width, color, and corner radius (rounded corners). Shadow intensity is adjustable to create depth.

• Hairline Fix: Specific optimization to ensure borders look crisp on all devices, including high-DPI screens.

3. Advanced Media & Images

• 8 Image Formats: Native support to style customer photos as:

  • Original, Square (1:1), Circle, Rounded Corners.

  • Cinema (16:9), Portrait (3:4).

  • Polaroid (rotated with white border).

  • High Shadow (elevated look).

• Desktop Layout: On desktop, cards with images automatically switch to a split layout (Image Left / Text Right) with adjustable image width percentage.

4. Typography & Content Control

• Responsive Sizing: Independent font size controls (in pixels) for Mobile and Desktop for every text element: Main Heading, Subheading, Review Quote, Body Text, Author Name, and Meta Data.

• Fonts: Ability to inherit theme fonts or define specific font families for Headings vs. Body text.

• Review Details: Blocks support Star Rating (0-5), Author Avatar, Date, Source (e.g., "Google"), and a clickable Product Link (CTA).

5. User Experience & Interaction

• Text Truncation: Automatically truncates long reviews based on a word limit (adjustable separately for Mobile/Desktop). Adds a "Read More" link to expand text in-place.

• Load More Button: A "Show More" button loads reviews in batches (avoiding long page loads). The button supports Gradients, custom radius, and font weights.

• Progress Bar (Desktop): For cards with images and long text, a subtle progress bar appears to indicate scrollable content within the card.

6. Visibility & Spacing

• Device Hiding: Option to hide the entire section on Mobile or Desktop.

• Spacing: Adjustable Grid Gap (space between cards) and section top/bottom padding.