Staaarter

Role Spotlight

A full job posting layout: responsibilities and requirements lists fill the main two-column-wide area, alongside a sidebar apply card (job title, location, employment type, salary) that stays pinned in view with pure CSS `lg:sticky lg:top-24` while the main column scrolls.

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 badge, button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/role-spotlight.json

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

Usage

The file also exports careers46Demo, 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 { Careers46, careers46Demo } from "@/components/blocks/careers/careers46";

export default function Page() {
  return <Careers46 {...careers46Demo} />;
}

Props

PropTypeDefaultDescription
titlestringnoneJob title.
departmentstringnoneDepartment badge shown above the title.
locationstringnoneJob location, shown in the sidebar.
employmentTypestringnonee.g. Full-time, Contract, shown in the sidebar.
salaryRangestringnoneDisplayed salary range, shown in the sidebar.
introstringnoneIntro paragraph above the responsibilities list.
responsibilitiesstring[]noneResponsibilities list items.
requirementsstring[]noneRequirements list items.
applyHrefstring"#"Href for the sidebar Apply now button.
classNamestringnoneExtra classes for the outer section element.

Behavior notes

  • Fully static: all lists and the sidebar card render fixed demo data, there is no client-side state.
  • The sidebar's sticky positioning is pure CSS (`lg:sticky lg:top-24` inside a `grid lg:grid-cols-3` layout), no JS scroll listener involved; on smaller screens it sits inline above/after the content instead.
  • The Apply now button is a link (`render={<Link href="#" />}`) with a placeholder href, nothing is submitted anywhere.