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
showQuoteandshowStatindependently for every item in the showcase. - Touch-Friendly Carousel: Responsive carousel navigation with smooth slide transitions.
Adding Items
- Insert the Visual Showcase block into the editor.
- In the block inspector (right sidebar), locate the Items control panel.
- Click Add Item to create a slide.
- 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
| Setting | Type | Default | Description |
|---|---|---|---|
autoplay | Toggle | true | Enable automatic slide advancement. |
autoplayDelay | Number | 5000 | Delay between slides in milliseconds. |
showNavigation | Toggle | true | Display previous and next navigation buttons. |
enableScrollAnimation | Toggle | true | Reveal items with a fade-and-scale effect on viewport enter. |