Featured Events Grid - UI Mockup

Interactive prototype for the [featured-events] shortcode component. This mockup demonstrates both grid and slider variants.

Grid Variant (4 columns)

TDW
Road Race

Tour de Worcester 2025

Sat, 15 Mar 2025
Worcester, Western Cape
SH
MTB

Slanghoek MTB Challenge

Sat, 22 Mar 2025
Slanghoek Valley, Western Cape
BW
Trail Run

Breede River Trail Run

Sun, 06 Apr 2025
Rawsonville, Western Cape
WG
Gravel

Wellington Gravel Grinder

Sat, 19 Apr 2025
Wellington, Western Cape

Slider Variant (Splide.js)

Component Specifications

Shortcode [featured-events]
Attributes count="4" - Number of events to display
layout="grid|slider" - Display mode
category="road-race" - Filter by category
columns="4" - Grid columns (2-4)
Responsive Breakpoints Desktop (>1024px): 4 columns
Tablet (768-1024px): 3 columns
Mobile (<768px): 2 columns
Small (<480px): 1 column
Card Dimensions Image aspect ratio: 16:9
Card border radius: 12px
Padding: 1rem
Slider Options Auto-play: 5 seconds
Pause on hover: Yes
Touch/swipe: Enabled
Navigation: Arrows + dots
Category Badge Colors Road Race MTB Trail Run Gravel
Dependencies Splide.js v4.1.4 (slider variant only)
No jQuery dependency