---
title: Linden Family Health Theme — Documentation
description: "Complete documentation: setup, install, theme settings, page templates, modules reference, design rules, customization recipes, troubleshooting."
---
[](https://www.nopethemes.com/?hsLang=en)
- About expand\_more
- Services expand\_more
- Doctors expand\_more
- [Pricing](https://nopethemes.com/linden/pricing?hsLang=en)
- [Insurance](https://nopethemes.com/linden/insurance?hsLang=en)
- [Blog](https://nopethemes.com/linden/blog?hsLang=en)
- [Docs](https://nopethemes.com/linden/docs?hsLang=en)
- [FAQ](https://nopethemes.com/linden/faq?hsLang=en)
search
[Book a Visit](https://nopethemes.com/linden/contact?hsLang=en)
[Our Story Why we built Linden](https://nopethemes.com/linden/about?hsLang=en) [Our Values What we promise patients](https://nopethemes.com/linden/about?hsLang=en#values) [Doctors Meet the team](https://nopethemes.com/linden/doctors?hsLang=en)
Primary Care
[Annual physicals Full preventive check-ups](https://nopethemes.com/linden/services?hsLang=en#physicals) [Vaccinations CDC & travel vaccines](https://nopethemes.com/linden/services?hsLang=en#vaccines) [Chronic care Diabetes, BP, thyroid, more](https://nopethemes.com/linden/services?hsLang=en#chronic) [Pediatrics Well-child visits](https://nopethemes.com/linden/services?hsLang=en#pediatrics)
Diagnostics
[Lab & imaging In-house, same-day results](https://nopethemes.com/linden/services?hsLang=en#lab) [Telehealth Video & phone visits](https://nopethemes.com/linden/services?hsLang=en#telehealth) [Procedures Biopsies, joint injections](https://nopethemes.com/linden/services?hsLang=en#procedures)
Plans & Access
[Pricing Memberships & cash rates](https://nopethemes.com/linden/pricing?hsLang=en) [Insurance In-network carriers](https://nopethemes.com/linden/insurance?hsLang=en) [FAQ Billing & visit questions](https://nopethemes.com/linden/faq?hsLang=en)
[All doctors Meet the full team](https://nopethemes.com/linden/doctors?hsLang=en) [Dr. John Wang, MD Family Medicine, Founding Partner](https://nopethemes.com/linden/doctor/john-wang?hsLang=en)
search Search the site
- About expand\_more
[Our Story](https://nopethemes.com/linden/about?hsLang=en) [Our Values](https://nopethemes.com/linden/about?hsLang=en#values) [Doctors](https://nopethemes.com/linden/doctors?hsLang=en)
- Services expand\_more
Primary Care
[Annual physicals](https://nopethemes.com/linden/services?hsLang=en#physicals) [Vaccinations](https://nopethemes.com/linden/services?hsLang=en#vaccines) [Chronic care](https://nopethemes.com/linden/services?hsLang=en#chronic) [Pediatrics](https://nopethemes.com/linden/services?hsLang=en#pediatrics)
Diagnostics
[Lab & imaging](https://nopethemes.com/linden/services?hsLang=en#lab) [Telehealth](https://nopethemes.com/linden/services?hsLang=en#telehealth) [Procedures](https://nopethemes.com/linden/services?hsLang=en#procedures)
Plans & Access
[Pricing](https://nopethemes.com/linden/pricing?hsLang=en) [Insurance](https://nopethemes.com/linden/insurance?hsLang=en) [FAQ](https://nopethemes.com/linden/faq?hsLang=en)
- Doctors expand\_more
[All doctors](https://nopethemes.com/linden/doctors?hsLang=en) [Dr. John Wang, MD](https://nopethemes.com/linden/doctor/john-wang?hsLang=en)
- [Pricing](https://nopethemes.com/linden/pricing?hsLang=en)
- [Insurance](https://nopethemes.com/linden/insurance?hsLang=en)
- [Blog](https://nopethemes.com/linden/blog?hsLang=en)
- [Docs](https://nopethemes.com/linden/docs?hsLang=en)
- [FAQ](https://nopethemes.com/linden/faq?hsLang=en)
[Book a Visit](https://nopethemes.com/linden/contact?hsLang=en)
Theme documentation
# The Linden manual.
Everything you need to install, configure, customise, and ship the Linden Family Health theme. One scroll, complete reference.
[JUMP TO INSTALL](https://www.nopethemes.com/linden/docs#install)
Overview
## What ships in the box.
**Linden Family Health** is a premium HubSpot CMS theme for primary care clinics, family medicine practices, pediatric offices, and small multi-specialty groups. Every visual property is editable from theme settings — no code required for day-to-day operation.
### Inventory
- **10 website page templates** — home, about, doctors, doctor-profile, services, pricing, insurance, contact, faq, legal, docs.
- **2 landing-page templates** — book-a-visit lead-gen, gated PDF download.
- **Full blog system** — listing template with hero/search/topics/authors + post template with related-posts + back-to-archive nav.
- **21 drag-and-drop modules** — every one field-driven, every visual property bound to theme tokens.
- **2 global partials** — Navigation Pro header and Footer Pro footer, both fully editable.
- **System pages** — 404, 500, password prompt, unsubscribe.
- **161 theme settings** across 11 groups — colors, typography, layout, effects, buttons, forms, header, icons, footer, brand, navigation.
### Stack
- HubSpot CMS — drag-and-drop page editor, HubL templating, native form integration.
- CSS custom properties — every style flows from `fields.json` → theme settings → `_variables.css` → component CSS. No SCSS compile, no Tailwind purge, no rebuild step.
- Vanilla JavaScript — 336 lines in `js/main.js` drives scroll reveals (IntersectionObserver), hero parallax, animated counters, mobile menu, header scroll-state, word-split headlines. All RAF-throttled and reduced-motion safe.
- Swiper 11 — loaded from CDN only when Testimonials carousel is on the page.
- Google Fonts — auto-loaded by HubSpot from the font fields. Default pairing: Fraunces (display) + Sora (body).
Install
## Four steps from purchase to first page.
- ### 1. Buy + activate
Purchase from the HubSpot Marketplace. The theme installs into your portal automatically and appears under **Settings > Website > Themes > Linden Family Health**. Click *Activate* to make it the default.
- ### 2. (Optional) CLI
Install the HubSpot CLI (`npm install -g @hubspot/cli`), authenticate with `hs init`, then run `hs upload studionope-for-medical studionope-for-medical` from a local copy if you want CLI-level control. Skip this if you only need the UI.
- ### 3. Brand kit
Open **Settings > Account > Brand Kit**. Upload your clinic logo (PNG or SVG with transparent bg). It appears automatically in Navigation Pro and Footer Pro via HubSpot's brand\_settings.
- ### 4. Theme settings
Open **Settings > Website > Themes > Linden > Edit theme settings**. Set colors, fonts, spacings, radii. Every change re-renders the CSS on the next page load — no rebuild.
Setup walkthrough
## Going live in 30 minutes.
### Step A — Wire navigation
Open `templates/partials/header.html`. The `menu_items` array drives the entire top nav. Each item has a `type` of **link** (single URL), **dropdown** (icon + title + description rows), or **mega** (multi-column grid). Replace the example items with your own routes. Re-upload with `hs upload`.
For dropdown items, the `icon` property uses HubSpot's icon picker — pass `{ "name": "stethoscope", "type": "SOLID", "unicode": "f0f1" }`. Note that HubSpot ships Font Awesome 5.0.10 — use known FA5 icon names only.
If you prefer HubSpot's UI menu picker over the HubL array, set **theme.navigation** = `navigation_menu` in theme settings.
### Step B — Wire footer
Open `templates/partials/footer.html`. The `columns` array holds up to 4 link columns. The `contact` block holds address, phone, email. The `social` block holds Instagram, Facebook, LinkedIn, etc. (uses HubSpot's social icons via the platform key). The `bottom` block holds copyright + legal links.
### Step C — Create your first page
Go to **Marketing > Website > Website Pages > Create > Website page**. Pick the Linden template that matches your need (Home, About, Doctors, etc). The page opens in the drag-and-drop editor with placeholder content from the template — replace section by section. Click *Publish* when done.
### Step D — Set up the blog
Go to **Marketing > Website > Blog > Create blog**. Set the slug (e.g. `linden/blog`) and language. In *Blog templates*, assign:
- Listing template → `studionope-for-medical/templates/blog/listing.html`
- Post template → `studionope-for-medical/templates/blog/post.html`
Create an author under **Marketing > Website > Blog > Authors**. Then create posts under **Create > Blog post**.
### Step E — Connect domain
Once content is in place, connect your live domain under **Settings > Website > Domains & URLs**. Republish everything. The CDN may cache for ~30 seconds before serving the new bundle.
Theme settings
## Eleven groups, 161 fields, zero hardcoded values.
Every visual property in the theme is editable from **Settings > Website > Themes > Linden > Edit theme settings**. The groups below are the top-level sections you will see in the panel sidebar.
- ### Brand
Primary + secondary brand colors. Read by HubSpot's standard widgets (form focus states, default links). Set these to your clinic palette first.
- ### Typography
Heading font + body font (Google Fonts auto-loaded). Type scale from H1 → micro. Font weights light/regular/medium. Line-heights tight/snug/relaxed. Letter-spacing for caps + headings.
- ### Layout
Page gutter min, content max-width (1440px default), Pro container width (for nav/footer), spacing scale xs–4xl, card padding inner + mobile, header pad, section gap, pill x/y padding, min-heights.
- ### Effects
Border radius (square, card, card-lg, pill, hero-card). XL shadow Y/blur/opacity. Map filter sepia/saturate/hue/brightness. Eight opacity tokens (text-muted, border-normal, kicker-on-dark, etc). Animation master toggle.
- ### Buttons
CTA shape — circle (editorial default), pill (rounded rectangle), or square. Drives the `.mb-cta-circle` rendering site-wide.
- ### Forms
Form button match-CTA toggle. When on, every HubSpot form submit button matches the primary button 1:1.
- ### Colors
Page background, surface light/dark/warm, text + text-inverse, accent cream + cream-hover, accent gold, overlay-hero, overlay-sectors.
- ### Header
Sticky toggle, Y padding, pill height, brand-mark size, nav-link size, Nav Pro blur strength, Nav Pro bg opacity, dropdown bg opacity, mega-menu icon size + opacity, Material Symbols size.
- ### Icons
Material Symbols style: outlined (default), rounded, or sharp. Applies to all built-in nav and footer system icons.
- ### Footer
Footer padding top + bottom. Pad-footer-top and pad-footer-bottom in pixels.
- ### Navigation
Navigation type — Navigation Pro (default mega-menu pill), HubSpot menu picker, or DnD area.
- ### Animations
Inside Effects group — enable\_animations toggle disables ALL motion site-wide. Honored by every `[data-reveal]` element + the JS hero-parallax + counters.
Colors
## Eleven palette tokens — set once, cascades everywhere.
The color system is the single most important set of theme settings to configure. Every other tinted UI element composes from these via `color-mix(in srgb, …)` with the opacity tokens.
- **bg** — Page background. Default `#faf6f0` (warm ivory).
- **surface\_light** — Cards, modals, dropdown panels. Default `#ffffff`.
- **surface\_dark** — Dark card variant, hero overlays. Default `#1a1f2e`.
- **surface\_warm** + **surface\_warm\_soft** — Map placeholder backgrounds, project-card gradients.
- **text** — Body and heading color. Default `#1a1f2e` (near-black).
- **text\_inverse** — Text on dark backgrounds. Default `#ffffff`.
- **accent\_cream** + **accent\_cream\_hover** — Primary CTA pill background and its hover state. Default `#FFF4C0` / `#FFEB99`.
- **accent\_gold** — Star ratings, success indicators, validation error color.
- **overlay\_hero** — Dark wash placed over hero background images for legibility. Color + opacity controllable.
- **overlay\_sectors** — Sectors header overlay tint.
**How opacity tokens work:** instead of shipping faded variants of each color, Linden composes them on the fly via `color-mix(in srgb, var(--mb-text) 70%, transparent)`. The 70% comes from *theme.effects.opacity\_text\_muted*. Lower that one value and every muted text + border across the site updates in lockstep. No need to define 12 shades of text — just adjust the opacity once.
Typography
## Two fonts, fluid scale, every size editable.
Linden ships with **Fraunces** (display serif, weights 300–600) for headings, kickers, and editorial copy, and **Sora** (geometric grotesque sans, weights 300–500) for body text and UI. Both load automatically from Google Fonts via HubSpot's `load_external_fonts` on the font fields.
### Swapping fonts
Open *theme.typography.heading\_font* and *theme.typography.body\_font*. Pick any Google Font. The Google Fonts URL in `base.html` rebuilds dynamically — no link tag to maintain. To use a non-Google font, you would need to add your own `` tag in `base.html` head.
### Type scale
Linden uses a CSS clamp() fluid scale based on viewport width. Set the size at the scaling base (default 1280px) and the font auto-scales smaller below and larger above (up to *viewport\_scale\_max*, default 1920px).
- **fs\_h1** @ 1280 — Hero headlines. Default 44px (scales 32–88px).
- **fs\_h2** @ 1280 — Section headlines. Default 28px.
- **fs\_h3\_lg** @ 1280 — Featured H3s. Default 24px.
- **fs\_h3** @ 1280 — Default H3. Default 18px.
- **fs\_h4** @ 1280 — H4 / small heading. Default 16px.
- **fs\_body** — Body copy. Fixed 15px (does not scale).
- **fs\_kicker** — Kicker labels + nav links. Fixed 13px.
- **fs\_xs** — Button labels, captions. Fixed 12px.
- **fs\_micro** — Chips, badges, validation errors. Fixed 11px.
### Weights, line-heights, letter-spacing
Three weight tokens — **fw\_light** (300), **fw\_regular** (400), **fw\_medium** (500). Three line-heights — **lh\_tight** (1.2 for H1), **lh\_snug** (1.4 default), **lh\_relaxed** (1.7 for long-form blog body). Letter-spacing — **ls\_h1** (tight for headlines), **ls\_caps\_sm** + **ls\_caps\_md** (for small-caps labels and kickers).
Layout & spacing
## One gutter formula, one container width, eight spacing tokens.
### Page gutter
The horizontal space between content and the viewport edge is computed as:
`--mb-page-gutter: max(gutter_min, calc((100vw - content_max_width) / 2))`
Below the content max-width (1440px default), the gutter is a fixed minimum (24px default). Above it, the extra width is split equally between the gutters so content stays centered without ever exceeding the max-width. This means content reads the same on a 13" laptop and a 32" monitor.
### Container widths
- **content\_max\_width** — Page content. Default 1440px.
- **pro\_container\_width** — Navigation Pro + Footer Pro inner container. Default 1280px.
- **max\_text\_block** — Centered text blocks (this paragraph). Default 880px.
- **max\_panel\_width** — Side panels (mobile menu overlay). Default 480px.
### Spacing scale
Every gap, padding, and margin uses one of these tokens — no inline pixel values anywhere:
- **space\_xs** — 4px. Icon gap, tight inline gap.
- **space\_sm** — 8px. Pill padding, button gap.
- **space\_md** — 12px. Standard component gap.
- **space\_lg** — 18px. Card content gap.
- **space\_xl** — 24px. Block gap.
- **space\_2xl** — 36px. Major content group gap.
- **space\_3xl** — 48px. Section-internal spacing.
- **space\_4xl** — 64px. Largest spacing.
Sections are separated by **section\_gap** (default 72px). Cards have an internal **pad\_card\_inner** (default 40px desktop, 24px mobile). Pills have **pad\_pill\_x** + **pad\_pill\_y**. Headers have **pad\_header\_y**. All in theme settings.
Effects
## Radii, shadows, opacity, animations, map filters.
### Border radius
- **radius\_block\_square** — Inputs, small cards. Default 8px.
- **radius\_card** — Section cards, mission cards. Default 24px.
- **radius\_card\_lg** — Larger card variants. Default 32px.
- **radius\_pill** — CTA pills, nav buttons. Default 999px.
- **radius\_hero\_card** — Hero card. Default 0 (full-bleed).
- **radius\_block\_round** — Round-corner block variant. Default 24px.
### Shadow
One shadow token `--shadow-xl`, composed from three fields:
- **shadow\_xl\_y** — Y offset (default 8px).
- **shadow\_xl\_blur** — Blur radius (default 24px).
- **shadow\_xl\_opacity** — Color opacity 0–60 (default 12%).
Result: `0 8px 24px color-mix(in srgb, var(--mb-text) 12%, transparent)`. To make shadows more pronounced raise the opacity; to soften them raise the blur and lower the Y.
### Opacity tokens
Eight opacity values control every faded UI element:
- **opacity\_text\_muted** — Muted body text. Default 70.
- **opacity\_text\_softer** — Secondary text. Default 85.
- **opacity\_kicker\_dark** — Kicker on dark bg. Default 85.
- **opacity\_border\_subtle** — Hairline borders. Default 8.
- **opacity\_border\_normal** — Default borders. Default 12.
- **opacity\_border\_strong** — Emphasized borders. Default 18.
- **opacity\_white\_chip** — Translucent chips on dark. Default 6.
- **opacity\_social\_chip** — Social icon chip bg. Default 8.
### Map filter (Office Locations)
The embedded Google Maps tiles can be tinted to match your palette:
- **map\_filter\_sepia** 0–1. Sepia wash. Default 0 (raw map).
- **map\_filter\_saturate** 0–200%. Default 100%.
- **map\_filter\_hue** -180 to +180 deg. Default 0.
- **map\_filter\_brightness** 30–150%. Default 100%.
### Animations master toggle
**enable\_animations** — Master switch for scroll-reveals, hero parallax, word-split, counters. When off, every `[data-reveal]` element renders without motion and the JS skips registration.
Page templates — Site pages
## Ten templates for the public site.
Each template lives in `templates/website-pages/` and ships with placeholder content tailored to a primary-care clinic. Edit any section in the DnD page editor without touching code.
### home.html
Eight sections in order: Hero Statement (full-viewport with cream-pill CTA), Sector Cards (4-up services), Mission Block (about + photo), Team Grid (4-up doctors), Pillars Grid (why-us 4-up), Testimonials (carousel), FAQ (5 items), Mission Block (final CTA). Use this as the front door.
### about.html
Seven sections: Hero with optional video background, Stats Counter (4-up by-the-numbers), Sector Cards (story chapters), Pillars Grid (six values, 3-up), Team Grid, history timeline (rendered as 6-up Pillars Grid for the pill-tag look), Mission Block final CTA. Use to tell the practice story.
### doctors.html
Six sections: Hero with video, full Team Grid with long bios (anchor\_id="team" for /linden/about#team deep-link), Pillars Grid (how-we-practice 3-up), Stats Counter, Testimonials, Mission Block find-your-doctor CTA.
### doctor-profile.html
Nine sections for individual clinician pages: Hero with portrait + name + role, Mission Block (bio + clinic image), Pillars Grid (credentials 3-up — education / residency / board cert / licensure / hospital privileges / memberships), Sector Cards (4-up areas of focus), Stats Counter (practice in numbers), Testimonials specific to this doctor, Pillars Grid (publications + talks 3-up), FAQ doctor-specific, Mission Block book CTA. One template, copy + tweak for each doctor.
### services.html
Service catalog: Sector Cards header, in-depth Services List with rich-text per item, FAQ, Mission Block final CTA.
### pricing.html
Six sections: Hero, Pillars Grid (three pricing tiers 3-up with featured-flag), Services List (itemized cash prices), Mission Block insurance, FAQ billing, Mission Block final CTA.
### insurance.html
In-network carriers, common copay/deductible scenarios, FAQ, contact link.
### contact.html
Contact Form as the hero (left text + right form, no separate hero block above), Office Locations cards with Google Maps embed, contact-specific FAQ.
### faq.html
Long-form FAQ archive grouped by topic — multiple FAQ modules stacked (new-patients, billing, telehealth, hours, after-hours, refills).
### legal.html
Privacy Policy + HIPAA Notice + Accessibility + Terms of Use, with anchor TOC at the top.
Page templates — Landing, blog, system
## Lead-gen funnels, blog system, error pages.
### Landing pages — templates/landing-pages/
**lp\_consultation.html** — Book-a-first-visit funnel. Seven sections: Hero with anchor CTA, Pillars Grid (what is included), Pitch Block (why we built Linden), condensed Team Grid, Testimonials, Contact Form (anchored, captures booking), FAQ for objections.
**lp\_report.html** — Gated PDF download. Seven sections: Hero, Mission Block (author credibility anchor), Pillars Grid (six chapters preview), Pitch Block (pull-quote), Stats Counter, Contact Form (gated download), FAQ download-objection.
### Blog — templates/blog/
**listing.html** — Listing page template. Three sections: MB Blog Hero (with search, topics chips, authors chips), MB Blog Posts (1/2/3-column grid), MB Blog Pagination.
**post.html** — Individual post template. Wraps in `` with: MB Blog Post Header (hero), `content.post_body`, MB Related Posts (3 related). Includes back-to-archive nav.
### System pages — templates/system/
**404.html** — Centered error page. Edit copy directly in template.
**500.html** — Same shape as 404.
**password-prompt.html** — HubSpot password gate styled to match theme.
**backup\_unsubscribe.html** — Email unsubscribe page.
Module reference (1/2)
## Twelve content modules with field-by-field detail.
### Hero Statement
Full-viewport hero. Fields: *kicker*, *headline*, *subhead* (richtext), *show\_cta*, *cta\_label*, *cta\_url*, *show\_scroll\_cue*, *overlay\_opacity* 0–80, *bg\_image*, *bg\_video\_url* + *bg\_video\_poster* (video overrides image when set).
### Mission Block
Two-column text + image. Fields: *kicker*, *headline*, *body\_text* (richtext), *show\_cta* + *cta\_label* + *cta\_url*, *overlap\_hero* (overlap previous hero by 36px when true), *image*.
### Sector Cards
Card grid for services. Fields: *header\_kicker*, *header\_headline*, *header\_body* (richtext), *header\_image*, *show\_cta* + *cta\_label* + *cta\_url*, *items* (repeater 1–8 with title / body\_text / image per card). Grid auto-sizes 2/3/4 columns.
### Pillars Grid
Flexible value-prop grid. Fields: *kicker*, *headline*, *body\_text* (richtext), *columns* ("2"/"3"/"4"/"6"), *scheme* (light/dark), *pillars* (repeater 1–12 with title / body\_text / optional cta\_label + cta\_url / featured flag).
### Team Grid
Clinician grid. Fields: *kicker*, *headline*, *anchor\_id* (deep-link target), *columns* (2/3/4), *members* (repeater with image / title / role / body\_text per member).
### Testimonials
Patient quote carousel. Fields: *kicker*, *headline*, *body\_text*, *testimonials* (repeater with quote / star\_rating 0–5 / author\_name / author\_role / author\_company / author\_photo), *style* object (max\_width narrow/medium/wide, alignment left/center, autoplay bool, autoplay\_speed ms). Swiper-powered when multiple quotes.
### FAQ
Accordion. Fields: *kicker*, *headline*, *body\_text*, *items* (repeater 1–20 with question + answer richtext), *style.open\_first*, *style.layout* (split/full).
### Stats Counter
Animated counters. Fields: *kicker*, *headline*, *body\_text*, *stats* (repeater 2–6 with value / display\_value override / prefix / suffix / stat\_label / description), *layout* object (columns 2/3/4, alignment, scheme, dividers bool).
### Services List
Itemized list. Fields: *kicker*, *lead\_headline*, *lead\_body*, *services* (repeater with title + body\_text richtext), *show\_cta* + *cta\_label* + *cta\_url*.
### Pitch Block
Editorial pull-quote. Fields: *kicker*, *headline* (use `\n` for editorial line break — encoded as `
` in templates), *body\_text*, *show\_cta* + *cta\_label* + *cta\_url*, *image*.
### Section Block
Generic text + image block (used in this docs page). Fields: *kicker*, *headline*, *body\_text* (richtext), *layout* (text\_only / text\_left / text\_right), *scheme* (bare / light / dark), *show\_cta* + *cta\_label* + *cta\_url*, *image*.
### Page Hero
Smaller hero for inner pages. Fields: same shape as Hero Statement plus automatic *--mb-header-clearance* padding-top.
Module reference (2/2)
## Nine more: forms, locations, navigation, footer, blog.
### Contact Form
Two-column module — left kicker + headline + body, right HubSpot form. Fields: *kicker*, *headline*, *body\_text*, *hubspot\_form* (HubSpot form picker — pick any form you have built).
### Office Locations
Multi-office cards with maps. Fields: *kicker*, *headline*, *body\_text*, *columns* (1/2/3), *show\_maps* (renders inline Google Maps iframe per office), *offices* (repeater with title / address richtext / phone / email / hours / map\_query).
### Navigation Pro
The global header pill nav. Lives at `templates/partials/header.html`. Fields: *logo*, *menu\_items* (repeater with type link/dropdown/mega), *search* (enable + placeholder), *ctas* (repeater with style primary/secondary), *settings* (sticky from theme.header.header\_sticky, blur\_bg, top\_margin, language\_switcher), *style* (width container/full/compact, background, text\_color, shadow, border\_radius, padding). Mega menu rendered with HubSpot icon picker per item (Font Awesome 5.0.10).
### Footer Pro
The global footer. Lives at `templates/partials/footer.html`. Fields: *brand* (logo, tagline), *columns* (up to 4, each with title + links repeater), *contact* (title + address + phone + email), *social* (links repeater with platform key), *bottom* (copyright + legal\_links repeater + language\_switcher), *style* (layout, background, padding, show\_divider).
### MB Blog Hero
Listing hero. Fields: *bg\_media\_type* (image/video), *bg\_image*, *bg\_video\_url* + *bg\_video\_poster*, *kicker*, *headline*, *body\_text*, plus per-view variants (tag\_kicker + tag\_headline\_prefix + tag\_body, author\_kicker + author\_headline\_prefix + author\_body, all\_kicker + all\_headline + all\_body), *show\_search* + *search\_placeholder*, *show\_topics* + *topics\_label* + *topics\_limit*, *show\_authors* + *authors\_label* + *authors\_limit*.
### MB Blog Posts
Post list. Fields: *posts\_per\_row* (1/2/3), *show\_excerpt*, *show\_date*, *show\_author*, *show\_read\_more*, *excerpt\_length* (chars), *read\_more\_label*.
### MB Blog Pagination
Page-number pagination. Fields: *prev\_label*, *next\_label*, *max\_visible\_pages*.
### MB Blog Post Header
Hero on individual post pages. Reads featured image, title, author, date, category, reading time from HubSpot context. Fields: *fallback\_bg\_image*, *bg\_overlay\_opacity*, *show\_kicker* + *show\_meta* + *show\_back\_link*, *back\_link\_label*, *reading\_time\_suffix*.
### MB Related Posts
Bottom-of-post related grid. Fields: *heading*, *cta\_label*, *post\_count* (2/3/4), *show\_date*, *show\_author*, *show\_excerpt*, *show\_read\_more*, *excerpt\_length*, *read\_more\_label*.
Design rules
## Eight principles for editing without breaking the system.
### 1. Token-first editing
Never hardcode a color, size, or radius in custom HTML you drop into a rich-text field. If you need a specific shade, use the existing accent or text-muted token via inline style: `style="color: var(--mb-accent-gold);"`. This keeps your edits intact when the operator changes the theme palette.
### 2. Stick to the type scale
Use H1 once per page (the hero). Section headings are H2. Sub-headings inside rich text are H3. Avoid H4 unless deeply nested. The CSS already styles these — never set font-size inline.
### 3. Section rhythm
Every page is a stack of `dnd_section` blocks. Don't insert custom `` markup at the top level of templates — it bypasses the DnD editor. Use modules instead.
### 4. Cards over rectangles
When in doubt, choose a module that renders cards (Pillars Grid, Sector Cards, Team Grid) over a custom rich-text grid. Cards stay aligned, responsive, and theme-driven automatically.
### 5. One CTA per fold
Don't stack three competing CTAs in the hero. The cream-pill primary CTA should be the obvious next action. Secondary actions belong further down the page in Mission Block or Pitch Block.
### 6. Images are 16:9 or portrait
Sector Cards and Sector Cards expect landscape 3:2 or 16:9. Team Grid expects portrait 3:4. Hero backgrounds: 16:9 or wider, minimum 2400×1350 to stay sharp on retina.
### 7. Respect the cream
The cream accent is a once-per-page color — Book a Visit CTA, primary booking buttons. Don't paint section backgrounds cream — use surface\_light or surface\_warm instead. Overusing the accent dilutes its signal.
### 8. Test mobile
Every module is responsive but check key pages in HubSpot's device-preview at 375px (small phone), 768px (tablet), and 1440px (laptop). The hero on home, the mega-menu in the nav, and the contact form layout are the most common pain points.
Customization recipes
## Common edits, step-by-step.
- ### Change brand color
Open **Theme settings > Colors**. Edit *accent\_cream* (CTAs) or *text* (everything else). Save. Hard-refresh the page (~30s CDN propagation). All buttons + hover states + borders cascade automatically.
- ### Swap the logo
Upload your logo at **Settings > Account > Brand Kit**. Both header + footer pick it up via HubSpot brand\_settings. For a custom file path, edit `templates/partials/header.html` + `footer.html` and change the `logo_studio` set var.
- ### Add a menu item
Open `templates/partials/header.html`. Add an entry to the `menu_items` array. Type 'link' for plain URL, 'dropdown' for icon+title+description rows, 'mega' for multi-column grid. Re-upload via `hs upload`.
- ### Add a new doctor profile
Marketing > Website Pages > Create page from the *Doctor Profile* template. Update hero portrait + name + role, bio body\_text, credentials cards, areas of focus, stats, testimonials, FAQ. Add the profile URL to the Doctors dropdown in header.html.
- ### Add a blog post
Marketing > Website > Blog > Create > Blog post. The post inherits `templates/blog/post.html` automatically. Pick an author, set featured image, write body. Publish.
- ### Change page gutter
Theme settings > Layout > *gutter\_min* (24px default). The page-gutter formula auto-fills excess width above content\_max\_width — only change gutter\_min if you want tighter or looser horizontal padding on smaller screens.
- ### Disable a section
In the DnD editor, hover the section, click the trash icon. Sections can be re-added by dragging the module back from the right sidebar. Or hide via section-level visibility settings.
- ### Add a new language
Create a translated variation under **Marketing > Website > Multi-language**. Set *theme.header.language\_switcher* = true. Nav + footer will show the language picker.
- ### Override a single CSS rule
Don't edit theme CSS directly — your changes will be lost on theme update. Instead use HubSpot's **Settings > Website > Pages > Site footer HTML** to add a scoped `