Design System
Components
One isolated preview per block. Click into any component to see it rendered with fixture data at the full page width.
article-grid
Article Grid
Dynamic posts-listing block: a responsive 3-up grid of article cards (reused verbatim from the card unit) with an auto category-filter tab bar, a search pill, and "Load more" pagination. The first page is server-rendered; filter/search/load-more go through the /api/posts Route Handler — no GraphQL client ships to the browser. Preview renders the client island directly from fixture data.
bento-grid-section
Bento Grid Section
Flexible CSS-grid card layout. 12 cols desktop, 2 tablet, 1 mobile. Each card carries its own size (small/medium/large/wide/tall/full), style (content/image-cover/mockup/service-card/feature-card), alignment and background recipe — produces every bento pattern from one block.
button
Button
Standalone CTA link rendered as <a>. Six variants (primary / blue / dark / outline-light / outline-dark / ghost) × three sizes (sm / md / lg). Outline variants come in two tones so they read on both dark and light Section backgrounds. Preview shows every combination.
button-group
Button Group
Row of 1–5 buttons on the same line. Each button picks its own variant and size, so the group can mix a primary CTA with a secondary/ghost. Wraps to multiple lines on narrow viewports. Preview shows common variant mixes + alignment + count variations.
case-study-highlight
Case Study Highlight
Featured case study card: dark navy shell with eyebrow / gradient headline / body / CTA on the left, and a logo tile + stats tile on the right.
case-study-listing-card
Case Study Listing Card
Listing/index card for a single case study: full-bleed background photo, taxonomy pills top-left, title + body + Read More bottom-left, frosted-glass stats overlay bottom-right.
client-logo-showcase
Client Logo Showcase
A centred row of white client logos over a fixed dark gradient backdrop. No title — logos are sourced from the global Clients Logo options page.
heading
Heading
Generic page heading with inline markdown-style expressions: `**text**` renders a horizontal gradient fill, `` `text` `` renders a gradient underline. Pick a tone (light/dark), size (h1/h2/h3) and alignment.
image
Image
Standalone image block. Optional caption + optional link wrap. Alt text falls back to the WP media library; an override field is exposed for per-usage customisation.
intro-statement-section
Intro Statement Section
Marketing intro with centred display headline and a lavender→violet gradient chip on the middle line.
paragraph
Paragraph
Plain-text body paragraph. Editor line breaks are preserved. Tone (light/dark) + alignment.
section
Section
Page-level Section wrapper. Every block inside an ACF Flex Content lives inside one of these — configures background color/pattern/image, outer (vertical) padding, inner max-width, and min-height. This preview renders 13 representative variants stacked.
session-deliverables
Session Deliverables
Section heading above a 3/2/1-column container-query grid of deliverable cards (lavender icon tile + title + caption). Repeater-driven; no CTAs.
strategy-offer-card
Strategy Offer Card
Navy card with a two-part gradient headline, flat Price + Duration stats, translucent RESULT chip, body sentence, gradient CTA pill, and a full-bleed photo column. Collapses to single column with photo on top via container queries.
testimonial-section
Testimonial Section
Interactive social-proof block. Click an avatar to swap the active testimonial card. Block on a page picks slugs from the global Testimonials options page; preview here renders TestimonialCarousel directly with mock fixture rows.
two-column
Two Column Content
Generic two-column container. Editor picks any other block for each column (left + right) and chooses a width ratio (50/50, 40/60, 60/40, 33/67, 67/33). Columns stack vertically below 768px. No outer chrome — relies on the parent Section primitive.
video-hero
Video Hero
Full-bleed hero with an autoplaying, muted, looping HLS background video (adaptive 1080/720/480 streamed via hls.js, native HLS on Safari, hosted on Cloudflare R2) behind an eyebrow / heading / subheading / CTA overlay. Reduced-motion users get the poster.