shadcn.io is not affiliated with official shadcn/ui
Open Roles Footer Block for Ark UI
A footer for a hiring studio: the wordmark and two link groups, then a band of three open-role rows, each one link with the role, team, place and a type badge, under a count and a Shine Button to all the roles.
Installation
Overview
A hiring footer for React with Ark UI, for a studio that wants every page to end on its open roles. A first band holds the wordmark with one sentence at the start and two link groups (Studio and Careers) in a nav labelled Footer at the end. Under it, a band headed "We’re hiring" shows the open-role count, a Shine Button that goes to all the roles and three roles ruled apart from rail to rail. Each row names the role, its team, where it sits and a type badge (Full-time, Contract), with an arrow at the end, and the whole row is one link, tinted on hover. A legal band closes the page. On a phone each row becomes the role over a line of team, place and badge. The roles are made up and the block has no JavaScript of its own.
FAQ
How do I change the roles?
Edit the ROLES array at the top of the file: each role has an id, a title, a team, a place and a type. The number in the heading and on the button is OPEN, a separate constant, because the footer shows the newest few of a longer list. Point each row's link at the role's page, and the button at your careers page.
Why is the whole row a link?
The role title is the link, and a stretched pseudo-element makes the row its click target, so the accessible name is just the role title, not the team, place and type read out as one long link. Keyboard focus draws a ring inside the row.
Can the rows come from an applicant tracking system?
Yes. The rows read a plain array, so you can fill it from your system on the server and pass it in. Keep the footer to the newest three or four roles and let the button carry the rest.
How does it fit on a phone?
The wordmark comes first, then the two groups side by side, then the roles. Each row stacks the title, team, place and badge on their own lines with the arrow at the end of the title, and nothing scrolls sideways at 320 pixels.