Docs / Data & Pricing / Job Listing Table
A tabular careers list that auto-groups rows under a department heading and renders each row as a clickable apply link with a location pill. Drop it on a careers page, recruiting hub, internship board, or contractor opportunities section any time the page needs a scannable list of open roles.
The most-used controls live here so editors can rebuild the section's basic shape without scrolling. Heading toggle, alignment, and max width.
Controls whether the section heading area (badge h6, title h2, description p) appears above the table of jobs. Turn it off when this listing follows a stronger heading from the row above and you want the table to read as a continuation.
Text alignment for the heading area on desktop (993px and above).
left Left-alignedcenter Centered (default)right Right-alignedText alignment for the heading area on mobile (below 768px). Set independently from desktop so editors can center on phones while keeping desktop left-aligned.
Maximum width of the heading area in pixels. Set to 0 for no limit (heading spans the full row). Useful when you want the heading paragraph to wrap into a shorter, more legible measure even if the table below spans wider.
The section heading, the entrance animation, and the repeating list of jobs. Each row holds a category, title, location, and apply URL; rows that share a category render under one auto-generated department heading.
The badge + title + description block above the jobs table. The default markup is <h6> (rendered as a pill badge if Badge Style is enabled), <h2> for the title, and <p> for the description. Keep the h6 short (2-4 words) so the badge pill stays compact.
Triggers an IntersectionObserver-driven fade when the section scrolls into view. The fade adds a 30px slide from the chosen direction plus opacity.
none No animation (default)bottom Fade Up (slides up from below)top Fade Down (slides down from above)left Fade from Leftright Fade from Rightfade Fade Only (no slide)Reduced motion: When a visitor has prefers-reduced-motion: reduce, the animation is skipped and the section renders fully visible.
The repeating list of open positions. Each entry is one table row. Rows are grouped automatically by the Category field so any rows that share a category name render under one shared heading. List jobs in the order you want them to appear inside their group; the groups themselves appear in the order their first category occurrence shows up in the repeater.
Tip: Match category spelling exactly (including case) across rows. "Engineering" and "engineering" will render as two separate department headings.
The department or category this job belongs to. Jobs sharing the same category render under a single heading above their rows (e.g. all rows tagged "Engineering" appear below one "Engineering" heading).
The role name, rendered as the primary clickable text in each row. Keep titles to a single line where possible; long titles will wrap inside the row.
Where the role is based. Renders as a pill badge to the right of the title. Use "Remote", a city, or a hybrid combination (e.g. "Remote / NYC"). The badge bg / text / border colors and corner radius are set in Location Badge Style.
The apply destination - the entire row is wrapped in an <a> pointing here, so clicking anywhere on the row navigates. Supports external URLs (ATS portals like Greenhouse, Lever, Workable, Ashby) and HubSpot content pages (an internal job-post landing page). The row's aria-label combines the job title and location for screen readers.
Developer hooks for adding custom CSS or JS targeting. Leave blank for most pages.
Sets an id="..." on the section element. Must be unique on the page. Useful for anchor links (e.g. #about) and JS targeting.
Additional classes (space-separated) appended to the section element's class list. Useful when applying page-specific overrides via the page's custom CSS.
Everything visual: the table rows themselves, the location pill, the heading badge, section dividers, and the row's background/width/spacing.
Colors that drive the table itself: category headings, row borders, the job title in its default and hover states, and the trailing chevron icon.
The text color for the auto-generated department heading that sits above each group of rows (e.g. "Engineering", "Design"). Keep this high-contrast against the row background so the group break reads at a glance.
The 1px divider line between each job row. Match this to a slightly darker shade than the row background for a clean table look, or lighten/transparent it to make the rows feel more open.
Default color of the job title text in each row. Should be the strongest text color in the row so the title reads as the primary clickable element.
Color the job title shifts to when a visitor hovers anywhere on the row. Use a clear brand or accent color so the row reads as clickable. Pair with the row's hover state for additional affordance.
Color of the small chevron icon at the right edge of each row that signals "click to open". Keep this subtle (mid-gray) - it's an affordance, not the focal point.
The pill that displays the per-job Location field to the right of the title. All four properties (bg, text, border, radius) are editable.
Fill color of the location pill. White by default so the pill reads as a quiet utility tag rather than a competing button.
Color of the location text inside the pill. Keep this readable against the badge background; the same dark gray as the job title is a safe default.
1px border around the pill. The border keeps the badge visible when the badge background matches the row background.
Corner radius on the pill. 20px gives the default rounded-pill look; 0 squares it off into a rectangular tag; 8-12 lands somewhere in between.
Styling for the <h6> badge at the top of the section heading (e.g. "Careers" above the "Job Openings" title). Separate from the per-row Location Badge above.
Styles the <h6> inside the section heading as a pill badge instead of a plain heading. Turn off when the heading h6 should render as a normal eyebrow heading.
Fill color of the heading badge pill.
1px border around the heading badge pill.
Color of the eyebrow text inside the heading badge.
Decorative SVG shapes that sit at the top or bottom of the section, useful for blending into the section above or below.
Both top and bottom dividers share the same 9 shape options. The shape is rendered as an inline SVG matching the divider color you choose.
none No divider (default)wave-1 Wave 1 (Gentle)wave-2 Wave 2 (Medium)wave-3 Wave 3 (Organic)wave-4 Wave 4 (Subtle)wave-5 Wave 5 (Layered)tilt Tilt (Angled)curve Curve (Arc)triangle TriangleEach divider also exposes: Divider Color (set this to the background color of the adjacent section), Divider Height (20-200px, default 60), Angle Height (for the tilt divider only, 0-300px), Flip Divider (mirror horizontally), and for the bottom divider: Divider Under Content (puts the divider behind content so buttons stay clickable).
The section's wrapping row controls: background (color, gradient, image), content width, and per-breakpoint padding.
The Background Type dropdown drives which sub-controls appear:
none No background (default; section inherits the page bg)color Solid Color - reveals Background Color pickergradient Gradient - reveals Top Color, Bottom Color, and 8 direction optionsimage Image - reveals Background Image, Size (cover/contain/original), Position (5-point), Overlay toggle, Overlay Color, Blur toggle, Blur amountNote: The "Background" group is labeled "Image, Video, Color, etc." in the editor but the current build does not include a video background option - the Background Type select only exposes none/color/gradient/image.
The table reads best at a narrower measure so the title and location pill stay close together. Defaults to Slim for that reason.
standard Standard (uses theme's standard container width, set in Theme Settings > Layout)slim Slim (narrower variant, default; also set in Theme Settings)custom Custom - reveals a Custom Width number input (600-1920px, default 1200)Padding controls for the row, set independently for desktop, tablet, and mobile. Each breakpoint exposes a top/bottom/left/right spacing input. Defaults:
desktop 100px top, 100px bottom, 0 left, 0 righttablet 60px top, 60px bottom, 0 left, 0 rightmobile 40px top, 40px bottom, 15px left, 15px right