Job Listing¶
A responsive grid of job cards: an employment-type / department pill, job title, short description, location, and an apply link or button. Best for: "Careers", "Open positions", and "We're hiring" sections, job boards, and recruitment landing pages.
📷 Hero image
Target file: assets/img/job-listing/hero.webp
A responsive grid of job cards, three across at desktop width on a Light background. Each bordered, softly shadowed card shows a rounded type/department pill in a Light tint at the top, a bold Dark job title, a short truncated description, a location row with a pin icon, and a Primary apply button. Captured at desktop width.
At a glance¶
Careers Jobs Grid
- What it does: renders a column-based grid (set per breakpoint) of manually entered job cards. Each card shows a type/department pill, title, truncated description, a location row, and an optional apply link styled as a simple link or one of eight button styles.
- Best used for: listing open roles you enter by hand, with cards you can make equal height and fully clickable.
- Not the right fit if: you want a people section (use Team) or general feature cards (use Content Card).
- 🔗 Live demo: (add demo link)
Add it to your page¶
- In the page editor, click Add and search for Job Listing.
- Drag it where your open roles should appear.
- Open Content › Job cards and fill Job type, optional Department, Job title, Job description, and Job location.
- Turn on Content › Show button, then set each card's Link, Title, and Style (
simple_linkorbtn-1tobtn-8). - Duplicate the card item to add more roles.
- Decide whether the whole card is clickable with Applied link on full card, and set the grid in Style › Layout settings.
Design recipes¶
Each recipe is a look plus the exact fields to reproduce it.
Bordered, shadowed cards, three up on desktop.
📷 Result
Target file: recipe-card-grid-default-look.webp
Three job cards in a row, each with a visible border and a soft regular shadow, holding a type pill, title, description, location, and apply button on a Light background.
| Field | Set to |
|---|---|
| Card › Make a card | on |
| Card › Border › Show border | on |
| Card › Shadow › Card shadow | regular-shadow |
| Layout › Columns › Desktop | 3 |
Apply buttons pinned to the same baseline across a row.
📷 Result
Target file: recipe-equal-height-cards.webp
A row of cards with descriptions of different lengths, yet every Primary apply button lines up on the same baseline along the card bottoms.
| Field | Set to |
|---|---|
| Card › Make a card | on |
| Card › Make card same height | on |
| Job card › Link › Style | btn-1 |
The whole card links to the job.
📷 Result
Target file: recipe-full-card-clickable.webp
A job card shown mid-hover to signal the entire card is a single clickable link to the role, with the apply label reading as the card action.
| Field | Set to |
|---|---|
| Content › Applied link on full card | on |
| Job card › Link › Title | your label |
Type and department in a colored, rounded pill.
📷 Result
Target file: recipe-pill-styled-type.webp
A close-up of a job card whose type and department sit together inside a fully rounded pill on a Light tint, separated by a small dot divider.
| Field | Set to |
|---|---|
| Job Type › Background | bg-light or a token |
| Job Type › Round corner | round-xxl |
| Job Type › Divider between type and department | • |
"I want to..." quick reference¶
| Goal | Setting |
|---|---|
| Make the whole card clickable | Content › Applied link on full card = on |
| Show only the button as clickable | Content › Applied link on full card = off |
| Add an apply button | Content › Show button, then Job card › Title + Style = btn-1 to btn-8 |
| Use a plain text link instead | Link › Style = simple_link |
| Align CTAs across a row | Card › Make card same height |
| Show type and department together | Fill Job type + Department + set the Divider |
| Style the type as a pill | Job Type › Background + round corner + border |
| Show type as text only | Job Type › Background = none |
| Hide the location pin icon | Job Location › Hide location icon |
| Hide location entirely | Job Location › Hide location entirely |
| 3-up / 2-up / 1-up | Layout › Columns = 3 / 2 / 1 |
| Full-width apply button | Button / link › Buttons › Make button full width [mobile] |
| Underline the simple link | Simple link › Add underline + offset |
Field reference¶
The editor is organized into a Content tab and a Style tab. Full field lists are grouped exactly as they appear in HubSpot. (190 fields total - expand each group as needed.)
Content tab¶
Section background settings
Background Type: none / color / image / video. Image and video reveal an upload field; overlay, position, blur, parallax, and dual radial glow live on the Style tab.
Click to update content - global toggles
| Field | Type | Default |
|---|---|---|
| Show job title | boolean | on |
| Show button | boolean | off |
| Applied link on full card | boolean | on |
These sit above the repeater and apply to every card. Show button reveals each card's Link group in the editor; Applied link on full card reuses that same link to make the whole card clickable.
Click to update content - Job cards (repeater)
| Field | Type | Default |
|---|---|---|
| Job type | text | "Full-time" |
| Department | text | - |
| Job Title | text | "Job title" |
| Job description | richtext (truncates to 3 lines) | placeholder |
| Job Location | text | "Location" |
| Link settings › Link / Title / Style / Add icon / Icon | mixed | Title "Apply Now", Style simple_link |
The button appears only when Show button is on and a title is filled.
Drag to section name & Developer use only
- Section name: sets this section's ID for scroll-to-section links (lowercase and underscores only).
- Add custom css here: per-module CSS injection.
Style tab¶
Color scheme
| Field | Options | Default |
|---|---|---|
| Color scheme | light / dark | light |
Drives the section's surface and text tokens. Set the background Type to none (shown as "Default (scheme)") to let the scheme supply the background colour.
Section background settings
Color: Primary, Secondary, Tertiary, Light, Dark, White, Black, White transparent, or a custom color or custom gradient (default bg-light). Image and video overlay (none / solid / gradient, plus a custom overlay color or gradient) and position, optional blur, optional parallax (scale + speed), and two independent radial glows (color, position, size, opacity).
Section divider settings
Divider type: none / shape / border / shadow.
- Border divider: from top/bottom/both, width, color (default Tertiary).
- Shadow divider: regular/light/dark/custom with x/y/blur/spread/color.
- Shape divider: 25 shapes, top/bottom/both, flip/invert, color or gradient, responsive heights.
Section spacing settings
| Field | Options | Default |
|---|---|---|
| Top | top-y-0 to top-4xl | top-xl |
| Bottom | bottom-y-0 to bottom-4xl | bottom-xl |
| Left | left-x-0 / left-m / left-l / left-xl | left-m |
| Right | right-x-0 / right-m / right-l / right-xl | right-m |
Top and Bottom also accept custom, which reveals Custom top / Custom bottom number fields for desktop, tablet, and mobile (defaults 80 / 60 / 40).
Layout settings
| Field | Options | Default |
|---|---|---|
| Columns [large / medium / small] | number | 3 / 2 / 1 |
| Gap between column [large / medium / small] | number | 24 |
| Section wrapper container | default / full-width / 8 presets 384px to 1152px / custom + block alignment | default |
| Inner content container | none / full_width / 8 presets 384px to 1152px / custom + alignment | none |
Card
| Field | Options | Default |
|---|---|---|
| Alignment › Content alignment | left / right / center | left |
| Make a card | boolean | off |
| Make card same height | boolean | on |
| Background | none / tokens / gradient / custom + optional blur | none |
| Border › Show border | boolean + width + color | off |
| Card padding [large / medium / small] | spacing | 24px all |
| Shadow › Card shadow | shadow-none / regular / light / dark | shadow-none |
| Round corner › Card round corner | round-0 to round-xxl | round-s |
Make card same height pins the CTA to the bottom so links align across a row.
Preset Settings - Job Type (pill)
| Field | Options | Default |
|---|---|---|
| Divider between type and department | none / space / • / - / | | • |
| Pill background | none / tokens / gradient / custom | bg-light |
| Text transform | uppercase / lowercase / capitalize / none | uppercase |
| Text color | default / tokens / custom | default |
| Vertical / Horizontal spacing (padding) | number | 6 / 18 |
| Round corner | round-0 to round-xxl / custom | round-xxl |
| Show border | boolean + width + color | off |
| Font size [desktop / mobile] | number | 14 / 13 |
| Make font bold | boolean | off |
Set Background to none to render the type as plain text.
Preset Settings - Job title / description
| Field | Options | Default |
|---|---|---|
| Job title › Show job title as | h1 to h6 | h5 |
| Job title › Text style | uppercase / lowercase / capitalize / as_it_is | as_it_is |
| Job description › Description style | typo-1 / typo-2 / default | default |
Each carries its own color token and spacing under element. The description truncates to 3 lines on the front end.
Preset Settings - Job Location
| Field | Options | Default |
|---|---|---|
| Text color | default / tokens | Primary |
| Hide Location Icon | boolean | off |
| Icon color | default / tokens | Primary |
| Icon width & height | number | 24 |
| Stroke width | number | 1.5 |
| Gap between icon and text | gap-0 to gap-4xl | gap-m |
| Font style | font-primary / font-secondary | font-primary |
| Hide location entirely | boolean | off |
Preset Settings - Button / link
| Field | Options | Default |
|---|---|---|
| Buttons › Button size | regular / small / large | regular |
| Buttons › Gap between icon and text | gap-0 to gap-4xl | gap-m |
| Buttons › Make button full width [mobile] | boolean | off |
| Simple link › Text color | default / custom | default |
| Simple link › Icon width and height | number | 16 |
| Simple link › Gap between icon and text | gap-0 to gap-4xl | gap-m |
| Simple link › Add underline | boolean + offset | off |
| Simple link › Make font bold | boolean | off |
Button and Simple link are styled independently: icon size only applies to the simple link (the theme's button skins do not expose one), and the full-width-on-mobile toggle only applies to the button skins.
Tips & gotchas¶
Line up the apply buttons
Turn on Make card same height so every apply button sits on the same baseline, even when descriptions differ in length.
The button needs a link and a title
An apply button only renders when both Add link is on and Title is filled. Leave the title empty to show no button at all.
Descriptions truncate to three lines
Job descriptions clamp to three lines on the live page. Write a tight summary and link to the full role rather than pasting the whole posting.
Frequently asked questions¶
Why did a job's Department disappear when I turned off Job type?
Department has no toggle of its own; it shares Show job type with the Job type field. Turn that back on and Department shows again, whether or not Job type itself has text.
Does Applied link on full card work even without an apply button showing?
No. The full-card link reuses that job's Link field from the button group, which only exists in the editor once Show button is on, and the field itself still needs a URL filled in for that card to be clickable.
Why doesn't the divider show up between type and department?
The divider only prints when both Job type and Department have text. Leave either one empty and the divider is skipped automatically, no separate setting needed.
Why does my apply link look like plain text instead of a button?
Each job's Style field defaults to simple_link, which renders as a text link, not a solid button. Change that card's Style to btn-1 through btn-8 for a filled button look.
Can different job cards use different link styles?
Yes. Style is set per card in the repeater, so one listing can use simple_link while another on the same page uses btn-1 or any other button skin.
Can this module pull job postings automatically from a job board or the CRM?
No, every card is entered by hand in the Job cards repeater. There's no HubDB, CRM object, or external job-board connection behind it, so new postings have to be added as new repeater items.
Related modules¶
- Team: the same grid pattern for people instead of roles.
- Content Card: flexible cards when you need more than a job posting.
- Call to Action: a focused "apply now" or "see all roles" prompt.