shadcn.io is not affiliated with official shadcn/ui
Featured role salary About Block for Radix UI
A careers close for a hiring marketplace: culture figures and a link to the open roles beside one featured role, its salary drawn as a band on a market scale.
Installation
Overview
A careers close for React with Radix UI, written for Bunkhouse, a fictional hiring marketplace. At the start, the invitation, three culture figures and a Shine Button whose label counts every title in OPENINGS. At the end, the first role in a framed card: a one-line summary, the salary as a sentence, the same range drawn as a band on a market scale with the midpoint ticked, and the benefits as chips. On a phone the role sits under the invitation, and the divider meets the top rule on a wide screen. The page's rails and top rule come from the Guides spine. It's built from ShineButton, Badge, Frame and Guides, with a CSS entrance and your theme's tokens for every colour. For an about page that should make one open role feel specific. The roles, the culture figures and the pay are example data.
FAQ
How do I change the roles and the pay?
The roles are OPENINGS. The button counts that array. The card shows FEATURED, the same object as the first role in the list, using its title and summary. The culture figures are CULTURE. The pay is MARKET_LOW, MARKET_HIGH, RANGE_LOW and RANGE_HIGH; the midpoint is the average of the range, and the band and the tick are percentages of the market, computed from those dollars. The chips are BENEFITS.
How is it read by a screen reader?
The heading is the section's only h2. The culture block is a definition list: the term, then the figure. The action is a link, "See 14 open roles", with the count from the array. The role is an h3. The sentence states the range, the midpoint and the market in dollars. The drawn scale is decorative, so the tick is not a second copy of those numbers. The benefits are a list of chips.
How is the salary band drawn?
The market runs from the low end to the high end. The band starts where the role's low salary falls on that scale and ends at its high salary. The tick is the midpoint of the role's own range. Change the dollar constants and the sentence, the band and the tick all move together.
Where does the button go?
It is a link to #. Point the href at the roles page. It is the only button in the block. The light on it is the Shine Button's sweep.
How does it fit on a phone?
The invitation, the figures and the link come first. The role's card follows, under a rule. The three figures share one row and their labels wrap. The scale stays a number line that does not mirror, so the low end stays at the start of that line. Nothing scrolls sideways at 320 pixels.