Section reference › Content

Detail page `"type": "detail"`

A complete detail page for one record (a service, course, room, tour, car, event, project…): breadcrumb, title, key facts, photo gallery, overview, highlights, included list, accordion, spec table, video and a sticky sidebar with price, buttons or a form. It belongs on a generated page (one page per record).

Example#

Paste this into the sections list of a page file:

JSON

{
  "each": "services",
  "prefix": "service",
  "title": "{item.title}",
  "description": "{item.subtitle}",
  "sections": [
    {
      "type": "detail",
      "item": "@item",
      "crumbs": [
        {
          "label": "Home",
          "href": "index.html"
        },
        {
          "label": "Services",
          "href": "services.html"
        }
      ]
    }
  ]
}

Options#

Option	Type	Default	Description
`item`	object	—	The record to show. On a generated page use "@item". Nothing is rendered if it has no title.
`crumbs`	array	`a single "Home" link`	Breadcrumb links before the title: [{ "label": "Home", "href": "index.html" }, …]. The current title is added automatically.
`override`	object	—	Fields that replace the record's own values on this page, e.g. { "eyebrow": "Course", "meta": [ … ] }.
`sidebarExtra`	string	—	Raw HTML added under the sidebar card.

Fields of each entry in `item`#

Option	Type	Default	Description
`title`	string	—	Page title (h1). Required.
`eyebrow`	string	—	Small label above the title.
`subtitle`	string	—	Line under the title.
`image`	string	—	Main photo.
`gallery`	array	—	More photos. With 3+ photos in total (image + gallery) a clickable mosaic of up to 5 is shown; the rest open in the lightbox.
`price`	string	—	Price shown at the top of the sidebar, e.g. "From $4,800".
`priceNote`	string	—	Small text after the price, e.g. "per night".
`meta`	array	—	Key facts next to the title: [{ "icon", "label", "value" }].
`body`	string \| array	—	Overview text: a string, an array of paragraphs, or HTML starting with a tag.
`bodyTitle`	string	`Overview`	Heading of the overview block.
`highlights`	array	—	Icon boxes: [{ "icon", "title", "text" }].
`highlightsTitle`	string	`Highlights`	Heading of the highlights block.
`features`	array	—	Ticked list of what is included (strings).
`featuresTitle`	string	`What’s included`	Heading of the features block.
`accordion`	object	—	{ "title", "items": [ { "q", "a", "meta" } ] }: collapsible steps or FAQs; meta is a small tag on the right.
`table`	object	—	{ "title", "rows": [ ["Label", "Value"], … ] }: a spec table. Title defaults to "Details".
`video`	string	—	YouTube embed URL; adds a video block with a play button.
`sidebar`	object	—	{ "title", "text", "price", "list": [ { "label", "value" } ], "buttons": [ … ], "form": { "title", "fields": [ … ], "button" } }. All parts are optional.

Tips#

The example is a whole page file, e.g. src/demos/<demo>/pages/service.json. "each": "services" creates one page per record in data.json → "services"; "prefix" sets the file names (service-<slug>.html, otherwise the page file name is used). "@item" is the current record and "{item.title}" fills in the browser title.
Every record needs a unique "slug". A minimal record: { "slug": "website-design", "title": "Website design", "image": "placeholder", "body": "We design fast, accessible websites.", "price": "From $4,800" }.
Cards in other sections can link to these pages with "link": "service-website-design.html"; records pulled in with { "$data": "services" } get the link automatically.
With two photos they sit side by side; with three or more you get a gallery mosaic with a "View all photos" button.
This section ignores the common options (id, tone, padding, fluid, class) except "hidden". It contains the page's h1, so no page-header is needed.

Editing it in the HTML files#

Each record becomes its own file, e.g. service-website-design.html. The main column is .col-lg-8 (each block is a section.pd-block) and the sidebar is aside .detail-side.

Where it's used#

Open these pages in template/ to see it working:

Creative Agency: template/creative-agency/project-halden-coffee.html (source src/demos/creative-agency/pages/project.json)
Corporate: template/corporate/case-northline-logistics.html (source src/demos/corporate/pages/case.json)
Finance: template/finance/service-tax-planning.html (source src/demos/finance/pages/service.json)
Law Firm: template/law-firm/practice-corporate-commercial.html (source src/demos/law-firm/pages/practice.json)
SaaS Product: template/saas/feature-live-dashboards.html (source src/demos/saas/pages/feature.json)
Tech Conference: template/conference/workshop-production-llm-apps.html (source src/demos/conference/pages/workshop.json)
Online Academy: template/education/course-ux-ui-design.html (source src/demos/education/pages/course.json)
Restaurant: template/restaurant/event-the-cellar-room.html (source src/demos/restaurant/pages/event.json)
Coffee Shop: template/cafe/origin-ethiopia-yirgacheffe.html (source src/demos/cafe/pages/origin.json)
Hotel & Resort: template/hotel/experience-reef-snorkelling.html (source src/demos/hotel/pages/experience.json)
Wedding: template/wedding/service-full-planning.html (source src/demos/wedding/pages/service.json)
Gym & Fitness: template/gym/class-strength-foundations.html (source src/demos/gym/pages/class.json)
Yoga Studio: template/yoga/class-vinyasa-flow.html (source src/demos/yoga/pages/class.json)
Day Spa & Salon: template/spa/treatment-signature-massage.html (source src/demos/spa/pages/treatment.json)
Medical Clinic: template/medical/department-family-medicine.html (source src/demos/medical/pages/department.json)
Dental Clinic: template/dental/treatment-checkups-cleaning.html (source src/demos/dental/pages/treatment.json)
Pet Care: template/pet-care/service-wellness-exams.html (source src/demos/pet-care/pages/service.json)
Construction: template/construction/project-cherry-creek-residence.html (source src/demos/construction/pages/project.json)
Car Dealer: template/car-dealer/car-2023-compact-suv-touring-awd.html (source src/demos/car-dealer/pages/car.json)
Travel Agency: template/travel/tour-amalfi-coast-capri.html (source src/demos/travel/pages/tour.json)
Architecture Studio: template/architecture/project-harbourside-library.html (source src/demos/architecture/pages/project.json)
Interior Design: template/interior-design/project-linden-row-townhouse.html (source src/demos/interior-design/pages/project.json)
Portfolio: template/portfolio/case-fieldnote-app.html (source src/demos/portfolio/pages/case.json)
Music Festival: template/music-festival/stage-tide-stage.html (source src/demos/music-festival/pages/stage.json)
Charity: template/charity/cause-clean-water.html (source src/demos/charity/pages/cause.json)
Logistics: template/logistics/case-peak-season-for-a-retailer.html (source src/demos/logistics/pages/case.json)

Detail page "type": "detail"