.claims — layout optionsNine ways to draw the thirteen injury claims — six families, and the four-column grid drawn three ways because of what four does to thirteen. Every option carries the real thirteen, their
real URLs, and the photograph the live claim page itself uses for each — all executed
out of gen_injuries_index.py, so nothing here can drift from
injuries-index.html.
| option | height at 1280 | tile | last row |
|---|---|---|---|
| C1 — grid, caption under | 671px | 230×173 | three of five |
| C2 — caption on the image | 722px | 230×230 | three of five |
| C6 — hexagon tiles | 945px | 230×266 | three of five |
| C5 — a row per group | 1018px | 193 / 302 / 411 | each row is full |
| C3 — mosaic, one leading | 1088px | 296×220, lead 624×472 | no hole at all |
| four columns — 1280 = 4 × 296 + 3 × 32 | |||
| C7 — four across, as it falls | 1096px | 296×222 | one beside three holes |
| C7·b — last row centred | 1096px | 296×222 | one, centred |
| C7·a — first claim across the top | 1179px | 296×222, band 1280×300 | no hole at all |
| C4 — rows with thumbnails | 1314px | 96×72 | one column, no ragged row |
blackandwhitemiata — so all thirteen are filtered to match rather than the
cyclist and the pedestrian reading as mistakes. Colour: names brown 10.87:1, hover
#A94A29 5.68:1. Brand orange is 3.03:1 and carries no word anywhere here; it
is a rule under a hovered tile and nothing else.The page as it stands. Five across on the team page's bench module — 230.4px cell, 32px gutter — so people and claims are drawn by one card rather than two that nearly match. Thirteen leaves a row of three, which reads as a row rather than an orphan. The caption band is what makes it 671px; every other grid option here spends that space differently.
The name moves onto the photograph, so there is no caption band — and that room goes straight back into the picture, which grows from 173 to 230px tall, a third bigger. It does not make the section shorter: 722 against C1's 671, because 57px of extra picture on three rows costs more than three caption bands saved. The scrim is the contrast, not decoration: white on rgba(0,0,0,.86) measures 8.8:1 over a mid photograph and 6.0:1 over the brightest of the thirteen. A lighter scrim would fail on the bright tiles only — the worst kind of failure, because it looks right on whichever ones you happen to check. Cost: a name over a picture is always harder to scan than a name on white.
The only option here where thirteen fits with no hole, and it is arithmetic: a 4-column grid is 16 cells over four rows, a 2×2 lead takes four, and the remaining twelve cells hold exactly the other twelve claims. It also answers a question the flat grid cannot: the thirteen are not peers — car accidents is the claim most people arrive for — and the lead tile is 624×472, the only place on the page a photograph is big enough to be a photograph. Cost: 1088px, and which claim leads is the firm's call, not a layout's.
The photograph becomes a 96×72 thumbnail and the name becomes the row. The most scannable by far — thirteen names in one column, read top to bottom in one pass, with sentence-case names at 17px instead of thirteen shouted capitals. It is also the tallest of the six at 1314 — thirteen rows is thirteen rows. Cost: it spends the pictures. At 96px a photograph is an identifier, not an image, and four of these thirteen (the dog's jaw, the seatbelt, the crosswalk) are close crops that stop reading at that size.
Each group fills the full 1280, so the tile size IS the group size — six across at 193px, four at 302, three at 411. The grouping becomes legible without a single label having to explain it. That is also the cost: Road Accidents ends up with the smallest tiles because it has the most claims, which is exactly backwards if importance is what the size is saying. And the grouping is home_v1's proposal, not the firm's — this is the option that breaks if the taxonomy changes.
The brand's shape carrying the photographs, on ratio: 230.4 / 0.8660254 = 266.03. The most unmistakably League-and-Williams of the six. Cost is in the shape itself — a hexagon mask cuts four corners off every photograph, and none of these thirteen was framed for it; the dog and the motorcycle are already crops of crops. It is also the tallest per row, so it buys its identity with vertical space.
Adi asked for a four-column grid, and this is it, drawn honestly: 1280 = 4 × 296 + 3 × 32, tile 296×222. Four is the column count thirteen likes least — 4 + 4 + 4 leaves one claim alone on a fourth row beside three empty cells. Five leaves a row of three, which reads as a row; one tile beside three holes reads as a mistake, and no amount of styling changes that. What the width buys is real though: at 296px the tile is 28% wider than C1's 230, so the photographs are the biggest of any even grid here.
The orphan cured by changing the count, not by stretching a tile. The first claim takes the whole top row at 1280×300 and the other twelve fill three rows of four exactly — 1 + 4 + 4 + 4 = 13, nothing left over. Same trick as C3 and the same question behind it: this only works if one claim genuinely leads, and which one is the firm's call. Cost: the band is 1280px of photograph, and only two of the thirteen sources are wide enough not to be cropped hard to fill it.
The orphan cured by moving it. Flexbox rather than grid, so the short row centres itself; the three full rows are untouched, because 4 × 296 + 3 × 32 is exactly 1280 and there is nothing to centre until the row that is short. The cheapest fix on the sheet — one property — and it keeps all thirteen the same size, which C7·a does not. Cost: a centred single tile still announces that the count did not divide; it just does it politely.
The literal request, and the measurement is the answer: eleven of the thirteen photographs are already black and white in the source file, so filter:grayscale(0) returns nothing on eleven of them. Look at the hovered row — only the cyclist and the pedestrian change. A hover that works on two tiles in thirteen is worse than no hover, because the reader learns the rule from whichever tile they touch first and the other eleven then look broken.
What the request actually wants, delivered on all thirteen. An orange layer with mix-blend-mode:color takes its HUE from the brand and its LUMINANCE from the photograph, so it does not care whether the source had colour: every tile warms identically. It is also the only version that is the firm's colour rather than whatever the stock photograph happened to be shot in. Cost: it is a strong effect, and orange over a dark photograph goes muddy — the dog and the passenger tiles are the ones to judge it on.
No colour at all: brightness(1.18) contrast(1.06), so the tile brightens under the cursor. Works on thirteen for the same reason H·b does — it asks nothing of the source — and it keeps the page monochrome, which is the tone every other page in this rebuild is already in. The quietest of the three, and the only one that survives the November shoot changing every photograph.
