Default card
A surface for grouped content. Composed from one base class.
Reference
Components
27 components, all driven by styles/tokens.css. At build time
the deploy pipeline tree-shakes components.css so each client site ships only
the blocks it actually uses — no unused CSS sent over the wire.
1 · Button
2 · Form field
We'll only use this to send you the digest.
Letters, numbers, and dashes only.
3 · Card
Featured new
Same component, emphasised with a modifier.
5 · Modal
7 · Alert & Toast
Heads up
Static, inline messaging that stays on the page.
Saved
Your changes have been stored.
Payment failed
Update your card and try again.
8 · Table
| Name | Method | Status |
|---|---|---|
| Ethiopia Yirgacheffe | Pour over | Ready |
| Colombia Huila | Aeropress | Steeping |
| Sumatra Mandheling | French press | Cold |
9 · Tabs
Arrow keys move between tabs; the panel follows. WAI-ARIA tabs pattern.
18g in, 300g out, 2:30 total.
Bright, floral, citrus finish.
10 · Badge
Neutral
Brand
Active
Pending
Failed
12 · Grid system
A 12-column grid: .grid-12 container + .col-span-N children.
Columns collapse to full width below 640px. Add .gap-sm / .gap-lg to change the gutter.
See the grid system page for the full column reference and responsive tiers.
col-span-12
col-span-6
col-span-6
col-span-4
col-span-4
col-span-4
col-span-8
col-span-4
13 · Icons
Dependency-free SVG sprite (assets/icons.svg). Icons inherit text colour
via currentColor and scale with font size. Decorative icons get aria-hidden="true";
standalone icon buttons need an accessible label.
See the icons page for the full set.
14 · Carousel
Horizontal scroll-snap. No JS required — .carousel__controls buttons can be wired up as progressive enhancement.
15 · Accordion
Native <details>/<summary> — works with zero JavaScript.
Do I need to book in advance?
We recommend booking at least 48 hours ahead, especially at weekends. Walk-ins are welcome when we have availability — call ahead to check.
What should I wear to class?
Comfortable, breathable clothing you can move freely in. We provide mats — just bring a water bottle and an open mind.
What is your cancellation policy?
Cancel or reschedule up to 24 hours before your appointment at no charge. Late cancellations within 24 hours incur a 50% fee. No-shows are charged in full.
Do you offer gift vouchers?
Yes! Gift vouchers are available in any amount and never expire. Purchase in-studio or contact us and we'll post one out.
Is parking available nearby?
There is free street parking on the adjacent roads after 6 pm. The nearest pay-and-display car park is a 2-minute walk — look for the signs on Main Street.
16 · Pricing table
Use .pricing__plan--featured to highlight the recommended plan.
Starter
€49 /mo
Perfect for sole traders getting online.
- Single-page website
- Enquiry form (Basin)
- GDPR consent banner
- Stripe payments
- Booking scheduler
Growth Popular
€99 /mo
For service businesses ready to take bookings and deposits.
- Multi-page website
- Enquiry form (Basin)
- GDPR consent banner
- Stripe deposit payment
- Booking scheduler embed
Pro
€179 /mo
Full suite with PoS integration and review management.
- Everything in Growth
- Google Reviews feed
- Map & Eircode block
- PoS deep links (Square / SumUp)
- Priority support
17 · Stats
Key numbers at a glance. All token-driven — no hardcoded colour.
12+
Years experience
500+
Happy clients
4.9
Google rating
Based on 148 reviews
Same day
Appointments available
18 · Timeline
How it works — or a brand story. Dot + line column; last item's line is hidden.
Step 1
Get in touch
Fill in the enquiry form or call us directly. We respond within one business day.
Step 2
We call you back
A quick 10-minute chat to understand what you need — no jargon, no hard sell.
Step 3
We send a proposal
Fixed price, no surprises. You approve it before we start any work.
Step 4
We get to work
Your site goes live within 5–10 business days. We handle hosting and walk you through everything.
Ongoing
You're never on your own
Monthly check-ins, updates when you need them, and a real person to call.
19 · Team
Initials fallback when no photo is available — swap in an <img> and it fills the circle.
SR
Siobhán Ryan
Lead Therapist
12 years experience in holistic and sports massage. ITEC certified.
CO
Ciarán O'Brien
Studio Manager
Keeps things running smoothly so the therapists can focus on you.
AM
Áine Murphy
Yoga Instructor
Yoga Alliance certified. Classes for all levels from beginners to advanced.
20 · Features
Icon + title + body. Icon uses .feature__icon with brand-tinted background.
GDPR-ready by default
Consent banner, no pre-ticked boxes, and a clear privacy policy hook — built in from day one.
Online booking
Connect Acuity, Calendly, or Cal.com. The scheduler loads only after consent — fast and cookie-safe.
Google Reviews feed
Cached review cards pulled once nightly — no live widget, no third-party cookies, no tracking.
Eircode map block
Your address always shows. The Google Maps embed loads on consent, never before.
Stripe deposits
One payment link, one button. Card details never touch the site — Stripe handles everything.
Enquiry form
Spam-filtered, consent-recorded, and wired to Basin. Works without JavaScript.
21 · CTA section
Use .cta--filled for a brand-tinted background. Works standalone or inside a .container.
Ready to book your appointment?
Spaces fill up fast — especially at weekends. Lock in your time now and pay your deposit online in under a minute.
22 · Steps / process
Auto-numbered via CSS counters — no manual numbers in the HTML.
Get in touch
Fill in our short enquiry form. Takes 60 seconds — no account needed.
We call you back
A quick chat to confirm what you need and answer any questions.
We get to work
Your site goes live within 5–10 business days. We handle everything.
23 · Testimonial
Large pull-quote style. Distinct from .review which is compact card-sized.
I'd been putting off getting a website for two years. Kleaver had mine live in a week — bookings through the site have already paid for themselves three times over.
NF Niamh Flynn Gloss Nail Studio, Galway
24 · Progress bar
Set --progress as an inline custom property. Colour modifiers available.
Customer satisfaction97%
On-time delivery94%
Repeat bookings82%
25 · Avatar group
Stacked overlapping avatars — social proof at a glance.
SR
CO
AM
+197
Join 200+ businesses already using Kleaver
26 · Divider
Horizontal with optional label text. Vertical variant for inline separation.
or
Services
Pricing
Contact
27 · Skip link
Keyboard-only accessibility aid. Invisible until focused — press Tab at the top of any page to reveal it. Add it as the very first element inside <body>.
Pattern only — not rendered here
The skip link on this page is off-screen until focused. Tab to the top of the page to see it jump into view.
<!-- First element inside <body> -->
<a class="skip-link" href="#main">Skip to content</a>
<!-- Target -->
<main id="main"> … </main>