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
- After purchase, the module appears in your Design Manager under marketplace-modules/Job Board Pro.module.
- Open any page in the Page Editor or add it to a template in the Design Manager.
- Drag Job Board Pro from the module list into your page.
- 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.
.jpg)
