Instructions

• Fonts: headings and buttons use Instrument Sans (Regular 400, Medium 500), body text uses Mulish (Regular 400, SemiBold 600). Both are uploaded as WOFF2 files in Site settings > Fonts. To swap a font, upload the new files there and change the Font/Heading or Font/Body variable.
• Colors: the Colors collection holds numbered ramps (Ink, Signal, Gray, Yellow) and role variables such as Text/Heading, Text/Body, Surface/Band and Border/Default. Change a role once and every class that uses it updates. See them on the Style guide.
• Sizes: the Responsive collection holds heading and text sizes, letter spacing, gaps, section paddings, the container width and radii. Every variable collection has four modes: Desktop (the base values), Tablet (991 px and below), Mobile Landscape (767 px and below) and Mobile Portrait (479 px and below). Pick a mode in the Variables panel to edit its values.
• Structure: every page follows Client-First: page-wrapper > main-wrapper > section_name > padding-global > container-large > padding-section-large or padding-section-medium. Utility classes (heading-style-h1 to h6, text-size-*, text-color-*, background-color-*) carry shared styles, and combo classes start with is-.
• Units: every size is set in rem on a 16 px root, so the layout follows the visitor’s browser font size.
• Custom code: Site settings > Custom code holds only a font smoothing rule. Each utility and legal page has a noindex tag in its page settings.

• Open the Components panel and the Housecall group. Change props on an instance to edit one place, or edit the component to change every instance.
• Notice Bar, Navbar and Footer sit on every page. Edit the notice text inside the Notice Bar component, and the navigation, footer links, clinic addresses and opening hours inside the Navbar and Footer components.
• Button (Text, Link, Variant: Primary, Secondary, On Dark and the Small size of each), Eyebrow (Text) and Tag (Text, Variant: Signal, Ink, Outline, On Dark).
• Page Header (Eyebrow, Title, Title Rest, Text, Image, Image Alt, Show Buttons, two button texts and links) and Page Header Simple (Eyebrow, Title, Title Rest, Text). Title Rest is the gray second part of the heading; start it with a space.
• Marquee (Item 1 to Item 5), Book Band (the booking call to action with the appointment card), FAQ (four topic tabs) and FAQ Item (Question, Answer).
• Changelog Entry (Version, Label, Date and a slot that holds the notes) and Changelog Note (Text). To log a release on the Changelog, duplicate the newest entry, move it to the top and add one Changelog Note per change.

• Every toggle is a native Webflow Interaction (lightning icon in the Designer). There is no custom code.
• Toggle navbar menu on click: at 991 px and below the menu button adds is-open to navbar_menu, which shows the menu panel. Close navbar menu on link click removes it again when a menu link is tapped. At 767 px and below Book a visit lives inside the panel.
• Toggle Housecall FAQ item on click: a click on a question opens its answer and closes the other answers, so only one answer is open at a time. The first Booking question carries is-open in the FAQ component, so it is open when the page loads. To edit another answer, add is-open to it in the Designer, edit it, then remove the class.
• FAQ tab 1 to 4 (Booking, Billing, Prescriptions and results, Visits): each tab adds is-current to its tab and is-active to its pane and removes them from the others. Panes without is-active are hidden.
• Home treat tab 1 to 6 and Services tab 1 to 7 work the same way for the What we treat list on Home and the category chips on Services. On Providers, the clinic filter is native Webflow Tabs; Providers clinic tab 1 to 3 only mark the chosen tab as current. On tablet and mobile the FAQ topic tabs and the tabs-pill rows stay on one line and scroll sideways, with a soft fade at the right edge.
• Reviews on Home use the native Webflow Slider: two slides of four review cards, moved with the left and right arrows. Edit a review inside its slide in the Navigator; to add one, duplicate a review card in a slide. The slide dots are hidden.
• Hovers: buttons change fill and border with a 300 ms transition (Primary to Ink Deep, Secondary and On Dark to Ink Soft), set in the Button component variants. Home provider card hover and Home ways ticket hover stub fill are the two card hovers on Home.

• Locations: the three clinics with hours, transit, parking and billing tags. Each clinic has its own page at /location/clinic-name.
• Providers: clinicians with specialty, status (Accepting new patients or Waitlist), clinic, days, languages and photo. Each has a page at /provider/name.
• Services: care categories with summary, visit tags, prices and photo. Each has a page at /service/name.
• Blog Posts and Categories: articles with cover, author (a Provider), category, read time and body. The body is plain rich text with headings, paragraphs and lists.
• Insurance Plans, Prices and Team Members feed the coverage, self-pay and support team sections, and each item has its own page at /insurance-plan/name, /price/name and /team-member/name. The list cards link through the Page link field, so set it to the item's page path when you add an item.
• Locations, Providers, Services and Blog Posts each have an SEO description field (150 to 160 characters) that their template page uses as the meta description. Keep CMS images under 4 MB.

The Book and New patients forms are native Webflow forms. They ask only for contact and booking details, never for symptoms, dates of birth, member IDs or medicines, because Webflow forms are not meant for health data. Set where submissions go in Site settings > Forms. The success and error messages use the form_success and form_error classes.

• Each image and its source is listed on the Licenses page: photos from Unsplash, images made with Figma AI, and elements designed for this template.
• Replace an image: select it and click Replace image in the Settings panel, or change the Image prop on a component instance or the image field of a CMS item. Update the alt text at the same time; decorative images keep the alt text Decorative.
• Keep credits right: when you swap an image for your own, remove its line from the Licenses page.
• Image loading: images in the first screen of each page, in the reviews slider, the marquee and the tab panes carry the custom attribute loading=eager (Settings > Custom attributes), and each page header photo has a high fetch priority. Every other image loads lazily. Keep these attributes when you replace an image.
• Export images at twice the size they appear on screen and compress them to WebP before you upload.

The logo is an image in the Navbar (ink version) and the Footer (white version). Open each component, select the logo image and replace it with your own file, then set the favicon and webclip in Site settings.

The Privacy policy, Terms of service and Cookie policy describe the fictional Housecall practice. Have your own policies written for your clinic and paste them into these pages.