Blocks
Visual Showcase

Visual Showcase (alonepro/visual-showcase)

The Visual Showcase block is an interactive carousel engineered for highlighting key charity programs, field initiatives, and beneficiary stories. Each slide pairs a full-width or wide featured photograph with an overlaid donor/beneficiary testimonial quote card and an impact statistic badge.


Key Features

  • Integrated Quote Cards: Display an avatar, quote excerpt, and author attribution alongside project photography.
  • Statistic Highlights: Highlight verifiable outcomes (e.g. 12,400+ / Clean Water Wells) directly on each slide.
  • Independent Card Visibility: Toggle showQuote and showStat independently for every item in the showcase.
  • Touch-Friendly Carousel: Responsive carousel navigation with smooth slide transitions.

Adding Items

  1. Insert the Visual Showcase block into the editor.
  2. In the block inspector (right sidebar), locate the Items control panel.
  3. Click Add Item to create a slide.
  4. For each item, configure:
    • Image: Select or upload the featured showcase image.
    • Quote Section:
      • showQuote: Toggle quote card visibility.
      • quoteText: The testimonial or beneficiary story.
      • quoteAuthor: Name and role of the speaker.
      • quoteAvatarUrl: Author profile photograph.
    • Stat Section:
      • showStat: Toggle statistic badge visibility.
      • statValue: Numeric metric (e.g. 98%, $2.4M).
      • statLabel: Descriptive caption beneath the stat.

Block Inspector Settings

SettingTypeDefaultDescription
autoplayToggletrueEnable automatic slide advancement.
autoplayDelayNumber5000Delay between slides in milliseconds.
showNavigationToggletrueDisplay previous and next navigation buttons.
enableScrollAnimationToggletrueReveal items with a fade-and-scale effect on viewport enter.