Open Roles
A header row with a view all button, role rows grouped by team with location and type badges, and a speculative application note.
A header row with a view all button, role rows grouped by team with location and type badges, and a speculative application note.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Open Roles is the hiring moment for a careers or company page. A header row pairs the heading and lede with a quiet View all roles button on the right, then the positions sit in two groups, Engineering and Go to market, each under a small uppercase team label. Every role is one hairline separated row: a bold title, a one line muted description, a location badge, a type badge, and an arrow that signals the row is a link.
The teams and their roles come from a single typed array, so departments and openings are edited in one place and the list simply grows. The chips are the shadcn Badge primitive, so location and employment type stay legible in light and dark without any custom styling.
Reach for this block when hiring is part of the story a page tells, not an afterthought behind a nav link. For a developer tools startup it fits near the bottom of a company page, after the mission and team sections, so candidates who just read why the company exists land directly on the roles that need them. The button in the header keeps a path to the full job board when only a highlight reel fits on the page.
A natural flow around it on a Marketing Pro page:
Before
After
The obvious fit is current openings grouped by department with a path to the full board. A few other ways to use the frame:
Tip: keep every description to one short line so the rows stay level and the badges line up cleanly down the right edge.