About this template

What Dayside is

Dayside is a complete website for a family practice, clinic or small medical group. The demo is Linden Row Clinic, five doctors and two nurses in an old corner pharmacy. The look is morning daylight: limestone, the celadon tiles of the hallway and ink, with one warm sun mark kept for the time of day, square corners and a bookish serif.

The home page opens on a full-bleed photograph of the clinic at five to eight, with the street name set across it. Further down, the day on Linden Row pins to the screen: as you scroll, a sun crosses an arc, the clock moves and the clinic's day changes from the shutters opening to the lamp in the window. The clinician index shows a portrait that follows the pointer. A second home page leads with type and a strip of the day's photographs.

There are 23 page types: services and a page per service with its length and example fee, your visit, fees, clinicians and a page per clinician with the days they are in, guides, a journal, about, careers, visit us with a drawn street plan, a booking request form, questions, a style guide, a licence and changelog page, privacy, terms, accessibility and a 404. Four collections hold 9 services, 7 clinicians, 6 guides and 6 articles. Opening hours are computed in the clinic's own time zone, and every motion has a still version. There are no ratings, outcome numbers or patient testimonials. The clinic, people and fees are invented, and the images are for demonstration only, so replace them before you publish.

Last updated

What's included

8 pages, ready to fill in

  1. 01HomeMorning hero, the statement, the day on Linden Row, services with fees, your first visit, who you will see, the walk-in hour, children, what it costs, guides, the building, hours, journal, questions, the evening close
  2. 02Home 2A typographic poster and the day as a drifting strip of photographs, then services, clinicians, hours and the journal
  3. 03Services and serviceNine visits by area; each with what happens, what to bring, who you might see and related visits
  4. 04Clinicians and clinicianThe index, a week rota and portraits; each page with focus, languages, days in, visits, training and writing
  5. 05Your visit and feesFour steps with photographs, the walk-in hour, before and after; every fee, letters, procedures and receipts
  6. 06Guides, journal and articlesSix patient guides and six articles in a long-read layout with the author in the margin
  7. 07About, careers, visit us, bookStory, principles, timeline and the building; open roles; hours, a drawn street plan and access; a booking request form
  8. 08Questions and the kitQuestions, a style guide, licence and changelog, privacy, terms, accessibility and a 404

Features

  • Day story pinned to the screen, with a sun arc and a moving clock
  • Clinician index with a following portrait and an inline drawer on touch
  • Open state, today's row and walk-in hour in the clinic's time zone
  • Pictures that unmask, headings that rise and a blind between pages
  • Every motion has a still version when motion is turned off
  • Day and night modes with a toggle, responsive on desktop, tablet and phone

Code version

  • React 19
  • Vite
  • TypeScript
  • React Router
  • Plain CSS
  • Content in typed files

Screens

A closer look

Taken from the live demo, in light and in dark, on desktop and on a phone.

Dayside template. Home: the clinic at five to eight, the name across the photograph.
LightHome: the clinic at five to eight, the name across the photograph.
Dayside template. Home in night mode.
DarkHome in night mode.
Dayside template. Home 2: a typographic poster and the day as a strip of photographs.
LightHome 2: a typographic poster and the day as a strip of photographs.
Dayside template. The day on Linden Row: scroll and the sun crosses the arc.
DarkThe day on Linden Row: scroll and the sun crosses the arc.
Dayside template. Who you will see: names, languages and days in.
LightWho you will see: names, languages and days in.
Dayside template. Services by area, each with its length and an example fee.
LightServices by area, each with its length and an example fee.
Dayside template. A service page in night mode.
DarkA service page in night mode.
Dayside template. A clinician: focus, languages, days in and visits.
LightA clinician: focus, languages, days in and visits.
Dayside template. Your visit, step by step.
LightYour visit, step by step.
Dayside template. Every fee on one page.
DarkEvery fee on one page.
Dayside template. Opening hours with today marked and the walk-in hour in tile.
LightOpening hours with today marked and the walk-in hour in tile.
Dayside template. The practice journal.
LightThe practice journal.
Dayside template. The style guide that comes with the template.
DarkThe style guide that comes with the template.
Dayside template. Home on a phone.
Dayside template. On phones the day becomes a list with a photograph for each moment.
PhoneHome on a phone. On phones the day becomes a list with a photograph for each moment.

Where to get it

Three versions, one design

Pick the one that matches how you build. The pages and the design are the same in each.

  • Framer templateRemix it into your Framer account and edit on the canvas. Projects and journal posts run on the Framer CMS.

    Free on FramerFramer Marketplace

  • Code on Digital Silk RouteThe full source: React 19, Vite, TypeScript, React Router. Host it anywhere and change anything.

    $5one payment

    Buy theme · $5
  • XOXI themeA theme for your XOXI profile. Live on the XOXI website now; the iOS and Android app gets it with the next app update.

    Includedfor Pro and Business+ members

    Get it with Pro plan on XOXI

Want to see it first? View demo

Want one made for you?

Start with a free 30-minute call. You get a written plan and a fixed quote before any work begins.

Book a call

Fixed quote. You own everything we make.

The Black Momento online store, built by Victor Studios
Client work, designed and built by us