Component Showcase Grid (GridComponentShowcase)

Live demo

At a glance

Component: GridComponentShowcase
Category: Grids & Listings
Used as: Page block — “Grid: Component Showcase”
Options: 6 editable fields
Built with: PHP, Twig, SCSS, JavaScript
Platform: WordPress · Flynt theme · Timber/Twig · ACF Pro

About this component

The grid you are browsing. It lists the entries of the Components post type with media (or a code-name placeholder), category, option count and a JavaScript flag, each linking to the component’s page with its live demo and option table.

Highlights

Client-side category filter with counts and a live result count for screen readers.
Optional limit plus a “View all components” link for teaser sections.
Option counts are read from each component’s code, so they never go stale.

Options

Editors add this as Grid: Component Showcase in a page's components. Every field it exposes:

Option	Field	Type	Details
Eyebrow	`eyebrow`	text	Default: FlyntWP Component Library
Heading	`heading`	text	Default: Showcase
Intro	`intro`	textarea	Default: Custom FlyntWP components built for this site — each one ACF-driven, accessible and tuned for Core Web Vitals.
Show Category Filter	`showFilter`	true false	Default: on
Limit	`limit`	number	Default: 0 Show only the first N components (0 = all).
Show "View all components" link	`showArchiveLink`	true false	Default: on Shown when a limit hides some components.

Under the hood

Components/GridComponentShowcase/

_style.scss Styles (SCSS) 156 lines
functions.php Fields & data (PHP) 99 lines
index.twig Markup (Twig) 61 lines
script.js Behaviour (JavaScript) 31 lines

Share this component

Built by

Christopher Alberto · Senior WordPress Engineer

Senior WordPress engineer with a decade-plus of builds across New Zealand, Australia, the UK, the US, Canada and Germany — FlyntWP, Roots/Sage, WooCommerce and custom platforms, built for speed and maintainability.

LinkedIn GitHub