KQ-1275 · ROLE/CARD

Role Card

A job listing card whose salary band draws itself against the market range on springs.glide when you hover or focus it, the end labels counting as they travel, while the location, remote and employment chips straighten from a loose scatter on springs.snap with a cascade and the company badge flips in real perspective to show the team's size. The top-right corner is paper: pressing it, or dragging it down and left 1:1 and letting go, folds it over along the diagonal in 3D on snap, cutting the card along the crease and showing its shaded back, and unfolding glides it open. Apply morphs into a two-field form inside the card through a shared layout on glide, and a sent application morphs back into Applied as a stamp lands beside it on springs.recoil; the form is a real disclosure that takes focus on arrival and gives it back on Cancel or Escape.

KQ-1275 · ROLE/CARD

Senior Product Designer

Gaugeworks · Design systems

38 people · Posted 2 days ago

Lisbon, PT
Hybrid · 2 days on site
Full-time

Salary

€62k – €78k / year

Market €52k – €74k · 9% above median

Own the component library behind Gaugeworks' calibration tools: tokens, motion and the docs that teach them. You pair with two engineers and ship every week.

41 applicants

not saved · not applied

Open it on the Studio stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/role-card

Props

listing: RoleListing; default defaultListing; The role: title, company, team, team size, location, remote, employment, salary band, market range, summary, posted and applicants.
saved / defaultSaved: boolean; default false; The corner is folded down and the role saved.
onSavedChange: (saved: boolean) => void; default —; Fires from the press or the drag that folded or unfolded the corner.
open / defaultOpen: boolean; default false; The application form is showing.
onOpenChange: (open: boolean) => void; default —; Fires from Apply, Cancel, Escape and a sent application.
applied / defaultApplied: boolean; default false; An application has been sent and the card is stamped.
onAppliedChange: (applied: boolean) => void; default —; Fires when a submission succeeds.
onApply: (application: { email: string; link: string }) => void | Promise<unknown>; default —; Sends the application. A returned promise shows Sending with the button's width held; a rejection keeps the form open with an error.
band: "sweep" | "center" | "ends"; default "sweep"; How the salary band draws: sweeping up from its low end, spreading from its midpoint, or closing in from the scale's edges.
crease: number; default 40; The folding corner's size in px: a small dog-ear or a big fold.
expand: "inline" | "sheet"; default "inline"; Where the form opens: growing the card in place (its height glides), or as a sheet over its lower half.
reveal: "hover" | "always"; default "hover"; When the band draws, the chips settle and the badge flips: on hover, keyboard focus or a tap, or always.
formatMoney: (amount: number, currency: string) => string; default "€62k" style; How an amount is written, in the labels, the band and its spoken sentence.
applyLabel: string; default "Apply"; The Apply button's text.
appliedLabel: string; default "Applied"; The text once applied, on the button and the stamp.
size: "sm" | "md" | "lg"; default "md"; Badge (36 / 40 / 48 px) and title size; sm also tightens the padding.
accent: string; default "var(--accent)"; The offered band, the Apply fill and the warm chip icons, as any CSS colour.
sound: boolean; default false; Paper for the fold and the form, a click for Send and for the stamp landing.
disabled: boolean; default false; No reveal, no fold, no applying.
className: string; default —; Classes for the card.

Prop	Type	Default	Description
listing	RoleListing	defaultListing	The role: title, company, team, team size, location, remote, employment, salary band, market range, summary, posted and applicants.
saved / defaultSaved	boolean	false	The corner is folded down and the role saved.
onSavedChange	(saved: boolean) => void	—	Fires from the press or the drag that folded or unfolded the corner.
open / defaultOpen	boolean	false	The application form is showing.
onOpenChange	(open: boolean) => void	—	Fires from Apply, Cancel, Escape and a sent application.
applied / defaultApplied	boolean	false	An application has been sent and the card is stamped.
onAppliedChange	(applied: boolean) => void	—	Fires when a submission succeeds.
onApply	(application: { email: string; link: string }) => void \| Promise<unknown>	—	Sends the application. A returned promise shows Sending with the button's width held; a rejection keeps the form open with an error.
band	"sweep" \| "center" \| "ends"	"sweep"	How the salary band draws: sweeping up from its low end, spreading from its midpoint, or closing in from the scale's edges.
crease	number	40	The folding corner's size in px: a small dog-ear or a big fold.
expand	"inline" \| "sheet"	"inline"	Where the form opens: growing the card in place (its height glides), or as a sheet over its lower half.
reveal	"hover" \| "always"	"hover"	When the band draws, the chips settle and the badge flips: on hover, keyboard focus or a tap, or always.
formatMoney	(amount: number, currency: string) => string	"€62k" style	How an amount is written, in the labels, the band and its spoken sentence.
applyLabel	string	"Apply"	The Apply button's text.
appliedLabel	string	"Applied"	The text once applied, on the button and the stamp.
size	"sm" \| "md" \| "lg"	"md"	Badge (36 / 40 / 48 px) and title size; sm also tightens the padding.
accent	string	"var(--accent)"	The offered band, the Apply fill and the warm chip icons, as any CSS colour.
sound	boolean	false	Paper for the fold and the form, a click for Send and for the stamp landing.
disabled	boolean	false	No reveal, no fold, no applying.
className	string	—	Classes for the card.