PawCare Docs
Everything you need to set up, edit, and launch the PawCare theme — theme settings, page templates, every module, and the design guidelines.
Getting Started
Introduction
What PawCare is
PawCare is a HubSpot CMS theme for veterinary clinics and animal hospitals — neighbourhood practices, multi-vet clinics, and companion-animal care teams. It pairs a Fraunces display serif with an Inter body face over a warm ivory palette, with a sage-green primary accent and a terracotta complementary accent used for buttons, links, badges, and active states.
Everything you see on the demo site is built from drag-and-drop modules. There is no hardcoded content in the templates — copy, photos, services, hours, and appointment settings are all edited in HubSpot’s page editor and theme settings.
Who it is for
- A single clinic that needs a Home, Services, About, and Appointments flow.
- A practice that also takes appointment and general enquiries through a form.
- Clinics that want a structured list of services and wellness plans with search-engine-readable markup.
- Anyone who wants to run a small blog or journal alongside the main site.
What is in the theme
- 24 modules — heroes, navigation, footer, a services grid, wellness plans, lead vet bio, story rows, galleries, reviews, hours, location map, two appointment modules, an enquiry form, FAQ, team grid, icon points, and the blog modules.
- 6 page templates — Home, Services, About, Appointments, and Contact, plus this documentation page.
- Two layouts —
base.html(with global header and footer) andbase_lp.html(landing pages, no chrome). - One theme-settings panel — colours, fonts and type scale, spacing, radius, elevation, buttons, borders, and global brand fields.
Design principles
Three ideas run through the theme: a warm ivory background instead of stark white, a serif display face for headings that reads calm and reassuring, and restraint with the accent colour so the sage green always means something (an action, a link, or the current item). The terracotta accent is a secondary highlight. Motion is limited to gentle scroll reveals that fire once.
Upload & Install
Upload with the HubSpot CLI
From the project root, upload the theme folder to your portal:
hs upload studionope-pawcare studionope-pawcare --portal=<your-portal>Once the upload finishes the theme appears under Settings > Content > Themes as “PawCare”.
Live editing while you work
To sync changes automatically as you edit files locally:
hs watch studionope-pawcare studionope-pawcare --portal=<your-portal>First-run checklist
- Open Edit theme settings and confirm the colours, fonts, and logo (see the Theme Settings section).
- Upload your logo and favicon under the Global group.
- Set a default social-share (OG) image.
- Create your first page from one of the templates (see Create Your First Page).
A note on images
The demo ships with Unsplash placeholder photography. Replace those with your own clinic, animals, and team before launch — see Best Practices > Replacing Placeholder Images.
Page Templates
Available templates
When you create a page you choose one of the PawCare templates. Each one is a starting arrangement of modules with sample copy you can keep, edit, or remove.
| Template | Purpose |
|---|---|
| Home | The landing page: full hero, ethos points, a snapshot of services, lead vet bio, gallery, reviews, hours, location, and an appointment band. |
| Services | The clinic’s services using the Services Grid module, plus wellness plans. |
| About | The story of the clinic — story rows, lead vet bio, ethos points, team, and gallery. |
| Appointments | The booking page — the Appointment Request module, hours, and the location map. |
| Contact | Enquiry form plus the location map and contact details. |
| Documentation | This page — a simple rich-text page built from the Page Hero and Rich Text modules. |
Layouts behind the templates
Every template above extends base.html, which renders the global header and footer. The two landing-page layouts extend base_lp.html, which drops the header and footer for focused, single-goal pages.
Create Your First Page
Steps
- Go to Marketing > Website > Website Pages and click Create.
- Pick a PawCare template (start with Home).
- Give the page an internal name and set its URL slug — match the demo scheme if you like, e.g.
/services,/about,/appointments. - Click each section to edit it. The module’s fields open in the right-hand sidebar.
- Set the page title and meta description under Settings for SEO and social sharing.
- Publish.
Editing modules in place
Click any section on the page to select its module. Content lives in the Content tab of the sidebar; visual options (surfaces, columns, alignment, accent colour, fonts, padding) live in the Style tab.
Adding sections
Drag a new module from the left-hand panel into any drop zone. Every module in the Modules Reference is available to drop onto any page.
Header & Footer Content
Global partials
The header and footer are global — edit them once and the change applies to every page. The header renders the Navigation module; the footer renders the Footer module.
Editing the header
The Navigation module holds your nav links, the Book button, an optional phone link, and an optional open/closed status pill. On the Home page it can sit transparent over the hero and switch to a solid bar once you scroll.
Editing the footer
The Footer module is where your name, address, phone, email (NAP), opening hours, quick links, social links, optional newsletter form, and legal links live. It is also where the VeterinaryCare / LocalBusiness structured data is emitted — see SEO & Schema.
Logo and favicon
Your logo, logo height, favicon, and default social-share image are set once in Theme settings > Global and reused across the header and footer.
Theme Settings
Colors
How colours work
Each colour in theme settings maps to a --h-* CSS variable that the whole theme reads. Hex values are converted to rgba where opacity matters (borders, the hero overlay), so set both the colour and its opacity for those fields.
| Setting | Controls |
|---|---|
| Page background | The base page surface (--h-bg), default warm white. |
| Card / panel surface | Cards, form panels, the appointment panel. |
| Soft section background | Alternating “soft” sections used to separate bands. |
| Input fill / hover row | Input fills and hover-row backgrounds. |
| Primary / Secondary / Muted text | The three-step text hierarchy used everywhere. |
| Hairline / Stronger / Input border | The three border weights (colour + opacity). |
| Accent (sage green) | The primary accent: buttons, links, active nav, badges. |
| Accent hover / Accent soft | Darker hover sage and the faint accent tint for chips and active backgrounds. |
| Secondary accent (terracotta) | The complementary highlight used sparingly alongside the sage primary. |
| Dark surface / on-dark text + muted | The footer and any dark band, plus their text colours. |
| Hero image overlay | The scrim over hero photos (colour + opacity). |
| Form success / error | Validation states. |
Dark surfaces
Sections marked dark (the footer, the dark appointment band) remap the tokens automatically, so your accent and text stay legible without setting separate values.
Typography & Type Scale
Fonts
Two font fields drive the theme: Heading font (Fraunces by default) for display type and headings, and Body font (Inter) for everything else. Both are loaded from Google Fonts by the base layout.
Size and rhythm
| Setting | Effect |
|---|---|
| Base body font size | Root body size in px (14–20, default 16). |
| Base line height | Body line height (1.3–1.9, default 1.6). |
| Uppercase label tracking | Letter-spacing for eyebrows and small uppercase labels. |
| Link underline style | Body links: no underline (sage on hover) or underlined. |
The fluid type scale
Headings use a fluid clamp() scale that grows with the viewport, so you do not set heading sizes per page. The steps are display, h1, h2, h3, h4, a lead size for intros, the body size, plus dedicated sizes for small text and eyebrows.
Spacing & Layout
Settings
| Setting | Effect |
|---|---|
| Base spacing unit | The smallest spacing step (2–8px) the scale is built on. |
| Grid gutter / card padding | Space between grid items and inside cards. |
| Section vertical padding (max) | The upper bound of the fluid section padding — sections breathe more on large screens. |
| Container max width | The standard content column width (default 1200px). |
| Wide container width | A roomier width for wide sections (default 1320px). |
| Container side padding (max) | The upper bound of the fluid side gutter. |
| Header height | The fixed header height, used to offset content under the sticky bar. |
Fluid by default
Section padding and side gutters use clamp(), so your “max” values apply on large screens and scale down gracefully on phones. There is no separate mobile setting to maintain.
Radius & Elevation
Radius
| Setting | Effect |
|---|---|
| Base radius | Cards, panels, images, inputs (default 10px). |
| Small radius | Tags, chips, badges, kbd hints (default 6px). |
| Pill radius | Fully rounded elements (status pills, scrollbar thumbs). |
Elevation
Three shadow steps, each a preset choice (Subtle / Soft / None):
- Small — cards at rest.
- Medium — hover and raised cards.
- Large — the mobile nav drawer, lightbox, and sticky header.
Choosing None for all three gives a flat, paper-like look that suits a calm, minimal clinic aesthetic.
Buttons
Settings
| Setting | Effect |
|---|---|
| Primary button style | Solid sage fill, Outline, or Ghost. |
| Button radius | Corner radius for all buttons (0 = square, high = pill). |
| Button font | Font family and weight for button labels. |
| Uppercase button text | Force uppercase labels with wider tracking. |
Button variants in modules
Modules use .h-btn--primary (the accent fill), .h-btn--secondary (outline), and .h-btn--ghost. On dark surfaces the secondary and ghost variants invert automatically so they stay readable in the footer and dark bands.
Borders & Global
Borders
| Setting | Effect |
|---|---|
| Hairline border width | The width of the theme’s thin dividers (1–3px). |
| Divider style | Solid, dashed, or dotted hairlines. |
Global
| Setting | Effect |
|---|---|
| Logo + logo height | Brand logo used in the header and footer. |
| Favicon | Browser-tab icon. |
| Default social share (OG) image | Fallback image for pages without a featured image. |
Business Hours & Open Status
One schedule, everywhere
The weekly schedule lives in a single place: Theme settings → Business hours. Each day has a Closed toggle and an Opens / Closes time. That one schedule feeds three things at once — the live open/closed pill in the header (and mobile drawer and hero), the weekly hours list in the footer, and the Hours section module — so they can never drift out of sync. You never type hours into a module; you set them once here.
The live open/closed pill
A small pill shows whether you are open right now (for example “Open until 6 PM”), or when you next open (“Closed · Opens tomorrow 8 AM”). It recomputes in the visitor’s browser from the schedule, including clinics with hours that run past midnight, and the same status appears in the header, the mobile menu, and the hero.
Turning the status pill on or off
Use the single master switch Show open/closed status in the Business hours group. When it is off, the pill is removed everywhere and the status script does nothing. The weekly hours list in the footer and the Hours section are not affected — only the live pill. Each header and hero instance also has its own Show status toggle as a secondary control.
Time format
The Time format setting (also in the Business hours group) has three options:
| Option | Result |
|---|---|
| Auto (from language) | Each language gets its natural clock — an English page shows am/pm, a Chinese page shows a 24-hour clock. |
| 12-hour (am/pm) | Forces a 12-hour clock in every language. |
| 24-hour | Forces a 24-hour clock in every language. |
Day names and times follow the site language automatically
Day names and the clock format are not stored as text — they are produced at render time from the page’s language (<html lang>) using the browser’s built-in Intl formatter. So if your site is in Chinese, every day name shows in Chinese and times use the Chinese 24-hour format — in the pill, the footer, and the Hours section — with nothing to translate by hand. Today’s row in the weekly list is highlighted with a small accent “Today” badge.
Translating the connector words
The wording around the times — “Open until”, “Closed”, “Opens”, the word for “tomorrow”, and the “Today” badge — are editable so a non-English site reads correctly. Because theme settings cannot hold free text, these live on the global Footer module, under Open/closed status labels:
| Field | Default | Notes |
|---|---|---|
| Open now | Open until {time} | {time} is replaced with the localized closing time. |
| Closed | Closed | Shown when there is no upcoming opening. |
| Closed, opens later | Closed · Opens {day} {time} | {day} = localized day name (or the word below); {time} = opening time. |
| Word for “tomorrow” | tomorrow | Used for {day} when the next open day is tomorrow. |
| “Today” badge | Today | The badge on today’s row in the weekly list. |
Edit those once on the footer (it is global), translate them into your language, and the pill, footer, and Hours section all use them. Day names and times stay automatic; only these few words are yours to translate.
Modules Reference
Services Grid (flagship)
Purpose
The Services Grid is the centrepiece of the Services page. It renders the clinic’s services as a grid of cards, each with an icon, a title, a short description, and an optional link to a fuller page or section.
When to use it
Use it as the main content of your Services page, or as a snapshot of services on the Home page. Each card is one service — Wellness Exams, Dental Care, Surgery, Diagnostics, Dermatology, Senior Pet Care, Microchipping, Nutrition, Urgent Visits, and so on.
Key fields
| Field | What it does |
|---|---|
| Eyebrow / heading / intro | The section header above the grid. |
| Services > Icon | A Lucide icon name per card (e.g. stethoscope, syringe, scissors, microscope). |
| Services > Title / description | The service name and a one- or two-line summary. |
| Services > Link (optional) | A label + URL on the card for a deeper page or anchor; cards without a link render as plain cards. |
Style options
- Columns (2–4), surface (white / soft), and card alignment.
- Toggle icons on or off.
- Accent colour and a card-title font.
Wellness Plans (flagship)
Purpose
The Wellness Plans module presents membership tiers as pricing cards — for example a Puppy & Kitten Plan, an Adult Wellness Plan, and a Senior Care Plan. Each tier shows a name, a price and billing period, a short summary, a feature list, and a button.
Key fields
- Content — eyebrow, heading, and intro line.
- Plans (repeater) — name, price, period (e.g. “/ mo”), summary, a feature list (repeater), a “most popular” highlight toggle, and a button label + URL.
- Style — columns, surface, accent colour, and a plan-name font.
Tips
Mark one tier as the highlighted plan to draw the eye (the demo highlights the Adult Wellness Plan). Keep feature lists short and concrete — what each plan actually includes.
Appointment Request (flagship)
Purpose
The Appointment Request module is the booking centrepiece of the Appointments page. It presents a heading, intro, and an optional reassurance line above a booking panel that you wire to one of three sources.
Booking modes
| Mode | Use when |
|---|---|
| Embed | You use an external scheduling tool (a vet booking platform, Calendly, etc.). Paste its embed/iframe code into the Embed code field. A fallback message shows if the code is empty. |
| Form | You take requests via a HubSpot form. Pick the form and it renders inside the panel, styled to match the theme. |
| Link | You send clients to an external booking page. Set the button label, URL, and an optional note under the button. |
Key fields
- Content — eyebrow, heading, intro line, and an optional reassurance line (e.g. “We confirm every request by phone”).
- Booking — mode plus the embed code, form, or link/label/note for the chosen mode.
- Style — accent colour, heading font, and top/bottom padding.
Tips
If your provider’s embed needs a fixed height, set it in their embed code. The fallback message is what clients see if the embed fails to load, so make it useful (“Call us on …”).
Heroes — Hero & Page Hero
Hero
The full-bleed Home hero. It carries an eyebrow, H1 headline, subhead, two buttons, a meta line, and an optional open/closed status pill, over an image or background video (with poster). Style options: overlay colour and opacity, height (full / tall / regular), and text alignment.
Page Hero
A lighter header for inner pages (Services, About, Appointments, Contact). It shows an eyebrow, H1, an optional subhead and meta line, over either no background or an image with an overlay. Use it where a full video hero would be too heavy.
When to use which
- Hero — the Home page, where you want a large, calm first impression.
- Page Hero — every other top-of-page header.
Navigation & Footer
Navigation
The header bar. Fields: logo (image or text fallback) and link, up to 8 nav links, a Book button, an optional phone link, and an optional open/closed status pill. Style: transparent-over-hero, sticky-on-scroll, and accent colour. Used in the global header partial.
Active link (current page)
The nav link for the page you are currently on is highlighted automatically in the accent colour — there is no “active” checkbox to set. It is matched from the page’s URL, so the only thing you need to do is give each nav link the URL of the page it points to (e.g. the “Services” link → /services, “About” → /about). The match ignores the domain, any trailing slash, and HubSpot’s language/tracking parameters, so it stays correct across every page and in every language. The same highlight applies in the mobile menu drawer.
Footer
The site footer and your single source of truth for clinic information.
- Brand & NAP — logo, name, one-line blurb, full address, phone (display + tel:), email, and a directions URL.
- Hours — the weekly hours list is read from the single Theme settings → Business hours schedule (you never re-enter hours in the footer), with an option to highlight today. See Business Hours & Open Status.
- Quick links and Social & newsletter — link columns, social icons (Lucide name or custom image), and an optional HubSpot newsletter form.
- Bottom bar — copyright (the year is added automatically) and up to 4 legal links.
- SEO / Schema — emit VeterinaryCare / LocalBusiness JSON-LD with name, address, geo, phone, hours, and links. See SEO & Schema.
Lead Vet Bio & Story Row
Lead Vet Bio
A portrait beside a story, built for introducing the lead veterinarian or practice owner. Fields: eyebrow, heading, rich-text story, an optional signature line, an optional credentials list (repeater), and an optional button. Style: portrait side and aspect ratio, accent colour, and padding.
Story Row
A general image-and-text row for telling the clinic’s story across the About and Services pages. Fields: eyebrow, heading, rich-text body, an optional meta line, and an optional button, beside an image. Style: image side (left / right), surface (white / soft), and image aspect ratio. Alternate the image side between stacked Story Rows for rhythm.
Icons & Icon Points
How icons work (Lucide)
Every icon in the theme comes from Lucide, loaded from the official Lucide CDN — so they are crisp at any size and inherit your accent and text colours. Wherever a field asks for an icon, you give it the icon’s name.
Where to get the name: open lucide.dev/icons, search for the icon you want, click it, and copy the short lowercase name shown beneath it — for example stethoscope, paw-print, map-pin, clock, arrow-right. Paste that exact name (kebab-case, with hyphens) into the field. Some modules (like Icon Points and Services Grid) give you a dropdown of common names instead of free text.
Note on brand logos: Lucide does not include social brand marks (Instagram, Facebook, X, etc.). For social links in the footer, use the per-row custom image option to upload the brand logo instead of an icon name.
Icon Points
A set of short value propositions, each with an icon, title, and one line of text — good for an ethos band (“Fear-free handling”, “In-house diagnostics”, “Same-day sick visits”). Layout: row (2–4 columns) or list. Each point’s icon is picked from a dropdown of common Lucide names (stethoscope, heart, heart-pulse, syringe, shield-check, microscope, clock, calendar, map-pin, phone, mail, check). Style includes accent colour and a point-title font.
Rich Text
A plain prose block for anything the structured modules do not cover — policies, longer notes, a quote. Optional eyebrow and heading (h2/h3/h4), a rich-text body, surface (white / soft), alignment, and compact or regular spacing.
Gallery
Purpose
A photo grid for the clinic, the animals, and the team. Up to 24 images, each with an optional caption.
Key options
- Layout — grid or bento.
- Grid controls — columns (2–4) and image aspect ratio (square / landscape / portrait / wide).
- Captions and a click-to-open lightbox.
- Style — section surface and top/bottom padding.
Reviews
Reviews
Pet-owner quotes in a 2- or 3-column layout. Each review has a quote, author, optional source/role, and an optional star rating. Turn on Emit AggregateRating structured data (with your business name) to mark up the ratings for search engines. Style: surface, heading alignment, accent (star) colour, and quote font.
Team Grid
The people behind the clinic — up to 16 members (veterinarians, technicians, and client-care staff), each with a photo, name, role, and a short optional bio. Style: columns (2–4), photo shape (round / square), card text alignment, role accent colour, and a name font.
Hours Block & Location Map
Hours Block
Renders the weekly opening hours from the single Theme settings → Business hours schedule — the same source the footer and the header status pill use, so you never re-type hours in the module — with an option to highlight today’s row. It can show a second companion column (an eyebrow, heading, text, a link, and a phone number) for things like holiday notes or an after-hours emergency line. Style: surface, today highlight, accent colour, and padding.
Location Map
Your address and a map side by side. Contact details (address lines, phone display + tel:, email) sit beside an embedded Google Maps iframe (paste the embed URL). Optional transit and parking notes, a directions link, map side (left / right), section surface, and a minimum map height.
Appointment CTA & Inquiry Form
Appointment CTA
A full-width band that prompts clients to book — headline, supporting line, a Book button, and an optional phone link. Surface can be accent (sage) or dark. Drop it near the bottom of most pages.
Inquiry Form
A two-column enquiry section for appointment and general contact. The left column holds an eyebrow, heading, intro, and optional detail points (icon + title + text — e.g. what to bring, response time); the right column holds a HubSpot form with its own title and subtitle. Style: section surface, form position (left / right), an optional card around the form, accent colour, and a point-title font.
FAQ
An accordion of questions and rich-text answers (up to 30), with a split or centered layout and an option to open the first item. Turn on Emit FAQPage structured data to mark up the questions for search engines. Style: surface, accent colour, and a question font. Good topics: the new-patient process, what to bring to a first visit, payment and insurance, emergency and after-hours care, vaccination schedules, and prescription refills.
Blog Modules & Search
Blog Listing Hero
The header for the blog listing page — eyebrow, H1, and a rich-text intro, with an option to only show on the main listing page (so topic/author pages keep their dynamic headers). Alignment: centered or left.
Blog Post Header
The top of an individual post — toggles for topic tag, author, publish date, read time (with a words-per-minute setting), and the featured image, plus text alignment. It reads the post’s data from HubSpot directly. Emits BlogPosting context for the post.
Related Articles
A grid of 2–4 related posts at the foot of an article, with optional excerpt and meta.
Search Field
A native HubSpot search box (it posts to the standard search-results page). Optional heading, placeholder, surface, and alignment.
System Message
The shared content block for system pages (404, 500, password prompt, search results). It is not placed on regular pages — HubSpot renders it on the system templates.
Page Recipes
Home
Module flow
- Hero — full-bleed image/video, headline, two buttons, status pill.
- Icon Points — the ethos band (3–4 value props).
- Services Grid — a snapshot of key services linking to
/pawcare-preview/services. - Lead Vet Bio — portrait + story.
- Gallery — clinic and animal photos.
- Reviews — pet-owner quotes that build trust.
- Hours Block + Location Map — when and where.
- Appointment CTA — the closing booking band.
Keep the hero, the services snapshot, and the closing appointment band; reorder or remove the middle sections to taste.
Services
Module flow
- Page Hero — the services page title.
- Services Grid — the full list of services (the heart of the page).
- Wellness Plans — the membership tiers.
- Rich Text — optional notes (referral policy, fees, what a visit includes).
- Appointment CTA — book a visit.
Enter your services in Services Grid and your membership tiers in Wellness Plans. Mark one plan as highlighted so the recommended tier stands out.
About
Module flow
- Hero or Page Hero — the page header.
- Story Row ×2 — the origin story; alternate the image side.
- Lead Vet Bio — the medical leadership.
- Icon Points — what the clinic stands for.
- Team Grid — the people.
- Gallery — credibility and atmosphere.
- Appointment CTA — the close.
Appointments
Module flow
- Page Hero — the appointments header.
- Appointment Request — the booking panel (embed, form, or link).
- Rich Text — your booking policy (new patients, cancellations, what to bring).
- Hours Block — when you take appointments.
- Location Map — where to find you.
Choose the Appointment Request mode that matches your booking provider and fill in the matching fields only.
Contact & Blog
Contact
- Page Hero — the contact header.
- Inquiry Form — general enquiries with contact detail points beside a HubSpot form.
- Location Map — address, phone, email, map.
- Appointment CTA — book instead of writing.
Blog
The blog uses HubSpot’s blog system with theme modules: the Blog Listing Hero on the listing page, the Blog Post Header and Related Articles on each post, and a Search Field wherever you want native search. Posts emit BlogPosting structured data.
SEO & Schema
Structured Data (JSON-LD)
What the theme emits
| Type | Where | Toggle |
|---|---|---|
| VeterinaryCare / LocalBusiness | Footer module | “Emit VeterinaryCare / LocalBusiness JSON-LD” (name, address, geo, phone, hours, url). |
| FAQPage | FAQ module | “Emit FAQPage structured data”. |
| AggregateRating | Reviews module | “Emit AggregateRating structured data” (with business name). |
| BlogPosting | Blog post header / post template | Emitted for blog posts. |
Avoid double emission
The VeterinaryCare/LocalBusiness block belongs in the footer only, so it appears once per page. Do not also enable a competing business block elsewhere. Each schema toggle is off-by-safe-default where duplication would be a risk; turn each on intentionally on the one page that owns it.
Meta, Titles & Open Graph
Per-page metadata
The base layout outputs the page title, meta description, and a canonical URL from each page’s Settings tab. Fill those in for every page.
Open Graph & Twitter
The layout also emits Open Graph and Twitter Card tags. The share image is the page’s featured image if set, otherwise the Default social share (OG) image from Theme settings > Global. Set a strong default so any page shared without its own image still looks intentional.
Favicon
Set the favicon under Theme settings > Global; the layout links it in the document head.
Best Practices
Replacing Placeholder Images
The demo uses placeholders
The starter content ships with Unsplash placeholder photography. Before launch, replace every image with your own — the clinic, the animals, the team, the hero.
How
- Click the section, open its image field, and choose Replace.
- Upload to the HubSpot File Manager or pick an existing file.
- Always set descriptive alt text (it helps SEO and accessibility).
Sizes
- Hero / full-bleed backgrounds: ~2400px wide, web-optimised JPG.
- Card and thumbnail images: ~800–1200px square or 4:3.
- Background video (Hero): a web-optimised ~1080p MP4 with a poster image always set.
Responsive & Accessibility
Responsive behaviour
- Grids collapse from 4/3 columns to 2 on tablets and 1 on phones.
- Tables and code blocks scroll horizontally rather than overflow on small screens.
- Type, section padding, and gutters scale fluidly with the viewport — there is no separate mobile size to maintain.
Accessibility
- Always write alt text for images and accessible labels for icon-only buttons and social links.
- Map embeds carry an iframe title — set a meaningful one in Location Map.
- The sage accent on warm ivory meets contrast on text and buttons; if you change the accent, recheck contrast against your background.
- Set the map / directions and phone links so keyboard and screen-reader users reach them.
FAQ
Can I change the fonts?
Yes — set Heading font and Body font in Theme settings > Typography. The defaults are Fraunces and Inter.
Where do opening hours live?
In two places: the Footer module (global, shown site-wide) and the Hours Block module (on the Appointments and Home pages). Both read from the single Business hours schedule, so they stay consistent.
How do I take appointments?
Use the Appointment Request module on the Appointments page in Embed, Form, or Link mode depending on your provider. See Modules Reference > Appointment Request.
Why is my business not showing rich results?
Turn on “Emit VeterinaryCare / LocalBusiness JSON-LD” in the Footer, fill in the name, address, phone, and hours, and make sure no competing business block is enabled elsewhere. Validate with a structured-data testing tool after publishing.
The accent colour is everywhere — is that intended?
The theme leads with one accent on purpose. If it feels heavy, most modules let you set a per-section accent colour, or you can soften the global accent in Theme settings > Colors.