Figma marketing website careers sections

Somebody scanning a careers section is looking for one thing, and it is not your values. They want to know whether their job is on the list and how quickly they can find out. Everything about the layout follows from that: how tall each row is, whether the roles are grouped, and how much scrolling stands between the heading and the twentieth job.

Row height is the whole decision

The job post block comes in three densities. The plain row is 768 by 120 on desktop and carries a title, a badge, one line of supporting text, and a details line with a 20px pin for location and a 20px clock for contract type. Card 02 wraps that in a border at 144px. Card 01 goes to 168px and adds a category line above the title and a small link button on the right.

Across five roles the difference is 728px against 936px, and the cards win comfortably on looks. Across twenty roles it is 3,008px against 3,816px, which is close to an extra screen of scrolling for the same information. Cards up to about a dozen open roles, plain rows past that, and if you are past thirty the section should be a link to a real careers page.

Group the list before you filter it

The card layouts put a 726px tab row above the list, which is the right instinct, because most people filter by department before anything else. Group on one axis only. A list that offers department and location and contract type at once makes the reader do combinatorics before discovering you have nothing for them.

Whichever grouping you pick, each row should link to that job's own page rather than to a shared listing, partly because a role deserves a URL a candidate can send to a friend, and partly because Google's JobPosting structured data has to sit on the individual posting to be eligible for the jobs experience in Search. Marking up the listing section itself does nothing.

Twenty links that all say the same thing

A long list repeats itself by design. In the card layouts every row ends with the same small link on the right, so anyone pulling up a list of links hears the same phrase twenty times with nothing to separate them.

The WCAG criterion on link purpose does allow generic link text when the surrounding context supplies the meaning, and a job row supplies it, but the sturdier build makes the whole row a link with the job title as its accessible name. The plain row type has no button at all, which is a hint at how it was meant to be assembled.

What the list does on a phone

Every row grows. The plain row goes from 120px to 176px at 343px wide, and Card 02 from 144px to 200px, because the title, location and contract type stop sharing lines. Budget for roughly half again as much height per role on mobile, which is another argument for the denser row once the list gets long.

The four plain layouts also carry a brand theme that fills the section with your primary color, while the card layouts stay on the default background, and all of it is drawn in light and dark at 1,440px and 375px. Careers sections are usually paired with a team section above them and a set of horizontal tabs doing the grouping, both of which come from the same kit. Put all three together and you have a team page.

For the build, the same layouts exist in code. Untitled UI React careers sections are open source, built with Tailwind CSS and React Aria, with the tab behavior and keyboard navigation handled for you.