Every colour, type style and section the club website is built from. Use the section library to decide what goes on a new page — anything marked Buildable can be added yourself from Pages → Add New → Flexible Page, with no developer needed.
13Buildable sections
12Components
36Design tokens
5Reference only
Start here
Building a new page
Pages are assembled from sections rather than designed from scratch. That is what keeps every page looking like the same club.
1. Create the page
Pages → Add New. In the Page Attributes box on the right, set Template to "Flexible Page".
2. Add sections
Click Add section and pick from the list. Building blocks are generic; Club sections are the ones shown below. Drag to reorder at any time.
3. Alternate the bands
Most sections have a Background choice. Alternate Plain, Cream, Champagne and Deep down the page — never two identical bands in a row.
Foundations
Colour
Greens carry the identity, lime carries the action, gold marks the moment. Everything else is surface and text.
Brand greens
The club's core identity. Primary is the workhorse — buttons, links, headings on light backgrounds. Deep is reserved for full-bleed dark bands.
Primary
--color-primary#0f5132
Buttons, links, active nav
Primary dark
--color-primary-dark#073420
Hover states
Primary deep
--color-primary-deep#042114
Dark band backgrounds
Accent navy
--color-accent#0a2540
Occasional contrast
Accents
Lime is the call-to-action colour — use it sparingly so it keeps its punch. Gold signals something premium or time-sensitive.
Lime
--color-lime#84cc16
Primary CTA buttons
Lime soft
--color-lime-soft#a3e635
Lime hover
Gold
--color-gold#c9a85c
Eyebrow rules, Next-up CTA
Gold soft
--color-gold-soft#d8be7e
Gold hover
Surfaces / bands
Every section sits on one of these. Alternating them is what gives pages their rhythm — never stack two identical bands in a row.
Plain
--color-bg#ffffff
section (no class)
Cream
--color-bg-cream#fffaf0
section.cream
Champagne
--color-bg-champagne#f5f0e6
section.champagne
Sand
--color-bg-sand#ebe6d6
Borders, dividers
Charcoal
--color-bg-charcoal#0d1219
section.deep
Text & lines
Body
--color-text#1c1f24
Default copy
Muted
--color-text-muted#5b6470
Intros, meta lines
Soft
--color-text-soft#8a929c
Timestamps, captions
Border
--color-border#e8e3d4
Card edges
Border light
--color-border-light#efeae0
Subtle dividers
Notices
Warn bg
--color-warn-bg#fef3c7
Inline notices
Warn border
--color-warn-border#f59e0b
Notice rule
Warn text
--color-warn-text#78350f
Notice copy
Foundations
Typography
Two families, strictly divided: Fraunces for every heading, Inter for everything else.
Fraunces — Tennis in the foothills
--font-display · Fraunces, Georgia, serif
All headings. Variable weight — it carries the club's character.
Inter — Tennis in the foothills
--font-body · Inter, system UI, sans-serif
Body copy, buttons, UI. Never use it for headings.
Scale
h1
Tennis in the foothills
Page titles and heroes. One per page.
h2
Four tiers. One welcoming club.
Section headings.
h3
Adult social sessions
Card titles.
h4
Friendly membership
Benefit tiles, compact cards.
p
Members play year-round on four floodlit courts, with coaching for every level from first racket to competitive league tennis.
Body copy at 1rem / 1.7 line height.
Foundations
Spacing & shape
Fixed steps, no in-between values. Consistent spacing is most of what makes a site feel considered.
Spacing
Section padding uses xl to 3xl; gaps inside components use xs to lg. Stick to the scale — don't invent one-off pixel values.
--space-xs0.5rem
--space-sm1rem
--space-md1.5rem
--space-lg2.5rem
--space-xl4rem
--space-2xl6rem
--space-3xl9rem
Corner radius
--radius-sm8px
--radius16px
--radius-lg24px
Elevation
--shadow-cardresting card
--shadow-card-hovercard on hover
--shadow-elevatedmodals, overlays
Layout
--max-width1240px
--header-height80px
Library
Components
The building blocks sections are made of. Each specimen below is live markup using the real stylesheet — expand the code if you need to hand it to a developer.
One primary action per section. Lime is the strongest — reserve it for the thing you most want clicked. Ghost is for secondary actions, invert for use on dark bands.
<a class="btn" href="#0">Book a session</a>
<a class="btn btn--lime" href="#0">Join the club</a>
<a class="btn btn--gold" href="#0">Register</a>
<a class="btn btn--ghost" href="#0">Ask a question</a>
<a class="btn btn--ghost btn--sm" href="#0">All news →</a>
Eyebrow / kicker.eyebrow
The small gold-ruled label above a heading. It names the topic so the heading can be a statement rather than a label. Two or three words, sentence case.
Eyebrow
Why join KPLTC
Show markup
<span class="eyebrow">Why join KPLTC</span>
Section heading.section-heading
The standard opener for any section: eyebrow, h2, and an optional one-line intro. Centred by default.
Full
Membership
Four tiers. One welcoming club.
Join in under five minutes. The committee reviews every application.
Show markup
<div class="section-heading"><span class="eyebrow">Membership</span><h2>Four tiers. One welcoming club.</h2><p>Join in under five minutes. The committee reviews every application.</p></div>
The general-purpose content tile. Three across is the default and reads best; four gets tight below 1100px. Add .card--no-hover for non-clickable cards.
Three-column grid
Tuesdays · 19:00
Adult social
Relaxed doubles, all levels welcome. Just turn up.
<div class="card-grid card-grid--3"><div class="card"><p class="card__meta">Tuesdays · 19:00</p><h3>Adult social</h3><p>Relaxed doubles, all levels welcome. Just turn up.</p><p><a class="card__link" href="#0">See the schedule →</a></p></div><div class="card"><p class="card__meta">Saturdays · 10:00</p><h3>Junior academy</h3><p>Coached groups for ages 6–16, split by age and stage.</p><p><a class="card__link" href="#0">See the schedule →</a></p></div><div class="card"><p class="card__meta">Thursdays · 20:00</p><h3>League practice</h3><p>Match-standard play for our Dublin league squads.</p><p><a class="card__link" href="#0">See the schedule →</a></p></div></div>
Compact icon-led tile for short value propositions. The icon is a single emoji, set aria-hidden — the heading carries the meaning.
Benefits row
🎾
Four floodlit courts
Play year-round, book in seconds from your phone.
🤝
Friendly membership
Social tennis every week — you'll know names by your second visit.
🏆
League tennis
Six teams competing across the Dublin leagues.
Show markup
<div class="benefits"><div class="benefit"><div class="benefit__icon" aria-hidden="true">🎾</div><h4>Four floodlit courts</h4><p>Play year-round, book in seconds from your phone.</p></div><div class="benefit"><div class="benefit__icon" aria-hidden="true">🤝</div><h4>Friendly membership</h4><p>Social tennis every week — you'll know names by your second visit.</p></div><div class="benefit"><div class="benefit__icon" aria-hidden="true">🏆</div><h4>League tennis</h4><p>Six teams competing across the Dublin leagues.</p></div></div>
Member quote with photo and joining year. Designed for the deep band — it inverts automatically there.
Quote
I joined not knowing a soul and had a regular Tuesday four within a month.
Aoife N.
Member since 2019
Show markup
<figure class="testimonial-rich"><blockquote class="testimonial-rich__quote">I joined not knowing a soul and had a regular Tuesday four within a month.</blockquote><figcaption class="testimonial-rich__author"><div><div class="testimonial-rich__author-name">Aoife N.</div><div class="testimonial-rich__author-since">Member since 2019</div></div></figcaption></figure>
Live strip advertising the next scheduled event. Self-sourcing from the Events content type — it hides itself when nothing is coming up.
Banner
Show markup
<aside class="next-up"><div class="container"><span class="next-up__pulse"><span class="next-up__pulse-dot"></span>Next up at KPLTC</span><h3 class="next-up__title"><strong>Club Championship finals</strong> — Sat 6 Sep · 14:00</h3><span class="next-up__time">In 4 days · 18 of 32 spots</span><a class="btn btn--sm btn--gold next-up__cta" href="#0">Register →</a></div></aside>
FAQ item.faq__item, .faq__q, .faq__a
Question and answer pair. Used on the FAQ page; also fine inside a text section.
Q&A
Do I need my own racket?
No — we keep loan rackets at the clubhouse for anyone trying tennis for the first time.
Show markup
<div class="faq__item"><p class="faq__q">Do I need my own racket?</p><div class="faq__a"><p>No — we keep loan rackets at the clubhouse for anyone trying tennis for the first time.</p></div></div>
Form privacy note.form-note
The small line under any form that collects personal details. Rendered by kpltc_form_privacy_note() so the privacy link stays in one place — never hand-write this.
Note
We only use your email to send you club news — unsubscribe anytime. See our Privacy policy.
Show markup
<p class="form-note">We only use your email to send you club news — unsubscribe anytime. See our <a href="#0">Privacy policy</a>.</p>
Every section's inner wrapper is .container (max 1240px). Use .container--narrow for long-form reading. Add .reveal to fade an element in on scroll, and the delay modifiers to stagger a row of three.
Narrow container
Long-form copy sits in a narrower measure so lines stay readable — roughly 70 characters.
Show markup
<div class="container--narrow" style="background:var(--color-bg-cream);padding:var(--space-md);border-radius:var(--radius)"><p style="margin:0">Long-form copy sits in a narrower measure so lines stay readable — roughly 70 characters.</p></div>
Library
Section library
Everything below can be added to a Flexible Page yourself. Each preview is the actual section rendered with sample content — pick the ones you want, then add them by the name shown under "In the page builder".
Hero
Buildable
Full-bleed opener with eyebrow, headline, lede, two CTAs and optional stat row. One per page, always first.
In the page builder
Building block — Hero
Content comes from
You write it
Already used on
Home
Template
parts/hero.php
Why join (benefits grid)
Buildable
Icon-led tiles for short value propositions. Three or six reads best.
In the page builder
Club section — Why join (benefits grid)
Content comes from
You write it
Already used on
Home
Template
parts/benefits.php
Why join KPLTC
A club, not just courts
Four floodlit courts, a full coaching programme and a members' bar that actually gets used.
🎾
Four floodlit courts
Play year-round, book in seconds from your phone.
🤝
Social tennis weekly
Turn-up-and-play sessions — you'll know names by your second visit.
🏆
League teams
Six squads competing across the Dublin leagues.
Membership tiers
Buildable
Pricing cards. Mark one tier as Featured. Set the tier slug to match the Membership page so Apply preselects correctly.
In the page builder
Club section — Membership tiers
Content comes from
You write it — Apply buttons route to the application form and preselect the tier
Already used on
Home, Membership
Template
parts/tier-cards.php
Membership
Four tiers. One welcoming club.
Every application is reviewed by the committee before payment.
Floodlight fees are charged separately at €2 per hour.
Sessions grid
Buildable
Three-across cards with a meta line for day and time. The standard way to list anything scheduled.
In the page builder
Club section — Sessions grid
Content comes from
You write it
Already used on
Home, Sessions
Template
parts/sessions-grid.php
Sessions
Tennis for every level
From first racket to league standard.
Tuesdays · 19:00
Adult social
Relaxed doubles, all levels welcome. Just turn up.
Saturdays · 10:00
Junior academy
Coached groups for ages 6–16, split by age and stage.
Thursdays · 20:00
League practice
Match-standard play for our Dublin league squads.
Coach spotlight
Buildable
Photo beside biography, credentials list and two CTAs. Pick any coach profile; leave the intro blank to use their own bio.
In the page builder
Club section — Coach spotlight
Content comes from
Coach profiles — photo, credentials and email come from the coach entry
Already used on
Home, Coaching
Template
parts/coach-spotlight.php
Coaching team
Meet the head coach
James is a Tennis Ireland Level 1 qualified coach with over 10 years of playing experience and 4 years of coaching players of all ages and abilities. He is an enthusiastic, energetic and professional coach who is passionate about player development and delivering engaging, high-quality, results-focused coaching.
His coaching philosophy focuses on building solid technique, improving tactical awareness, developing match confidence and helping every player reach their potential in a positive and enjoyable environment. Whether you're picking up a racket for the first time, preparing for league competition or looking to elevate your overall game, James creates sessions that are challenging, enjoyable and designed to deliver measurable improvement.
James coaches regularly at KPLTC and also offers private lessons, Cardio Tennis, junior camps and adult coaching programmes through PlayTennis.ie and Cardiotennis.ie.
For private lessons, Cardio Tennis, junior camps and adult coaching programmes, visit: www.playtennis.ie
A perfect Saturday at Foxrock saw both KPLTC sides come away with solid wins. The men's team took it 4–1 on the day, with the ladies edging through 3–2 in a tight finish.
With the programme growing, we're splitting Saturday mornings into three age bands.
May 15, 2026
Newsletter signup
Buildable
Full-width signup band. Usually the last section before the footer.
In the page builder
Club section — Newsletter signup
Content comes from
You write it — submissions go to the club inbox
Already used on
Home
Template
parts/newsletter-band.php
Stay connected
Club news, in your inbox
Match reports, social nights and court closures. About once a month.
We only use your email to send you club news — unsubscribe anytime. See our Privacy policy.
Text block
Buildable
Heading plus rich text on any band. The general-purpose section for prose.
In the page builder
Building block — Text block
Content comes from
You write it
Already used on
Any flexible page
Template
page-flex.php
Card grid
Buildable
Two, three or four cards with optional links. Use when no club section fits.
In the page builder
Building block — Card grid
Content comes from
You write it
Already used on
Any flexible page
Template
page-flex.php
Image + text
Buildable
Image on one side, heading and rich text on the other. Alternate the image side down a page.
In the page builder
Building block — Image + text
Content comes from
You write it
Already used on
Any flexible page
Template
page-flex.php
Call to action
Buildable
Centred heading, line of copy and one button on the deep band. Close a page with it.
In the page builder
Building block — Call to action
Content comes from
You write it
Already used on
Any flexible page
Template
page-flex.php
Library
Reference only
These exist on the site but are tied to one page — usually because there is form handling or a data pipeline behind them. A developer can promote any of them into the page builder if you want them elsewhere.
Reference
Next-up banner
Live event strip. Currently wired to the home page toggle only; ask a developer if you want it on another page.
On: Home parts/next-up.php
Reference
Contact hero with form
Split hero with the enquiry form. Bespoke to the Contact page because of the form handling behind it.
On: Contact page-contact.php
Reference
Membership application form
The full application pipeline: tier selection, family members, proposers, consent. Not reusable — it exists once, by design.
On: Membership Application page-membership-apply.php
Reference
History timeline
Year-by-year club history. Could be promoted to a builder section if you want it elsewhere.
On: About page-about.php
Reference
Committee directory
Grouped contact cards for committee roles.
On: Contact page-contact.php
Contact the team
Enquire
Send a quick note — they'll reply directly to the email you provide.
