--- title: Job Board Pro — Career Page Module for HubSpot CMS description: Category-based career page module for HubSpot with filterable listings, detail views, and Schema.org SEO. --- # Job Board Pro for HubSpot Category-based career page module with smart filters, expand and modal detail views, image support, and Schema.org SEO. Demo ## Card Grid with Images 3-column card grid with card images and all filters active. Careers ## Join Our Team We're looking for people who care about craft, think in systems, and want to do the best work of their careers. 6 open positions All Departments Engineering Design & Product All Types Full-time Part-time Contract Internship All Locations Remote Hybrid On-site ### Engineering Build the infrastructure that powers our platform and ship features used by millions. 3 roles ![Senior Frontend Engineer](https://www.nopethemes.com/hubfs/getty-images-8fn7chDt6n0-unsplash.jpg) Hybrid Full-time Featured #### Senior Frontend Engineer Lead our frontend architecture, build design systems, and mentor a team of engineers working across React and TypeScript. San Francisco, CA $140,000 – $185,000/yr View Details Apply Now ![DevOps Engineer](https://www.nopethemes.com/hubfs/getty-images-6y6DGYcuQNo-unsplash.jpg) On-site Full-time #### DevOps Engineer Design and maintain cloud infrastructure using Kubernetes, Terraform, and CI/CD pipelines across AWS and GCP. Austin, TX $130,000 – $170,000/yr View Details Apply Now ![Engineering Manager](https://www.nopethemes.com/hubfs/getty-images-6H_A3XUnmlg-unsplash%20(1).jpg) Hybrid Full-time New #### Engineering Manager Lead a team of 6-8 engineers, balancing technical excellence with shipping velocity and team growth. New York, NY $190,000 – $250,000/yr View Details Apply Now ### Design & Product Shape the experiences that define our brand and delight our users every day. 3 roles ![Product Designer](https://www.nopethemes.com/hubfs/getty-images-_4eCXzsktOc-unsplash.jpg) Remote Full-time #### Product Designer Own end-to-end design from research and wireframes to pixel-perfect production across web and mobile. New York, NY $120,000 – $160,000/yr View Details Apply Now ![Senior Product Manager](https://www.nopethemes.com/hubfs/raw_assets/public/studio-nope-theme/images/templates/helper-img-5.jpg) Hybrid Full-time Featured #### Senior Product Manager Own the product roadmap for our core platform, driving strategy and cross-functional delivery of high-impact features. San Francisco, CA $160,000 – $210,000/yr View Details Apply Now ![Content Strategist](https://www.nopethemes.com/hubfs/raw_assets/public/studio-nope-theme/images/templates/helper-img-6.jpg) Remote Contract #### Content Strategist Develop our content roadmap and produce high-impact pieces for SEO and thought leadership. Chicago, IL $70 – $90/hr View Details Apply Now No positions match your criteria. Try adjusting your filters. × #### Job Details ### About the Role We're looking for a Senior Frontend Engineer to lead our frontend architecture. You'll build and maintain our design system, mentor junior engineers, and drive best practices across the team. ### What You'll Do - Architect and build scalable frontend systems using React and TypeScript - Lead the development of our component library and design system - Mentor and coach a team of 4 frontend engineers - Collaborate with Product and Design to ship delightful user experiences - Drive frontend performance optimization and accessibility standards ### What We're Looking For - 7+ years of frontend development experience - Deep expertise in React, TypeScript, and modern CSS - Experience building and maintaining design systems at scale - Strong communication skills and a passion for mentorship ### About the Role Join our infrastructure team to design and maintain the cloud systems that power our platform. ### What You'll Do - Design, build, and maintain cloud infrastructure on AWS and GCP - Manage Kubernetes clusters and containerized deployments - Build and optimize CI/CD pipelines for rapid, safe deployments - Implement infrastructure as code using Terraform - Monitor system health and respond to production incidents ### What We're Looking For - 5+ years of DevOps or infrastructure engineering experience - Strong experience with Kubernetes, Docker, and cloud platforms - Proficiency with Terraform or similar IaC tools - Experience with monitoring tools (Datadog, Prometheus, Grafana) ### About the Role Lead and grow a high-performing engineering team while driving technical strategy. ### What You'll Do - Manage, mentor, and grow a team of 6-8 engineers - Drive technical roadmap and architecture decisions - Partner with product and design on strategy - Build hiring processes and grow the team ### What We're Looking For - 3+ years of engineering management experience - Strong technical background - Track record of building and scaling teams - Excellent communication and leadership skills ### About the Role We're looking for a Product Designer who can own the full design process — from early research and ideation through to polished, production-ready designs. ### What You'll Do - Lead end-to-end design for key product areas - Conduct user research, usability testing, and competitive analysis - Create wireframes, prototypes, and high-fidelity designs in Figma - Collaborate closely with Engineering and Product Management - Contribute to and evolve our design system ### What We're Looking For - 5+ years of product design experience - Strong portfolio demonstrating end-to-end design thinking - Expert-level Figma skills - Experience with user research methodologies ### About the Role Own end-to-end product strategy for a core product area. You'll define the roadmap, drive execution with engineering, and measure impact. ### What You'll Do - Define and prioritize product roadmap based on user research and data - Drive cross-functional alignment with engineering, design, and data teams - Analyze user behavior and market trends to identify opportunities - Ship iteratively and measure outcomes against business goals ### What We're Looking For - 6+ years of product management experience - Track record of shipping products at scale - Strong analytical skills and data-driven decision making - Excellent communication and stakeholder management ### About the Role We need a Content Strategist to develop and execute our content roadmap. ### What You'll Do - Develop and maintain the editorial calendar - Write and edit long-form blog posts, whitepapers, and case studies - Optimize content for SEO and organic discoverability - Collaborate with subject matter experts across the company - Analyze content performance and iterate on strategy ### What We're Looking For - 4+ years of content strategy experience - Exceptional writing and editing skills - Strong understanding of SEO principles - Portfolio of published long-form content --- Documentation ## Setup & Configuration Guide ## Getting Started Job Board Pro is a standalone HubSpot module — no theme required. Drag it into any page template to build a fully functional careers page with category-based organization, smart filters, modal job details, URL deep-linking, and SEO-ready structured data. ### Installation 1. After purchase, the module appears in your Design Manager under **marketplace-modules/Job Board Pro.module**. 2. Open any page in the Page Editor or add it to a template in the Design Manager. 3. Drag **Job Board Pro** from the module list into your page. 4. The module renders with default categories and sample jobs — replace them with your own content. --- ## Content Structure Jobs are organized into **categories** (departments). Each category has a name, description, optional icon, and its own set of job listings. ### Categories Add up to 12 categories under **Content \> Categories**. Each category has: - **Name** — Department label shown as section heading and in the category filter. - **Description** — Short text below the category heading. Toggle visibility in Settings. - **Icon** — Optional icon next to the category name. Toggle visibility in Settings. ### Job Fields - **Title** — Job title on card and modal view. - **Excerpt** — Short summary shown on the card. - **Image** — Optional card image (toggle via Settings \> Show Image). - **Location** — City or region text. - **Location Type** — On-site, Remote, or Hybrid. Colored badge + filter. - **Employment Type** — Full-time, Part-time, Contract, Internship. Badge + filter. - **Salary Range** — Min/max with currency symbol and period (year/month/hour). Toggle in Settings. - **Description** — Rich text shown in the modal detail view. - **Custom Badge** — Optional text like Featured, New, Urgent. - **Application Mode** — External URL or embedded HubSpot form. --- ## Layout Options ### Card Grid Jobs displayed as cards in a 1/2/3/4 column grid. Cards show image, badges, title, excerpt, location, salary, and action buttons. Automatically stacks to 2 columns on tablet and 1 column on mobile. ### List Layout Jobs as compact horizontal rows with border separators. Images are hidden. Ideal for large job boards with many listings. ### Job Detail Modal Clicking “View Details” opens a slide-in drawer from the right with backdrop overlay. The modal includes the full job description, a sidebar with job details (department, location, type, salary), and the apply button or embedded form. Features: - Smooth slide-in animation with configurable speed. - Focus trap for keyboard accessibility. - Close via X button, backdrop click, or Escape key. - Goes full-width on mobile. --- ## URL Deep-Linking Each job gets a unique URL hash when its modal opens. Format: `#job-board-pro-job-title-slug` - **Shareable links** — Copy the URL while a modal is open to share a direct link to that job. - **Auto-open on load** — When someone visits a page with a job hash, the modal opens automatically. - **No query param conflicts** — Uses the `#job-board-pro-` prefix so it won’t interfere with HubSpot tracking params or other URL parameters. - **Clean URLs** — Hash is cleared when the modal closes. No back-button pollution (uses `replaceState`). --- ## Filters & Search Single-row toolbar with search input + category dropdown + type dropdown + location dropdown. All filters combine for multi-criteria filtering. - **Search** — Searches across job title, excerpt, location, and category name. 200ms debounce. - **Category** — Dropdown populated from your categories. Hides entire category sections when no jobs match. - **Employment Type** — Full-time, Part-time, Contract, Internship. - **Location Type** — On-site, Remote, Hybrid. The job count updates in real-time. Empty state message shows when all jobs are filtered out. Toggle each filter individually in Settings. --- ## Style System 100+ controls on the Style tab organized into 10 groups. Every visual property is customizable — no CSS needed. - **Container** — Max width and horizontal padding. - **Colors** — 11 color pickers with opacity for every text and background element. - **Typography** — 2 font pickers (theme-inherited) + 8 font size controls for headings, titles, excerpts, meta, and descriptions. - **Cards** — Background, border width/color/radius, shadow (none/sm/md/lg), padding, gap, hover shadow, hover lift, and image aspect ratio (16:9, 4:3, 3:2, square). - **Badges** — 6 color pairs (department, custom, remote, hybrid, onsite) + font size, border radius, and padding controls. - **Filters** — Pill colors (default + active), search input styling (background, border, radius), and font size. - **Buttons** — Primary background/text/hover colors, font size, font weight, padding, and border radius. - **Detail Panel** — Background, border, overlay, panel padding, sidebar width, modal width, title/heading sizes, tag styling (size, radius, padding), close button (size, radius), meta box (padding, heading size, row size). - **Categories** — Divider color/width + section spacing. - **Spacing** — Section padding, header spacing/max-width, toolbar spacing/gap, empty state padding. - **Animations** — Transition speed (fast/normal/slow), hover lift distance, image hover zoom toggle + zoom scale. - **Responsive** — Tablet and mobile breakpoint controls. --- ## SEO & Accessibility - **Schema.org** — Automatic JobPosting JSON-LD for every listing with proper currency mapping ($, €, £, ¥, etc.). Google Jobs eligible. - **Keyboard navigation** — Escape closes modal, Tab cycles through modal elements, focus returns to trigger button on close. - **Focus trap** — Modal traps keyboard focus so Tab/Shift+Tab cycle within the modal. - **Focus-visible** — Visible outlines on all interactive elements for keyboard users. - **ARIA** — `role="dialog"`, `aria-modal`, `aria-label` on all controls, `aria-live` on job count for screen reader announcements. - **HubSpot Forms** — Embedded form submissions go directly to your CRM. --- ## Tips - **Write good excerpts** — 1-2 sentences that sell the role. It’s the first thing candidates read on the card. - **Use badges sparingly** — If every job has one, none stand out. Reserve for Featured or New roles. - **Test on mobile** — Cards stack to single column, toolbar wraps vertically, modal goes full-screen. - **Images are optional** — Toggle Show Image in Settings. The module works great without them for a cleaner look. - **Link to specific jobs** — Open a job modal, copy the URL with the `#job-board-pro-` hash, and use it in emails or social posts. - **Dark mode** — Set a dark background color, switch all text colors to light values, and adjust badge colors to match. - **Multiple currencies** — Each job has its own currency symbol. Schema.org auto-maps $, €, £, ¥ to ISO currency codes. Job Board Pro by Studio Nope ```json { "@context" : "https://schema.org", "@type" : "JobPosting", "baseSalary" : { "@type" : "MonetaryAmount", "currency" : "USD", "value" : { "@type" : "QuantitativeValue", "maxValue" : 185000.0, "minValue" : 140000.0, "unitText" : "YEAR" } }, "datePosted" : "2026-03-02", "description" : "About the Role We're looking for a Senior Frontend Engineer to lead our frontend architecture. You'll build and maintain our design system, mentor junior engineers, and drive best practices across the team. What You'll Do Architect and build scalable frontend systems using React and TypeScript Lead the development of our component library and design system Mentor and coach a team of 4 frontend engineers Collaborate with Product and Design to ship delightful user experiences Drive frontend performance optimization and accessibility standards What We're Looking For 7+ years of frontend development experience Deep expertise in React, TypeScript, and modern CSS Experience building and maintaining design systems at scale Strong communication skills and a passion for mentorship", "employmentType" : "FULL_TIME", "hiringOrganization" : { "@type" : "Organization", "name" : "" }, "jobLocation" : { "@type" : "Place", "address" : "San Francisco, CA" }, "jobLocationType" : "TELECOMMUTE", "title" : "Senior Frontend Engineer" } ``` ```json { "@context" : "https://schema.org", "@type" : "JobPosting", "baseSalary" : { "@type" : "MonetaryAmount", "currency" : "USD", "value" : { "@type" : "QuantitativeValue", "maxValue" : 170000.0, "minValue" : 130000.0, "unitText" : "YEAR" } }, "datePosted" : "2026-03-02", "description" : "About the Role Join our infrastructure team to design and maintain the cloud systems that power our platform. What You'll Do Design, build, and maintain cloud infrastructure on AWS and GCP Manage Kubernetes clusters and containerized deployments Build and optimize CI/CD pipelines for rapid, safe deployments Implement infrastructure as code using Terraform Monitor system health and respond to production incidents What We're Looking For 5+ years of DevOps or infrastructure engineering experience Strong experience with Kubernetes, Docker, and cloud platforms Proficiency with Terraform or similar IaC tools Experience with monitoring tools (Datadog, Prometheus, Grafana)", "employmentType" : "FULL_TIME", "hiringOrganization" : { "@type" : "Organization", "name" : "" }, "jobLocation" : { "@type" : "Place", "address" : "Austin, TX" }, "title" : "DevOps Engineer" } ``` ```json { "@context" : "https://schema.org", "@type" : "JobPosting", "baseSalary" : { "@type" : "MonetaryAmount", "currency" : "USD", "value" : { "@type" : "QuantitativeValue", "maxValue" : 250000.0, "minValue" : 190000.0, "unitText" : "YEAR" } }, "datePosted" : "2026-03-02", "description" : "About the Role Lead and grow a high-performing engineering team while driving technical strategy. What You'll Do Manage, mentor, and grow a team of 6-8 engineers Drive technical roadmap and architecture decisions Partner with product and design on strategy Build hiring processes and grow the team What We're Looking For 3+ years of engineering management experience Strong technical background Track record of building and scaling teams Excellent communication and leadership skills", "employmentType" : "FULL_TIME", "hiringOrganization" : { "@type" : "Organization", "name" : "" }, "jobLocation" : { "@type" : "Place", "address" : "New York, NY" }, "jobLocationType" : "TELECOMMUTE", "title" : "Engineering Manager" } ``` ```json { "@context" : "https://schema.org", "@type" : "JobPosting", "baseSalary" : { "@type" : "MonetaryAmount", "currency" : "USD", "value" : { "@type" : "QuantitativeValue", "maxValue" : 160000.0, "minValue" : 120000.0, "unitText" : "YEAR" } }, "datePosted" : "2026-03-02", "description" : "About the Role We're looking for a Product Designer who can own the full design process — from early research and ideation through to polished, production-ready designs. What You'll Do Lead end-to-end design for key product areas Conduct user research, usability testing, and competitive analysis Create wireframes, prototypes, and high-fidelity designs in Figma Collaborate closely with Engineering and Product Management Contribute to and evolve our design system What We're Looking For 5+ years of product design experience Strong portfolio demonstrating end-to-end design thinking Expert-level Figma skills Experience with user research methodologies", "employmentType" : "FULL_TIME", "hiringOrganization" : { "@type" : "Organization", "name" : "" }, "jobLocation" : { "@type" : "Place", "address" : "New York, NY" }, "jobLocationType" : "TELECOMMUTE", "title" : "Product Designer" } ``` ```json { "@context" : "https://schema.org", "@type" : "JobPosting", "baseSalary" : { "@type" : "MonetaryAmount", "currency" : "USD", "value" : { "@type" : "QuantitativeValue", "maxValue" : 210000.0, "minValue" : 160000.0, "unitText" : "YEAR" } }, "datePosted" : "2026-03-02", "description" : "About the Role Own end-to-end product strategy for a core product area. You'll define the roadmap, drive execution with engineering, and measure impact. What You'll Do Define and prioritize product roadmap based on user research and data Drive cross-functional alignment with engineering, design, and data teams Analyze user behavior and market trends to identify opportunities Ship iteratively and measure outcomes against business goals What We're Looking For 6+ years of product management experience Track record of shipping products at scale Strong analytical skills and data-driven decision making Excellent communication and stakeholder management", "employmentType" : "FULL_TIME", "hiringOrganization" : { "@type" : "Organization", "name" : "" }, "jobLocation" : { "@type" : "Place", "address" : "San Francisco, CA" }, "jobLocationType" : "TELECOMMUTE", "title" : "Senior Product Manager" } ``` ```json { "@context" : "https://schema.org", "@type" : "JobPosting", "baseSalary" : { "@type" : "MonetaryAmount", "currency" : "USD", "value" : { "@type" : "QuantitativeValue", "maxValue" : 90.0, "minValue" : 70.0, "unitText" : "HOUR" } }, "datePosted" : "2026-03-02", "description" : "About the Role We need a Content Strategist to develop and execute our content roadmap. What You'll Do Develop and maintain the editorial calendar Write and edit long-form blog posts, whitepapers, and case studies Optimize content for SEO and organic discoverability Collaborate with subject matter experts across the company Analyze content performance and iterate on strategy What We're Looking For 4+ years of content strategy experience Exceptional writing and editing skills Strong understanding of SEO principles Portfolio of published long-form content", "employmentType" : "CONTRACTOR", "hiringOrganization" : { "@type" : "Organization", "name" : "" }, "jobLocation" : { "@type" : "Place", "address" : "Chicago, IL" }, "jobLocationType" : "TELECOMMUTE", "title" : "Content Strategist" } ```