Section reference › Content
Services "type": "services"
A grid or list of your services in one of four styles: photo cards, icon cards, text over photos, or numbered rows. Use it to show what you offer, each with an optional price and link.

Example#
Paste this into the sections list of a page file:
{
"type": "services",
"style": "image",
"eyebrow": "What we do",
"title": "Services built around your goals",
"items": [
{
"image": "placeholder",
"icon": "palette",
"title": "Brand identity",
"text": "Logos, colour, type and guidelines that make you instantly recognisable.",
"price": "From $2,400",
"link": "#"
},
{
"image": "placeholder",
"icon": "window",
"title": "Website design",
"text": "Fast, accessible websites that turn visitors into customers.",
"price": "From $4,800",
"link": "#"
},
{
"image": "placeholder",
"icon": "megaphone",
"title": "Campaigns",
"text": "Launch campaigns across social, search and email, planned and measured.",
"price": "From $1,900",
"link": "#"
}
]
}Options#
| Option | Type | Default | Description |
|---|---|---|---|
eyebrow | string | — | Small label shown above the title. |
title | string (HTML allowed) | — | Section heading. You can use <em> or <br> inside it. |
text | string | — | Short intro paragraph under the title. |
headAlign | string | center | Alignment of the eyebrow/title/text block. "start" puts it on the left. Values: center | start |
items | array | — | The services. See the "items" fields. |
style | string | image | Card design. See the variants below. Values: image | icon | overlay | numbered |
columns | number | 3 | Cards per row on large screens (not used by "numbered", which is always one per row). Values: 2 | 3 | 4 |
buttons | array | — | Buttons shown centred below the section. See the "buttons" fields. |
Also accepts the options every section accepts: id, tone, padding, fluid, class, hidden.
Fields of each entry in items#
| Option | Type | Default | Description |
|---|---|---|---|
title | string | — | Service name. |
text | string | — | One or two sentences. |
image | string | — | Photo (styles "image" and "overlay"). |
icon | string | — | Bootstrap Icons name (styles "image", "icon" and "overlay"). |
price | string | — | Price line, e.g. "From $450" (styles "image" and "icon" only). |
link | string | — | Makes the whole card clickable. "href" also works. Cards with a link also show "Learn more". |
Fields of each entry in buttons#
| Option | Type | Default | Description |
|---|---|---|---|
label | string | — | Button text. A button without a label is not shown. |
href | string | — | Link address, e.g. "contact.html" or "#pricing". Default "#". |
style | string | — | primary (default) | outline | light | dark | accent | link. "link" is a text link with an arrow. |
icon | string | — | Bootstrap Icons name shown after the label, without "bi-" (e.g. "arrow-right"). |
video | string | — | A YouTube/Vimeo embed URL. The button then opens the video in a pop-up instead of following href. |
Variants and styles#
image#
Default. Photo on top, then an icon badge, title, text, price and "Learn more".
{
"type": "services",
"style": "image",
"eyebrow": "What we do",
"title": "Services built around your goals",
"items": [
{
"image": "placeholder",
"icon": "palette",
"title": "Brand identity",
"text": "Logos, colour, type and guidelines that make you instantly recognisable.",
"price": "From $2,400",
"link": "#"
},
{
"image": "placeholder",
"icon": "window",
"title": "Website design",
"text": "Fast, accessible websites that turn visitors into customers.",
"price": "From $4,800",
"link": "#"
},
{
"image": "placeholder",
"icon": "megaphone",
"title": "Campaigns",
"text": "Launch campaigns across social, search and email, planned and measured.",
"price": "From $1,900",
"link": "#"
}
]
}icon#
Clean cards with an icon, no photo. Good for 4 or 6 services.
{
"type": "services",
"style": "icon",
"tone": "alt",
"eyebrow": "Our services",
"title": "Complete care for the whole family",
"columns": 3,
"items": [
{
"icon": "heart-pulse",
"title": "Check-ups & prevention",
"text": "Yearly physicals, screenings and vaccinations for all ages."
},
{
"icon": "capsule",
"title": "Chronic care",
"text": "Ongoing support for diabetes, asthma and high blood pressure."
},
{
"icon": "emoji-smile",
"title": "Children's health",
"text": "Friendly care from newborn visits to teenage sports physicals."
},
{
"icon": "clipboard2-pulse",
"title": "Lab tests",
"text": "Blood work and results on site, usually within 24 hours."
},
{
"icon": "camera-video",
"title": "Video visits",
"text": "See your doctor from home for follow-ups and quick questions."
},
{
"icon": "shield-check",
"title": "Travel health",
"text": "Advice and vaccines before you head abroad."
}
]
}overlay#
Title and text sit on top of a darkened photo. Striking for 3 or 4 key services.
{
"type": "services",
"style": "overlay",
"eyebrow": "Treatments",
"title": "Find your moment of calm",
"items": [
{
"image": "placeholder",
"icon": "droplet",
"title": "Signature facial",
"text": "Deep cleanse, gentle peel and a hydrating mask. 60 minutes.",
"link": "#"
},
{
"image": "placeholder",
"icon": "flower1",
"title": "Hot stone massage",
"text": "Warm basalt stones melt away tension. 75 minutes.",
"link": "#"
},
{
"image": "placeholder",
"icon": "moon-stars",
"title": "Evening ritual",
"text": "Body scrub, wrap and scalp massage. 90 minutes.",
"link": "#"
}
]
}numbered#
Full-width rows numbered 01, 02, 03 with an arrow. No images; a clean, editorial look.
{
"type": "services",
"style": "numbered",
"eyebrow": "Capabilities",
"title": "What we can do for you",
"headAlign": "start",
"items": [
{
"title": "Strategy",
"text": "Research, positioning and a clear plan before anything is designed.",
"link": "#"
},
{
"title": "Design",
"text": "Brand identities, websites and products that feel unmistakably yours.",
"link": "#"
},
{
"title": "Development",
"text": "Robust, fast front-end and CMS builds that your team can run.",
"link": "#"
},
{
"title": "Growth",
"text": "Ongoing optimisation, content and campaigns after launch.",
"link": "#"
}
]
}Tips#
- Use 3 or 6 items with 3 columns (4 or 8 with 4 columns) so the rows are full.
- Give all items a "link" or none of them, so the cards look consistent.
- The numbered style reads well with "headAlign": "start".
Editing it in the HTML files#
Each service is an article.service-card (or .service-overlay / .service-row for the other styles) with the title in h3.service-title. The clickable area is the empty a.stretched-link inside the card: change its href to change the link.
Where it's used#
Open these pages in template/ to see it working:
- Creative Agency:
template/creative-agency/index.html(sourcesrc/demos/creative-agency/pages/index.json) - Real Estate:
template/real-estate/index.html(sourcesrc/demos/real-estate/pages/index.json) - Corporate:
template/corporate/index.html(sourcesrc/demos/corporate/pages/index.json) - Finance:
template/finance/index.html(sourcesrc/demos/finance/pages/index.json) - Law Firm:
template/law-firm/home-2.html(sourcesrc/demos/law-firm/pages/home-2.json) - SaaS Product:
template/saas/404.html(sourcesrc/demos/saas/pages/404.json) - Mobile App:
template/mobile-app/contact.html(sourcesrc/demos/mobile-app/pages/contact.json) - Tech Conference:
template/conference/index.html(sourcesrc/demos/conference/pages/index.json) - Online Academy:
template/education/home-2.html(sourcesrc/demos/education/pages/home-2.json) - Restaurant:
template/restaurant/event-the-cellar-room.html(sourcesrc/demos/restaurant/pages/event.json) - Coffee Shop:
template/cafe/coffee.html(sourcesrc/demos/cafe/pages/coffee.json) - Hotel & Resort:
template/hotel/dining.html(sourcesrc/demos/hotel/pages/dining.json) - Wedding:
template/wedding/index.html(sourcesrc/demos/wedding/pages/index.json) - Gym & Fitness:
template/gym/pricing.html(sourcesrc/demos/gym/pages/pricing.json) - Yoga Studio:
template/yoga/pricing.html(sourcesrc/demos/yoga/pages/pricing.json) - Day Spa & Salon:
template/spa/gift-vouchers.html(sourcesrc/demos/spa/pages/gift-vouchers.json) - Medical Clinic:
template/medical/departments.html(sourcesrc/demos/medical/pages/departments.json) - Dental Clinic:
template/dental/index.html(sourcesrc/demos/dental/pages/index.json) - Pet Care:
template/pet-care/home-2.html(sourcesrc/demos/pet-care/pages/home-2.json) - Construction:
template/construction/index.html(sourcesrc/demos/construction/pages/index.json) - Car Dealer:
template/car-dealer/home-2.html(sourcesrc/demos/car-dealer/pages/home-2.json) - Photographer:
template/photography/index.html(sourcesrc/demos/photography/pages/index.json) - Architecture Studio:
template/architecture/index.html(sourcesrc/demos/architecture/pages/index.json) - Interior Design:
template/interior-design/index.html(sourcesrc/demos/interior-design/pages/index.json) - Portfolio:
template/portfolio/home-2.html(sourcesrc/demos/portfolio/pages/home-2.json) - Music Festival:
template/music-festival/schedule.html(sourcesrc/demos/music-festival/pages/schedule.json) - Charity:
template/charity/volunteer.html(sourcesrc/demos/charity/pages/volunteer.json) - Logistics:
template/logistics/404.html(sourcesrc/demos/logistics/pages/404.json)