Filterable Open Roles List

An editorial open-roles layout: a sticky culture photo with a gradient caption overlay sits alongside department filter pills and a hairline-divided list of roles. Clicking a filter pill re-filters the visible roles by department.

By Staaarter Team

Careers

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its media-slot dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/filterable-open-roles-list.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/careers/careers51.tsx instead.

Usage

The file also exports careers51Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Careers51, careers51Demo } from "@/components/blocks/careers/careers51";

export default function Page() {
  return <Careers51 {...careers51Demo} />;
}

Props

Prop	Type	Default	Description
eyebrow	string	"Open roles"	Small uppercase label above the heading rule.
heading	string	"Come build with us"	Main heading, left column.
description	string	none	Supporting copy, right column.
photo	MediaSlotImage	none	Sticky culture photo shown alongside the roles list.
photoCaption	string	none	Caption shown in the gradient overlay at the bottom of the photo.
roles	OpenRole[]	none	Open roles, each with a title, department, location, and contract type.
className	string	none	Extra classes for the outer section element.

Types

type Department = "Engineering" | "Design" | "Sales";

interface OpenRole {
  title: string;
  department: Department;
  location: string;
  type: "Full-time" | "Contract";
}

Behavior notes

The department filter pills (All/Engineering/Design/Sales) are real client-side state: clicking a pill sets the active filter and the roles list below is actually filtered to match, no roles are hidden with CSS.
The hover arrow on each role row and the sticky photo positioning are CSS-only, nothing else in this block is wired to a backend.

More Careers Blocks

View all →

job-listings-list

Job Listings List

A vertical list of open roles with department badge, location, employment type, and an apply link per row.

job-openings-grid

Job Openings Grid

A responsive card grid of open roles with department badge, location, employment type, and an apply link.

department-grouped-positions

Department-Grouped Positions

Open jobs grouped under department headings with minimal single-line rows for title, location, and type.

perks-open-positions

Perks & Open Positions

A benefits icon grid followed by a list of open positions with title, department, and location.

featured-role-with-positions

Featured Role with Positions

A larger featured job card with a 'Hiring now' badge, followed by a compact list of additional openings.

tab-filtered-job-board

Tab-Filtered Job Board

Department tabs (All/Engineering/Design/Marketing) that filter which job list is shown.