.team — layout options
Eight arrangements for the homepage team block. Every name, role, portrait and link below is the live site’s,
verified against the database (lawyers post type, 13 published records) and against a read-only read of
www.leaguelaw.com on 2026-08-23. Nothing is invented.
What is actually stored — check this before judging any layout:
- 13 records: twelve people plus one recruitment tile (“IS IT YOU?”).
- No job-title field exists. The
lawyers post type has exactly one custom field, email
(on 12 of 13), and no taxonomy at all. “Principal” and “Associate” are printed by the theme,
not stored per person — which is why eleven different people carry one identical label.
- A one-line practice summary exists for only 7 of the 12 (the
post_excerpt). Five have none:
Darren Williams, Andrew Broadley, Donald E. Linge, Robert Margolis, Joji Kawaguchi.
- Every tile already links to
/lawyers/<slug>/.
menu_order has two ties (5,5 and 9,9) and gaps (…12, 16, 17), so the order of two
pairs is currently decided by record ID rather than by anyone’s intent.
The portraits, measured:
- All twelve are black-and-white — mean chroma 0.1–3.5 out of 255. That is a real asset: the set
is visually consistent and a dark ground (P7) suits it.
- Five are low-resolution: Rob Graham, Donald E. Linge, Matthew Melnyk and Robert Margolis are 260×345,
Darren Williams 287×378. The other seven are 761×1024 or larger. This sets a hard ceiling: render a
portrait wider than about 130px and those five soften visibly on a retina screen. P4 shows one at 300px on purpose so
the effect is visible — the small files need re-shooting before any large-portrait layout can ship.
- Backgrounds do not match. Corner luminance runs 44 to 124, so the studio grounds range from near-black to
light grey. Any layout that bleeds portraits edge-to-edge will show that; the framed versions here do not.
- The careers tile is not a portrait.
law-sm.jpg is 820×280 — a colour landscape
photograph — forced into a portrait frame in the current build. Six of the eight options below take it out of
the grid entirely.
⚠ Content questions for Darren, not design decisions.
- Eleven people are all labelled “Associate.” The intro paragraph promises “our team of
lawyers and staff”, but no staff appear, and Rob Graham’s own bio calls him a solicitor.
Real titles need to be written and stored per person.
- Typo in a stored bio: Vera Syrma’s summary reads “is an association lawyer”.
- Five missing practice lines (listed above). P5 is the strongest option for a visitor choosing who to
call and it cannot ship without them.
- Order. Two pairs tie in
menu_order; someone has to say what the intended sequence is.
- Five portraits need re-shooting if any large-portrait layout is chosen.
P1Baseline — the live block, replicated
~800pxThe current homepage team block, for reference: a 332px copy rail beside a four-across grid of 128×168 portraits. Two faults are visible before any styling opinion is formed. Thirteen tiles in a four-column grid leaves an orphan — three full rows and one lonely tile. And the thirteenth tile is the careers advert, a colour landscape photograph (820×280) forced into a portrait frame beside twelve black-and-white headshots; it is a different kind of object wearing a person's clothes.
Your Team at
League and Williams
Trusted advice, just results – practicing in the areas of personal injury, estate disputes, marine law, real estate conveyance and estate planning our team of lawyers and staff work together to ensure every client is treated with care.
Our firm is committed to delivering quality legal advice and maintaining high levels of client satisfaction by remaining focussed on the interests of our clients and getting the best results possible.
P2Six across, careers pulled out
~620pxThe smallest change that fixes both faults at once: the careers advert leaves the grid and becomes its own band underneath, which leaves twelve people — and twelve tiles perfectly. Six across, two rows, portraits at 132px. The copy moves above the grid as a centred intro with the same hexagon badge the vlog, articles and testimonials sections use, so the team section stops being the one section with a different head. Shortest option here.
P3Hexagon portraits
~640pxThe same six-across arrangement with the portraits cut to the brand hexagon — the shape already carrying the section badge, the vlog play button, the facts icons and the hive in the footer. It is the strongest tie between this section and the rest of the page. Two things to judge with your own eye: the hexagon crops the top corners of the head, so the framing has to be right for every one of the twelve; and it makes a portrait read as an emblem rather than as a person, which for a law firm may be exactly wrong.
P4The principal leads
~700pxThe one arrangement that uses a hierarchy the data actually has: the site stores one Principal and eleven Associates, so Darren Williams leads at large size with the section's own copy beside him, and the other eleven run beneath at 118px. Honest about the firm's shape and it gives the intro paragraph somewhere sensible to live. The cost is that it puts one person's face at the size of a hero, which the client’s own brief pushes against — the brief insists the firm is teams, not individual lawyers, and the current facts copy was criticised on exactly that ground.
P5Cards with a practice line
~900pxFour across, each tile carrying the one-line practice summary stored with that lawyer — what they actually do, which a name and the word “Associate” do not say. Shown here with the gaps left visible on purpose: only seven of the twelve have that line stored, and the other five are marked rather than quietly padded. This is the most useful option on the page for a visitor choosing who to call, and it cannot ship until five more lines are written. That is a content job, not a design one.
P6Rail kept, six across
~560pxFor comparison with P2: the copy rail survives, but the grid goes to six across so the twelve fit in two rows beside it instead of four. The careers link becomes a text link at the foot of the rail, where a recruitment message belongs — next to the words about how the firm works, not in the row of faces. The most compact option here, and the one that changes the least.
Your Team at
League and Williams
Trusted advice, just results – practicing in the areas of personal injury, estate disputes, marine law, real estate conveyance and estate planning our team of lawyers and staff work together to ensure every client is treated with care.
Our firm is committed to delivering quality legal advice and maintaining high levels of client satisfaction by remaining focussed on the interests of our clients and getting the best results possible.
Is it you? Go to Careers Page →
P7Dark band
~640pxSix across on the warm near-black, which the portraits are built for: all twelve are black-and-white (measured — mean chroma 0.1–3.5, so they are monochrome, not merely muted), and they gain contrast on a dark ground in a way they never do on white. Also a structural argument: this section sits directly above the testimonials, so a dark team band would put two dark blocks in a row unless the facts section moves. Worth seeing before deciding the page’s light/dark rhythm.
P8Names only, no portraits
~430pxThe option that questions the premise. Twelve names, twelve roles, twelve links, no faces — a list a visitor can read in one pass instead of a wall of small photographs at wildly different quality. It is the only option here that is immune to the portrait problem entirely, and the only one that follows the direction document's line that distinctiveness should come from information design rather than decoration. Include it in the comparison even if it loses: it sets the bar the portrait options have to clear, which is “do these twelve pictures earn 370px of page?”
ROUND 2Dark portrait cards — from Adi’s referenceBoth substitutions are applied throughout: the badge is email, not LinkedIn, and it is the brand hexagon, not a circle. The email is real data — every one of the twelve has an @leaguelaw.com address stored in the email field, so nothing is invented. Three things this reference forces into the open, none of them stylistic:
(1) It makes the missing role data impossible to ignore. In the reference the three people carry three different roles — Family, Criminal, Business. Ours carries “Associate” eleven times in a row in exactly the position the reference gives its most useful word. The layout does not cause that problem, it amplifies it: real titles have to be written and stored before this look pays off.
(2) It puts twelve email addresses on the homepage in plain mailto: links, where the live site currently publishes none. That is harvestable by spam bots. If that is unwelcome, the badge can point at the profile page’s contact section instead — same shape, same position, no exposed address. Worth deciding before this ships, not after.
(3) It needs large portraits, and five of ours are 260×345. R2 shows what that looks like at the reference’s own scale. Re-shooting those five is a precondition for this whole family, not a nice-to-have.
One build note: the reference card looks like a single link but holds two. Nested <a> is invalid HTML, so each card is a <div> with two sibling links — portrait and name to the profile, hexagon to the mail. The hover fill is on the card, which is allowed here because both children really are links.
R1Dark cards — six across
~910pxThe reference, adapted to twelve people: six across in two rows, 3:4 portraits, the hexagon email badge on the lower-right of each photograph, name in heavy uppercase with the role beneath. The careers advert is out of the grid as a band, so the count divides cleanly. This is the workable size for this look — and even here it is not free: at ~197px per card, the five low-resolution portraits (Rob Graham, Donald E. Linge, Matthew Melnyk, Robert Margolis, Darren Williams — 260×345 or smaller) run at about 1.3× their native width, which is fine on an ordinary screen and visibly soft on a retina one.
R2Dark cards — the reference’s own scalePICKED
~1730pxThe same thing at the reference’s actual card scale — four across, big cards, big names. Included so the cost is seen rather than described. Two hard numbers. Height: ~1690px. Twelve people at this scale is three tall rows; the block becomes the largest thing on the site by a wide margin. Resolution: this one cannot ship as-is. At ~304px per card the five small portraits are being upscaled past their native 260px, so they are soft on every screen, not just retina. The reference works because it shows three people; we have twelve. Revised 2026-08-23: the email hexagon straddles the seam between the photograph and the content box — the same construction as .facts .c .ic in home-v2.html — and is grey at rest, orange on hover. It does cover the bottom ~25px of each photograph, exactly as the facts card does; that is the intended look, not a defect. The content box carries extra top padding so the name clears the hexagon instead of squeezing past it, which costs ~14px per card (~40px over three rows) and is reserved space rather than a stray margin. Applied to R1, R2 and R4. R3 is the exception: it has no content box, so there is no seam to straddle — its badge sits on the photograph, grey there too.
R3Dark cards — name over the photograph
~740pxName and role laid over the foot of the photograph under a scrim, hexagon badge moved to the top right. Removes the text block under each card, so the section comes in shortest of the four while keeping the portraits large. Two consequences to weigh: the names sit on twelve different backgrounds rather than one flat panel, so legibility depends on the scrim doing its job at every crop; and the lower third of every portrait is covered, which is where several of these photographs put the subject.
R4Same cards, light ground
~910pxThe identical construction on the off-white ground, to test whether this look actually needs the dark. It mostly does — but this version is worth having in front of you before the page’s light/dark rhythm is fixed, because the section directly below is the testimonials and the facts block is already dark. The email hexagon here sits in a dark translucent tile so it stays legible against light shirts and pale studio backgrounds.
