Omnira Docs v1.0.0

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 of the services section
The example below, rendered with placeholder images.

Example#

Paste this into the sections list of a page file:

JSON
{
  "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#

OptionTypeDefaultDescription
eyebrowstring—Small label shown above the title.
titlestring (HTML allowed)—Section heading. You can use <em> or <br> inside it.
textstring—Short intro paragraph under the title.
headAlignstringcenterAlignment of the eyebrow/title/text block. "start" puts it on the left.
Values: center | start
itemsarray—The services. See the "items" fields.
stylestringimageCard design. See the variants below.
Values: image | icon | overlay | numbered
columnsnumber3Cards per row on large screens (not used by "numbered", which is always one per row).
Values: 2 | 3 | 4
buttonsarray—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#

OptionTypeDefaultDescription
titlestring—Service name.
textstring—One or two sentences.
imagestring—Photo (styles "image" and "overlay").
iconstring—Bootstrap Icons name (styles "image", "icon" and "overlay").
pricestring—Price line, e.g. "From $450" (styles "image" and "icon" only).
linkstring—Makes the whole card clickable. "href" also works. Cards with a link also show "Learn more".

Fields of each entry in buttons#

OptionTypeDefaultDescription
labelstring—Button text. A button without a label is not shown.
hrefstring—Link address, e.g. "contact.html" or "#pricing". Default "#".
stylestring—primary (default) | outline | light | dark | accent | link. "link" is a text link with an arrow.
iconstring—Bootstrap Icons name shown after the label, without "bi-" (e.g. "arrow-right").
videostring—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".

JSON
{
  "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.

JSON
{
  "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.

JSON
{
  "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.

JSON
{
  "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 (source src/demos/creative-agency/pages/index.json)
  • Real Estate: template/real-estate/index.html (source src/demos/real-estate/pages/index.json)
  • Corporate: template/corporate/index.html (source src/demos/corporate/pages/index.json)
  • Finance: template/finance/index.html (source src/demos/finance/pages/index.json)
  • Law Firm: template/law-firm/home-2.html (source src/demos/law-firm/pages/home-2.json)
  • SaaS Product: template/saas/404.html (source src/demos/saas/pages/404.json)
  • Mobile App: template/mobile-app/contact.html (source src/demos/mobile-app/pages/contact.json)
  • Tech Conference: template/conference/index.html (source src/demos/conference/pages/index.json)
  • Online Academy: template/education/home-2.html (source src/demos/education/pages/home-2.json)
  • Restaurant: template/restaurant/event-the-cellar-room.html (source src/demos/restaurant/pages/event.json)
  • Coffee Shop: template/cafe/coffee.html (source src/demos/cafe/pages/coffee.json)
  • Hotel & Resort: template/hotel/dining.html (source src/demos/hotel/pages/dining.json)
  • Wedding: template/wedding/index.html (source src/demos/wedding/pages/index.json)
  • Gym & Fitness: template/gym/pricing.html (source src/demos/gym/pages/pricing.json)
  • Yoga Studio: template/yoga/pricing.html (source src/demos/yoga/pages/pricing.json)
  • Day Spa & Salon: template/spa/gift-vouchers.html (source src/demos/spa/pages/gift-vouchers.json)
  • Medical Clinic: template/medical/departments.html (source src/demos/medical/pages/departments.json)
  • Dental Clinic: template/dental/index.html (source src/demos/dental/pages/index.json)
  • Pet Care: template/pet-care/home-2.html (source src/demos/pet-care/pages/home-2.json)
  • Construction: template/construction/index.html (source src/demos/construction/pages/index.json)
  • Car Dealer: template/car-dealer/home-2.html (source src/demos/car-dealer/pages/home-2.json)
  • Photographer: template/photography/index.html (source src/demos/photography/pages/index.json)
  • Architecture Studio: template/architecture/index.html (source src/demos/architecture/pages/index.json)
  • Interior Design: template/interior-design/index.html (source src/demos/interior-design/pages/index.json)
  • Portfolio: template/portfolio/home-2.html (source src/demos/portfolio/pages/home-2.json)
  • Music Festival: template/music-festival/schedule.html (source src/demos/music-festival/pages/schedule.json)
  • Charity: template/charity/volunteer.html (source src/demos/charity/pages/volunteer.json)
  • Logistics: template/logistics/404.html (source src/demos/logistics/pages/404.json)