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 Add Link, set the Link and Title, and pick a 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 › Large screen | 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 › Pill 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 | Job card › Add Link + 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 › Pill background + round corner + border |
| Show type as text only | Job Type › Pill 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 › Make button full width on desktop / mobile |
| Underline the simple link | Simple link › Add underline below link + 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 - 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" |
| Add Link | boolean | off |
| Link settings › Link / Title / Style / Add icon / Icon | mixed | Title "Apply Now", Style simple_link |
| Applied link on full card | boolean | on |
The button appears only when a link is added and a title is filled. When Applied link on full card is on, the entire card is clickable.
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 / gradient token, image and video overlay style (none / bg-overlay-1 to 6) 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-l |
| Bottom | bottom-y-0 to bottom-4xl | bottom-l |
| 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 / custom + block alignment | default |
| Inner content container | none / full_width / custom + alignment | none |
Card
| Field | Options | Default |
|---|---|---|
| Alignment › Content alignment | left / right / center | left |
| Make a card | boolean | off |
| Make card same height | boolean | off |
| 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 Pill 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 |
|---|---|---|
| Icon width and height | number | 16 |
| Gap between icon and text | gap-0 to gap-4xl | gap-m |
| Make button full width on desktop / mobile | boolean | off |
| Simple link › Text color | default / tokens | default |
| Simple link › Font family | font-primary / font-secondary / default | default |
| Simple link › Hover color | none / tokens | none |
| Simple link › Add underline below link | boolean + offset | off |
Full-width toggles apply to button-style links only, not simple links.
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.
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.