.cards-sec — 9 layout options

The section is used twice on the homepage: featured articles and the vlog. L1–L8 are article layouts; L9 is the vlog-specific one. Stages carry the locked pieces — the X16 badge, the section heading scale, the B19 button — so only the layout varies.

What is wrong with the layout today, stated plainly. This is the section where the current site leaks the most, and none of it is about prettiness:
  1. The excerpts are centred. Centred multi-line body copy forces the eye to hunt for the start of every line. Headings can be centred; three-line paragraphs should not be.
  2. There is no metadata at all — no date, no practice area, no author. A visitor cannot tell whether an article is from 2014 or last month, or whether it is about the thing they came here for.
  3. Nothing states that a card is clickable and there is no link to the archive. 427 articles exist and the homepage offers no door to them.
  4. Three items, flat hierarchy, ~700px of page. No item leads; the newest and the oldest look identical.
  5. The images carry no information (a stock photo of crops heads an estate-dispute article) while taking the most space in each card.
Every option below fixes some subset of those. Which subset is the actual decision.

This also settles the open question from the badge round: the section header does not need to become a link. A "View all articles" control gives the archive a proper door without turning a heading into a control — so the badge can stay decoration, as picked.

Placeholder data: dates, read times and practice-area tags shown below are invented to demonstrate the layout — real values come from the posts. Article titles and images are the real ones from the live homepage.

L1Baseline — three centred cards What the page has now, for reference. All five problems above are visible in it at once.

Read Our Featured Articles

Estate Dispute Case: Changing an Unfair Will

A recent BC Supreme Court case involved unfair wills with an estate distributed unequally amongst sons and daughters…

Buying a Home with Co-Ownership

Two or more people often use a co-ownership agreement when they buy an asset together, like a house or land…

Benefits of Having a Will

Will-writing, estate planning, estate administration, probate, trust funds, inheritances – the list goes on…

L2Three-up, left-aligned, with metadata Same grid, everything else fixed: copy left-aligned, a practice-area tag above each title, date and read time below, an explicit Read-more, and a View-all under the row. The smallest change that removes all five problems — nothing about the page's rhythm moves.
L3Lead article + list One article leads at full size; three more sit beside it as compact rows. Gives the section a hierarchy and shows four items in the space three used to take. The standard news-page shape, and it reads as "this firm publishes regularly."
L4Text-first list — no images Drops the images entirely: practice area, title, one line, date. Five articles in less height than three cards, and it puts the honest information first. Fits the direction doc's "distinctiveness from information design, not decoration" better than anything else here — but it is a real departure from how the section looks today.
L5Two columns, six items, small thumbs Keeps images but demotes them to 96px cells beside the text. Six articles in roughly the height of three cards — the densest option that still looks like a magazine rather than a directory.
L6Grouped by practice area Three columns headed by practice area, two articles each. Ties the writing to the triage layer the client cares most about — a visitor with an estate problem sees estate writing, and the section doubles as a second route into the practice areas.
L7Horizontal rail Cards scroll sideways, with a card cut off at the edge so it is obvious more exist. Shows six or eight items in the height of one row — but anything past the third card is a click away, and hidden content is content most visitors never see.
L8Editorial column + item rows The heading, an intro sentence and the View-all move into a left column; the articles stack as wide rows on the right with small thumbs. Uses the 1280 grid honestly instead of centring everything, and gives the section a voice ("why we write these") rather than just a label.
L9Vlog — hexagon play button + duration The vlog half of the section. The play button becomes the brand hexagon instead of a generic circle, each thumbnail carries its running time, and the topic tag says which area of law it answers. Pairs with whichever article layout is chosen — the two do not have to be identical, only consistent.

Watch Our Vlog

Ever wonder why liability insurance is a good idea? Can a speeding cyclist get a ticket? Should you be sorry for saying sorry? Short answers to the questions clients ask most.

Round 2 — featured articles, with the vlog settled

The vlog half is now L9, so this half is no longer a free choice: the two halves of .cards-sec must read as one website. Every option below therefore keeps L9’s vocabulary — left-aligned mixed-case titles, the same card rhythm, the hexagon, an archive door — and every one runs body copy at 15px, the site’s real scale, after the type-size lesson from the facts round.

Content read from the live block (#block_5d5b0fb6a2bccfb28ee24fc99bf1facf, 2026-08-21): titles, excerpts and images are the real ones, verbatim. Dates and read times are placeholder. Where an option shows more than three articles, the extra positions are drawn as labelled empty slots rather than invented articles.
Where the category label comes from — checked in the database, not assumed. The tag above each title is the post’s Yoast primary category, which is set on 396 of 427 posts. It has to be the primary term rather than “the category”, because 373 posts carry more than one — the estate article below sits in four at once (Estate Disputes, Estate Law, Unfair Wills, Wills and Estates). The three labels shown are the real primary terms: Estate Disputes, Real Estate, Estate Planning. Dates and word-count reading times are now real too, read from the posts.

The taxonomy needs a decision before launch: 29 categories with heavy overlap — Estate Law (117), Estate Planning (107), Wills and Estates (107), Estate Disputes (79) and Unfair Wills (13) all describe one practice area, and Personal Injury Law (64) sits beside Personal Injury (61) as a straight duplicate. Two ways out: merge the duplicates, or map categories onto the five practice areas and let the card show the practice area rather than the raw term. The second is less destructive and matches how the rest of the site is organised. The 31 posts with no primary term need a fallback either way.
⚠ The dates change the argument — read this before choosing. The three “featured” articles were published 3 March 2020, 1 October 2021 and 7 July 2022. But the blog is not dormant: the newest post is 2 July 2026, last month. The homepage is showing three hand-picked posts that were never rotated, so adding dates to this section as it stands would make an active blog look abandoned. That is a content decision, not a layout one, and it has only three honest answers: pull the latest posts automatically (dates become an asset), keep the hand-picked three and show no dates, or re-pick the featured three every quarter. Every option below shows real dates so the problem is visible rather than hidden.
⚠ Two real defects found in the live section — worth fixing whichever layout wins.
  1. A broken excerpt. The second article reads “What is a Co-Ownership Agreement?Two or more people…” — WordPress’s auto-excerpt has swallowed the post’s first heading and run it into the sentence with no space. Reproduced verbatim below so it is visible. The fix is hand-written excerpts, not a layout change.
  2. The images are upscaled. The live section serves the 300×200 thumbnail into a slot about 384px wide, so every card is soft. Larger sizes already exist in the media library (768×512, 1024×683) — these options use them, which is why they look sharper here than on the live site.
A1Direct sibling of L9 ~640pxExactly L9’s grid with articles in it: image, practice area, title, excerpt, date, read-more, and the View All button. The two halves become obviously one system. Safest choice, and the one that needs no further decisions.
A2Lead article + two ~660pxThe newest article takes a large frame; two more sit beside it at card size. Gives the section a hierarchy the vlog half does not need, and signals that the firm publishes regularly rather than keeping three evergreen posts on show.
A3Two large cards ~600pxOnly two articles, at nearly double the size, with the excerpt given room to actually sell the piece. Fewer, better — useful if the blog’s value is depth rather than volume. Costs one article of visibility.
A4Rows with thumbnails ~560pxFull-width rows, image left, text right, excerpt at full reading width. The most readable of the set; scales to four or five articles without redesign; contrasts with the vlog grid below instead of mirroring it.
A5Text-first list ~470pxNo images at all: practice area, title, one line, date. Shortest option, and the most information-per-pixel — but it breaks visual step with the vlog half, which is image-led. Include only if the articles are meant to read as an index.
A6Zebra rows, full-bleed ~800pxImage and text swap sides row by row, backgrounds alternating, edge to edge. Strongest reading experience at any width and the clearest hierarchy of all — and the most page height.
A7Editorial rail ~520pxHeading, an introductory sentence and the View All button hold a left column; articles stack as wide rows beside. Uses the 1280 grid honestly and gives the section a voice rather than a label. Same structure as the facts option K18, so the page repeats a pattern instead of inventing one.
A8Merge — articles and vlog in one section ~560pxThe strategic option: stop running two near-identical sections and make one “From Our Desk” block — articles two-thirds, videos one-third, each with its own door. Removes an entire section from a long homepage and ends the duplication for good. The trade: the vlog loses its own heading, so ask whether Darren considers the vlog a headline asset before proposing it.