Section reference › Content

Job openings `"type": "jobs"`

A list of open positions, each with department, title, description, location, contract type, salary and an "Apply now" button. Use it on a careers page.

Example#

Paste this into the sections list of a page file:

JSON

{
  "type": "jobs",
  "tone": "alt",
  "eyebrow": "Careers",
  "title": "Open positions",
  "items": [
    {
      "title": "Senior Frontend Developer",
      "department": "Engineering",
      "location": "Remote (EU)",
      "type": "Full-time",
      "salary": "€70k – €85k",
      "text": "Build fast, accessible interfaces with a small product team.",
      "link": "mailto:jobs@example.com"
    },
    {
      "title": "Product Designer",
      "department": "Design",
      "location": "Lisbon",
      "type": "Full-time",
      "salary": "€50k – €62k",
      "text": "Own the design of our mobile app from research to release."
    },
    {
      "title": "Customer Success Lead",
      "department": "Support",
      "location": "Hybrid, London",
      "type": "Part-time",
      "text": "Help our biggest customers get the most out of the product."
    }
  ]
}

Options#

Option	Type	Default	Description
`eyebrow`	string	—	Small label shown above the title.
`title`	string	—	Section heading. Simple inline HTML such as <em> or <br> is allowed.
`text`	string	—	Short intro paragraph under the title.
`headAlign`	string	`center`	Alignment of the eyebrow/title/text block. Any value other than "center" (e.g. "start") left-aligns it. Values: `center \| start`
`items`	array	—	The job openings.

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	—	Job title.
`department`	string	—	Department badge. Required.
`location`	string	—	Location, e.g. "Remote (EU)". Required.
`type`	string	—	Contract type, e.g. "Full-time". Required.
`salary`	string	—	Optional salary range.
`text`	string	—	One or two sentences about the role.
`link`	string	`contact.html`	Where "Apply now" goes.

Tips#

department, location and type are optional; anything left out is simply not shown.
The button label "Apply now" is fixed; change it in the built HTML if needed.

Where it's used#

Open these pages in template/ to see it working:

Creative Agency: template/creative-agency/careers.html (source src/demos/creative-agency/pages/careers.json)
Real Estate: template/real-estate/careers.html (source src/demos/real-estate/pages/careers.json)
Corporate: template/corporate/careers.html (source src/demos/corporate/pages/careers.json)
Finance: template/finance/careers.html (source src/demos/finance/pages/careers.json)
Law Firm: template/law-firm/careers.html (source src/demos/law-firm/pages/careers.json)
SaaS Product: template/saas/careers.html (source src/demos/saas/pages/careers.json)
Mobile App: template/mobile-app/careers.html (source src/demos/mobile-app/pages/careers.json)
Restaurant: template/restaurant/careers.html (source src/demos/restaurant/pages/careers.json)
Coffee Shop: template/cafe/team.html (source src/demos/cafe/pages/team.json)
Gym & Fitness: template/gym/trainers.html (source src/demos/gym/pages/trainers.json)
Day Spa & Salon: template/spa/therapists.html (source src/demos/spa/pages/therapists.json)
Medical Clinic: template/medical/careers.html (source src/demos/medical/pages/careers.json)
Dental Clinic: template/dental/careers.html (source src/demos/dental/pages/careers.json)
Pet Care: template/pet-care/careers.html (source src/demos/pet-care/pages/careers.json)
Construction: template/construction/careers.html (source src/demos/construction/pages/careers.json)
Travel Agency: template/travel/careers.html (source src/demos/travel/pages/careers.json)
Architecture Studio: template/architecture/careers.html (source src/demos/architecture/pages/careers.json)
Interior Design: template/interior-design/team.html (source src/demos/interior-design/pages/team.json)
Music Festival: template/music-festival/volunteer.html (source src/demos/music-festival/pages/volunteer.json)
Charity: template/charity/team.html (source src/demos/charity/pages/team.json)
Logistics: template/logistics/careers.html (source src/demos/logistics/pages/careers.json)

Job openings "type": "jobs"