Pages and blocks

Every page in Mira is a list of blocks: a hero, a list of conditions, opening hours, a booking panel. You choose the blocks and their order in the page’s file, and change the words. There’s no page builder to learn and nothing to install.

Build a page

1. Open the block library (or /blocks/ on your own preview). Every block and variant is shown live.
2. Click Copy snippet under the one you want.
3. Paste it under sections: in a page file and change the words.

---
title: Back pain
description: How we help with back pain.
sections:
  - type: page-header
    variant: simple
    tone: mist
    title: Help for back pain
    art: condition-lower-back-pain
  - type: treatments
    variant: cards
    items: [physio-assessment, manual-therapy, herbal-heat-therapy]
  - type: booking
    variant: band
    title: Ready when you are
---

To make a new page, add a file to src/content/pages/en/. The file name becomes the address: back-pain.md is published at /back-pain/. Any text below the closing --- is shown after the blocks, in a reading column, which suits legal pages.

Page setting	What it does
title	The page’s title in the browser tab and search results.
description	The summary search engines and social media show.
image	A share image for this page (a file name in src/assets/images/).
noindex: true	Keeps the page out of search engines, the sitemap and site search.
palette	clinical or holistic, to use the other colour preset on this page only.

The blocks

Block	Variants	What it’s for
hero	split, conditions, overlay, centered	The top of a page. conditions adds “What brings you in?” quick links; status: true adds “Open now”; contact: true adds Call and WhatsApp.
page-header	simple, image	Title, intro and breadcrumbs for inner pages.
booking	panel, band	Every way to book: online, phone, WhatsApp, email.
conditions	grid, list	Your conditions, all, by area, or picked with items.
treatments	cards, menu	Your treatments, all, by kind, or picked with items.
body-map		“Where does it hurt?” A figure with numbered points linking to pages.
pricing	plans, table	Sessions, packages and price lists.
hours	table, compact	A clinic’s opening hours with “Open now”.
locations	cards, map	Your clinics, with directions and a map on click.
team	grid, compact	Therapists, all, by kind, by location, or picked with items.
reviews	grid, single	Patient reviews with stars and an overall rating.
credentials	badges, logos	Registrations, memberships and insurers.
stats	band, grid	Big numbers: years open, patients, rating.
timeline	visit, history	A first visit step by step, or your story by year.
cards	icons, tiles, steps	Short points, linked tiles or numbered steps.
text	narrow, split	Markdown: paragraphs, lists, links, headings, quotes.
faq	split, stacked	Questions that open one at a time, with FAQ data for Google.
gallery	mosaic, grid	Photos that open larger on click. The mosaic looks best with 5, 9 or 13.
video	wide, split	YouTube, Vimeo or your own file, loaded only on play.
form	split, card	Contact or appointment request, with fields you choose.
posts	grid, featured	Your latest blog posts.
disclaimer	note, panel	A short medical note, in the visitor’s language.
search		Site search.
cta	band, split, card	One clear ask.

The library shows every setting a block takes in its snippet. In a hero (split or conditions), page header (simple) or call to action (split), art: shows an illustration where image: would show a photo.

Background tones

Give any block a tone to change its background: default, mist, warm, sage, sky, sunken, brand or night. brand and night are dark in both light and dark mode. Two blocks in a row with the same tone read as one section.

Spacing and anchors

• space: small gives a block less room above and below; space: none removes it.
• id: prices lets you link straight to a block with /pricing/#prices.

Text formatting

Titles and short texts accept **bold**, *italic*, ==highlight== and [a link](/contact/). The text block and FAQ answers accept full Markdown.

If a text includes a comma inside a short { … } list, put it in quotes: { value: "12,000+", label: patients treated }. Mira stops the build and names the line if you forget.