Organisms composed into the page templates the site actually ships. Every frame below holds the built page itself, served from the same build as this one — so these are not screenshots and they cannot go stale. Change a component and the frame changes with it.
Source src/_includes/base.njk and the page templatesFrames Live pages, same build, same originAppearance Frames follow the switcher above
How a page is assembled
There are five templates and a shell. The shell decides how the page opens — a full screen hero, a plain band, or nothing at all — and the template fills the rest. Nothing below is a one-off.
Every page passes through base.njk, which reads three switches out of the front matter and composes the rest.
src/_includes/base.njk
What a page declares, and what the shell does about it
Front matter
What it gives the page
Used by
hero: true
Full screen hero with the intake card in it, and the recognition strip under it
Home, every practice area page
bare: true
No opener at all — the page carries its own full bleed sections
Attorney pages
neither
A plain band with the eyebrow, the h1 and an optional single call to action
Writing, attorneys, contact, privacy
wide: true
Content fills the band instead of sitting on the reading measure
Any page whose content is a grid
heroMedia
Chooses colour, image or video behind the hero, and adds the scrim pair for the last two
Home takes video, areas take images
Home
The one page that leads with a clip. Full screen hero, the intake card on it, the recognition strip, then the firm in three bands and the offices as cards.
Composed of: the bar, the full screen hero, the intake card, the recognition strip, a service grid, an attorney grid, office cards, the legal notice and the footer.
<div class="frame">
<div class="frame-bar">
<button type="button" class="spec-btn" data-w="100%" aria-pressed="true">Full</button>
<button type="button" class="spec-btn" data-w="1024px" aria-pressed="false">Laptop</button>
<button type="button" class="spec-btn" data-w="768px" aria-pressed="false">Tablet</button>
<button type="button" class="spec-btn" data-w="390px" aria-pressed="false">Handset</button>
<p class="frame-url"><a href="/" target="_blank" rel="noopener">/ ↗</a></p>
</div>
<div class="frame-hold"><iframe src="/" title="The Wrenfield home page" loading="lazy"></iframe></div>
</div>
<p class="specnote"><b>Composed of:</b> the bar, the full screen hero, the intake card, the recognition strip, a service grid, an attorney grid, office cards, the legal notice and the footer.</p>
Practice areas
Three levels: the whole taxonomy, one area, one page inside an area. Each level opens the same way and narrows what it is asking about.
Every area as a card, then every area again as a numbered row with its own pages beside it. The same information twice, because one form is for scanning and the other is for finding.
Composed of: the bar, a plain band opener, a practice area grid, area rows, the legal notice and the footer.
<div class="frame">
<div class="frame-bar">
<button type="button" class="spec-btn" data-w="100%" aria-pressed="true">Full</button>
<button type="button" class="spec-btn" data-w="768px" aria-pressed="false">Tablet</button>
<button type="button" class="spec-btn" data-w="390px" aria-pressed="false">Handset</button>
<p class="frame-url"><a href="/practice-areas/" target="_blank" rel="noopener">/practice-areas/ ↗</a></p>
</div>
<div class="frame-hold"><iframe src="/practice-areas/" title="The practice areas landing page" loading="lazy"></iframe></div>
</div>
<p class="specnote"><b>Composed of:</b> the bar, a plain band opener, a practice area grid, area rows, the legal notice and the footer.</p>
The hero tags on this page are links: each one goes to the page inside the area that answers it. The hidden area field in the intake card carries the area's slug through to the confirmation, which is how that page knows which writing to offer.
<div class="frame">
<div class="frame-bar">
<button type="button" class="spec-btn" data-w="100%" aria-pressed="true">Full</button>
<button type="button" class="spec-btn" data-w="768px" aria-pressed="false">Tablet</button>
<button type="button" class="spec-btn" data-w="390px" aria-pressed="false">Handset</button>
<p class="frame-url"><a href="/practice-areas/estate-planning/" target="_blank" rel="noopener">/practice-areas/estate-planning/ ↗</a></p>
</div>
<div class="frame-hold"><iframe src="/practice-areas/estate-planning/" title="The estate planning practice area page" loading="lazy"></iframe></div>
</div>
<p class="specnote">The hero tags on this page are links: each one goes to the page inside the area that answers it. The hidden <code class="mono">area</code> field in the intake card carries the area's slug through to the confirmation, which is how that page knows which writing to offer.</p>
The narrowest level. A breadcrumb, a checklist of what the work involves, the writing filed under it, the attorneys who do it, and the intake card away from a hero.
Composed of: the bar, a plain band opener, a breadcrumb, a checklist, the mini intake card, an area list, a who row, the legal notice and the footer.
<div class="frame">
<div class="frame-bar">
<button type="button" class="spec-btn" data-w="100%" aria-pressed="true">Full</button>
<button type="button" class="spec-btn" data-w="768px" aria-pressed="false">Tablet</button>
<button type="button" class="spec-btn" data-w="390px" aria-pressed="false">Handset</button>
<p class="frame-url"><a href="/practice-areas/estate-planning/funding-the-trust/" target="_blank" rel="noopener">/practice-areas/estate-planning/funding-the-trust/ ↗</a></p>
</div>
<div class="frame-hold"><iframe src="/practice-areas/estate-planning/funding-the-trust/" title="A practice sub page" loading="lazy"></iframe></div>
</div>
<p class="specnote"><b>Composed of:</b> the bar, a plain band opener, a breadcrumb, a checklist, the mini intake card, an area list, a who row, the legal notice and the footer.</p>
Attorneys
The one place the site drops its shell entirely. An attorney page is bare: it carries its own full bleed hero, its own sticky section nav and eleven numbered sections.
The longest template on the site: a cut out hero over a clip, a figures strip, and sections 01 to 11 with their own sticky navigation. Every section on this page also exists on its own in Organisms.
Composed of: the bar, the attorney hero, the figures strip, the section nav, a narrative, a marks wall, an area grid, fee bands, a declines list, an essay, selected matters, endorsements, the panel section, credential columns, the contact close and the footer.
<div class="frame">
<div class="frame-bar">
<button type="button" class="spec-btn" data-w="100%" aria-pressed="true">Full</button>
<button type="button" class="spec-btn" data-w="768px" aria-pressed="false">Tablet</button>
<button type="button" class="spec-btn" data-w="390px" aria-pressed="false">Handset</button>
<p class="frame-url"><a href="/attorneys/claire-osei/" target="_blank" rel="noopener">/attorneys/claire-osei/ ↗</a></p>
</div>
<div class="frame-hold"><iframe src="/attorneys/claire-osei/" title="An attorney page" loading="lazy"></iframe></div>
</div>
<p class="specnote"><b>Composed of:</b> the bar, the attorney hero, the figures strip, the section nav, a narrative, a marks wall, an area grid, fee bands, a declines list, an essay, selected matters, endorsements, the panel section, credential columns, the contact close and the footer.</p>
Writing
The archive and one piece. The archive filters itself in the browser without a reload; a piece carries the drawing for its practice area at the top.
Every piece as a card, with a filter above. The filter is hidden entirely until script has run, because a filter that cannot filter should not be advertised.
A drawing, a standfirst, the writing on the reading measure, and the way back. The drawing is inlined rather than linked, because it is drawn in the page's own colours and has to be part of the page to read them.
Switch the appearance in the bar above and watch the drawing recolour inside the frame. It is inline SVG using the page's own tokens — .aa-line takes the ink, .aa-solid takes the brand — so it is never a picture of the light theme sitting in the dark one.
<div class="frame">
<div class="frame-bar">
<button type="button" class="spec-btn" data-w="100%" aria-pressed="true">Full</button>
<button type="button" class="spec-btn" data-w="768px" aria-pressed="false">Tablet</button>
<button type="button" class="spec-btn" data-w="390px" aria-pressed="false">Handset</button>
<p class="frame-url"><a href="/articles/what-probate-costs/" target="_blank" rel="noopener">/articles/what-probate-costs/ ↗</a></p>
</div>
<div class="frame-hold"><iframe src="/articles/what-probate-costs/" title="A piece of writing" loading="lazy"></iframe></div>
</div>
<p class="specnote">Switch the appearance in the bar above and watch the drawing recolour inside the frame. It is inline SVG using the page's own tokens — <code class="mono">.aa-line</code> takes the ink, <code class="mono">.aa-solid</code> takes the brand — so it is never a picture of the light theme sitting in the dark one.</p>
The ask, end to end
Two pages that only exist because of the form: where it is asked in full, and where it lands.
The confirmation reads the practice area the form was sent from and offers the writing filed under it. With no area it falls back to the newest pieces, so the page is never empty.
<div class="frame">
<div class="frame-bar">
<button type="button" class="spec-btn" data-w="100%" aria-pressed="true">Full</button>
<button type="button" class="spec-btn" data-w="768px" aria-pressed="false">Tablet</button>
<button type="button" class="spec-btn" data-w="390px" aria-pressed="false">Handset</button>
<p class="frame-url"><a href="/thank-you/" target="_blank" rel="noopener">/thank-you/ ↗</a></p>
</div>
<div class="frame-hold"><iframe src="/thank-you/" title="The confirmation page" loading="lazy"></iframe></div>
</div>
<p class="specnote">The confirmation reads the practice area the form was sent from and offers the writing filed under it. With no area it falls back to the newest pieces, so the page is never empty.</p>