shadcn.io is not affiliated with official shadcn/ui
Day Track Hiring Process Block for Solid
A hiring process section for an applicant tracking company's own about page: five stages drawn to scale over fourteen days, five cells saying what to expect at each, and a promise to reply within two days.
Installation
Overview
A hiring process section for Solid with Ark UI, written as the about-page take of Hirewick, a fictional applicant tracking company describing its own hiring loop. A band draws the loop to scale: five stages, Application, Intro call, Working session, Team conversation and Offer, as outlined bars on a day ruler from Day 0 to Day 14, each as wide as it is long. Below it, five cells that share their hairlines say what to expect at each stage, with its days as a badge, and a closing line makes the promise: a reply within two days of every stage, whatever the answer. The track is a drawing for the eye and the cells are the text; below lg the track keeps only the stage numbers and the cells stack. It's built from Badge and Guides, with a CSS entrance and your theme's tokens for every colour. For careers pages and about pages, for any company that wants candidates to know the length and the shape of the process before they apply. The days and the promise are example data.
FAQ
How do I change the stages and their lengths?
Edit STAGES at the top of the file: each has a name, an expect sentence and the number of days it takes. The track has one column per day, so a stage's bar spans as many columns as it has days, the "Day 4–8" badges are computed from the running total and the ruler's ends follow the sum. The closing promise is plain text in the last paragraph. The track is laid out for a total of 14 columns: if your total differs, change grid-cols-14 and the calc(100%/14) in the day lines to the new number.
Is the track really to scale?
Yes: it is a grid with a column per day, and a faint line at each day, so a four-day stage is exactly twice as wide as a two-day one. Below a wide screen the bars are too narrow for names, so they keep only the stage's number; the cells below carry the names and the days.
How is it read by a screen reader?
The track is hidden from assistive technology on purpose: it repeats what the cells say. The cells are an ordered list, one item per stage with its name as an h3, its days and what to expect, and the closing promise is a paragraph, so a reader gets each fact once, in order. The numbers beside each name are decorative.
What happens on a phone?
The cells stack, each full width with its day badge at the end of its first line, and the track keeps its bars with only their numbers. Between the two bands and under the cells there is one hairline each, rail to rail. Nothing scrolls sideways at 320 pixels, and the track and its ruler keep their order in a right-to-left layout while the cells flip.
Is it only for hiring?
It is a process drawn to scale, so it works for anything that runs as stages over days: a security review, an implementation, a refund. Rename the stages and the closing promise and it reads the same way. The "reply within two days" line is the one piece of copy that is a commitment: only keep it if you will.