Open Roles
Team
Source and install need .
pnpm dlx shadcn@latest add @assembli/careers-benefitsCareers Benefits
Benefits section for a careers page: up to three headline figures above the full list, grouped by category with each label pinned beside its perks. A location switch handles benefits that differ by country: values and descriptions cross-fade in place, perks not offered there fold away and group counts update. Ends with small print and a link to open roles with a count.
Props
Other props pass through to the root element.
eyebrow
React.ReactNode
Default
"Benefits"title
React.ReactNode
Default
"Looking after the people who do the work"intro
React.ReactNode
benefits*
CareersBenefit[]
highlights
CareersHighlight[]
Up to three big figures above the list.
regions
string[]
Locations for the switch, e.g. ["United States", "United Kingdom"]. Hidden when unset.
defaultRegion
string
categories
string[]
Group order. Defaults to the order categories first appear.
cta
{ label: string; href: string; count?: number }
note
React.ReactNode
Small print under the list.
| Description | |||
|---|---|---|---|
| eyebrow | React.ReactNode | "Benefits" | |
| title | React.ReactNode | "Looking after the people who do the work" | |
| intro | React.ReactNode | – | |
| benefits* | CareersBenefit[] | – | |
| highlights | CareersHighlight[] | – | Up to three big figures above the list. |
| regions | string[] | – | Locations for the switch, e.g. ["United States", "United Kingdom"]. Hidden when unset. |
| defaultRegion | string | – | |
| categories | string[] | – | Group order. Defaults to the order categories first appear. |
| cta | { label: string; href: string; count?: number } | – | |
| note | React.ReactNode | – | Small print under the list. |
