Open positions — layout options

Five ways to list the open positions on careers.html, plus the row that is on the page today so the comparison has a baseline.

The objection names the constraint, so the sheet is built around it. Adi: "jika open position ada banyak akan berantakan." .roles is one flex row of full job titles — at three it fits on one line and looks tidy, which is exactly the trap. A component that only works at the count it was drawn for is not a component.

So every option below is drawn twice: with the real three, and with the same three repeated to nine. The nine are a stress test, not invented postings — every stressed frame says so — because what is being compared is not how an option looks with three roles. It is what it does when the firm is hiring.
optionat threeat ninewhat it costs
P0 — today's flex row29px89pxno alignment; wraps into a paragraph
P1 — cards173px566pxa big object for a line of text
P2 — ruled rows168px501pxplain
P3 — sticky rail303px628px280px of width, always
P4 — no index395px1183pxnothing to jump with
P5 — grouped298px587pxneeds a taxonomy the firm has not given
Measured in headless Chrome at 1440. P4's figures are its posting HEADERS, not whole postings.
Colour is not one of the variables — identical in all five, so the comparison is about what happens when the list grows. Role names brown 10.87:1, meta and labels #6B6B6B 5.33:1, doors #2F7186 5.50:1, hover #A94A29 5.68:1. Brand orange is 3.03:1 and carries no word: it is a rule and a border, nothing else.
One posting of three states no location, so the meta column is empty for it in every option. That is the live page's inconsistency, not the layout's, and no option fills it in.
P0what is on the page todaythree 29px · nine 89px

.roles: one flex row of full job titles. At three it sits on one line and looks tidy, which is the trap — look at the nine. There is no alignment to run the eye down, the titles are different lengths so nothing lines up, and a wrapped row of links reads as a paragraph rather than a list. Adi's objection, drawn.

the real three
stressed to nine — the same three roles repeated, a stand-in for a longer board, not real postings
P1cardsthree 173px · nine 566px

A card per role, three across, wrapping. The count stops mattering — nine is three rows, twelve is four — and every card is the same size whatever the length of its title, which is the one thing a flex row cannot do. Cost: a card is a big object for a line of text, so three cards take more room than three rows do, and the panel makes each role look like a product.

the real three
stressed to nine — the same three roles repeated, a stand-in for a longer board, not real postings
P2ruled rowsthree 168px · nine 501px

One row per role with the columns aligned down the page: name, place, door. Alignment is exactly what the wrapping row cannot give you, and it is what makes a long list scannable — the eye runs down one column instead of through a paragraph of links. The cheapest of the five in vertical space per role. Cost: it is plain, and at three roles it can read as a list of files rather than an invitation.

the real three
stressed to nine — the same three roles repeated, a stand-in for a longer board, not real postings
P3sticky railthree 303px · nine 628px

The roles stay on screen while the postings scroll past them, so a reader deep in the third posting can still see the first two exist. The sidebar round already measured what this costs: a sticky block taller than the viewport has a bottom the reader can never reach, so the rail is capped at calc(100vh - 48px) and scrolls inside itself — which is precisely the case a long board produces. Cost: it spends 280px of width on navigation for a page most visitors read once.

the real three
Intermediate to Senior Litigator

… the full posting runs here.

Intermediate Conveyancing Assistant

… the full posting runs here.

Articling Student

… the full posting runs here.

stressed to nine — the same three roles repeated, a stand-in for a longer board, not real postings
P4no index at allthree 395px · nine 1183px

The postings and nothing above them. Every other option here is an index plus the postings; this one asks whether the index earns its place. At three it plainly does not — the three headers are visible in one and a half screens. The frames below are the posting HEADERS, so the cost at nine is visible too: nine of them is nine screenfuls with nothing to jump with, and the page has no way to tell a visitor what it holds.

the real three
Intermediate to Senior Litigator

… the full posting runs here.

Intermediate Conveyancing AssistantVictoria, British Columbia

… the full posting runs here.

Articling StudentVictoria, British Columbia

… the full posting runs here.

stressed to nine — the same three roles repeated, a stand-in for a longer board, not real postings
Intermediate to Senior Litigator

… the full posting runs here.

Intermediate Conveyancing AssistantVictoria, British Columbia

… the full posting runs here.

Articling StudentVictoria, British Columbia

… the full posting runs here.

Intermediate to Senior Litigator

… the full posting runs here.

Intermediate Conveyancing AssistantVictoria, British Columbia

… the full posting runs here.

Articling StudentVictoria, British Columbia

… the full posting runs here.

Intermediate to Senior Litigator

… the full posting runs here.

Intermediate Conveyancing AssistantVictoria, British Columbia

… the full posting runs here.

Articling StudentVictoria, British Columbia

… the full posting runs here.

P5groupedthree 298px · nine 587px

Roles under headings. The only option whose readability improves as the board grows: three roles do not need grouping, nine do, and at twelve it is the difference between a list and an inventory. It also answers a question none of the others do — a conveyancing assistant and an articling student are not looking for the same page. The grouping is a proposal derived from the titles; the firm has not published one, which is the same standing the injury claims are grouped on. If it is wrong, this option is wrong in a way P1–P4 are not.

the real three
stressed to nine — the same three roles repeated, a stand-in for a longer board, not real postings