Pattern Lab
62 reusable page sections. A pattern is a whole section you drop into a page: it owns its own layout, spacing, and field. Primitives and motifs are the smaller pieces patterns are built from, and those live in the Style Guide. You do not need to read it before using this page.
How to choose one
Start with position and purpose. Filter by where it sits on the page and what job it does for the reader, then narrow by content type. The category and layout filters describe the internal system and are most useful once you already have a shortlist.
Compare before you commit. Shortlist two or three and open compare. The heroes and education groups are large and several entries read alike until you see them next to each other.
Statuses. Under review is built and awaiting visual sign-off. Approved has passed it. In use is live on a production page. Experimental is speculative. Deprecated is on its way out. Untriaged means nobody has assessed it yet. 54 of 62 are in that state pending the catalogue audit, so treat their facets as derived rather than declared.
To use one, import the component directly from src/components/patterns/. Do not route production through patternComponents; that map exists for this page. Every pattern takes typed props with working defaults. Do not pass demoProps.
- HRO-01 Untriaged
Category hero
The homepage opening. States the category claim and immediately shows the horizon vocabulary, so the reader meets the organising idea before the first scroll.
Heroes Held column Dark field Derived
- HRO-02 Untriaged
Service level hero
Opens each of the four level pages. Leads with the customer intent quote and states the responsibility split above the fold, which is the only thing that actually differs between levels.
Heroes Held column Light field Derived
- HRO-03 Untriaged
Plan artifact hero
Opens the Home Plan page. The plan excerpt does the persuading rather than an adjective, because the plan is the product.
Heroes Held column Light field Derived
- HRO-04 Untriaged
Article hero
Journal article opening. Sets reading measure immediately and exposes the published and updated dates, which matters for both trust and AEO.
Heroes Editorial column Light field Derived
- HRO-05 Untriaged
Application hero
Opens the apply page. Answers the question every form provokes, which is what happens after I send this, before the form is reached.
Heroes Held column Dark field Derived
- PRF-01 Untriaged
Reactive against managed
The before and after equivalent for a service with no photographable output. Compares how the same four moments go with and without a plan.
Plan and record proof Data table Light field Derived
- PRF-02 Untriaged
Priority board
The full horizon vocabulary with definitions. The most ownable object in the system and the clearest explanation of what the plan actually produces.
Plan and record proof Held column Light field Derived
- PRF-03 Untriaged
Property record anatomy
Explains what the digital property record holds. Replaces the rotated card stack currently on the homepage, which carried no information.
Plan and record proof Held column Light field Derived
- PRF-04 Untriaged
Annual arc
Answers the objection that a plan is a one-time document, by showing what changes in years two, three, and five.
Plan and record proof Register grid Light field Derived
- DIF-01 Untriaged
Whose question is it
Positions the service against inspectors, handymen, and contractors by the question each one is equipped to answer. Direct replacement for the four-up comparison card row on the current homepage.
Difference Ruled sequence Dark field Derived
- DIF-02 Untriaged
Independence statement
The zero percent commitment. The single strongest trust asset the business has, given a full field and a display numeral.
Difference Full bleed Dark field Derived
- DIF-03 Untriaged
The second job
Problem framing. Names the four frictions of unmanaged homeownership before any solution is offered.
Difference Register grid Light field Derived
- PRC-01 Untriaged
Operating sequence
The five-step engagement path, driven directly from processSteps in the shared data file so it can never drift from the rest of the site.
Process Ruled sequence Light field Derived
- PRC-02 Untriaged
Responsibility split
Who does what across the homeowner, Perchford, and outside specialists. Reduces the fear that a management layer means losing control.
Process Register grid Light field Derived
- PRC-03 Untriaged
Anatomy of a quarterly review
What happens before, during, and after a quarterly review. Converts an abstract membership into something concrete enough to picture.
Process Ruled sequence Light field Derived
- LVL-01 Untriaged
Level overview
The three ongoing levels as linked cells, with the Home Plan foundation stated beneath rather than competing as a fourth option.
Service levels and scope Stagger Light field Derived
- LVL-02 Untriaged
Level comparison matrix
A real comparison table for readers who want to check a specific capability rather than read three summaries.
Service levels and scope Data table Light field Derived
- LVL-03 Untriaged
Scope ledger
Included against not included for a single level, driven from the includes and boundaries arrays already in the data model.
Service levels and scope Held column Light field Derived
- LVL-04 Untriaged
Pricing position
Explains how published starting points relate to scope, property complexity, and the responsibility a homeowner wants to delegate.
Service levels and scope Held column Light field Derived
- TRU-01 Untriaged
Stated boundaries
Rules out the five categories a new service gets mistaken for. Faster than arguing around each misconception.
Trust Ruled sequence Dark field Derived
- TRU-02 Untriaged
Homeowner quote
A single testimonial paired with a framed portrait or property view, given enough scale to be read rather than skimmed.
Trust Held column Light field Derived
- TRU-03 Untriaged
Proof without statistics
Credibility for a business too new to have meaningful numbers. Four checkable commitments instead of four animated counters.
Trust Register grid Light field Derived
- LOC-01 Untriaged
Service area register
The current communities as a numbered register, with availability framed honestly as address by address.
Local Held column Light field Derived
- LOC-02 Untriaged
Twin Cities seasonal load
Local credibility through operating conditions rather than a list of suburb names. Explains why a generic maintenance calendar misses what matters here.
Local Register grid Dark field Derived
- CAR-02 Untriaged
Seasonal calendar
The maintenance year as a vertical ruled strip, each window tied to the seasonal pressure it protects against.
Care Sticky rail Light field Derived
- CAR-03 Untriaged
Visit record
A dated record of one visit, showing completed work, observations, and the item now waiting on a homeowner decision.
Care Held column Light field Derived
- CTA-01 Untriaged
Primary conversion band
The standard page-closing call to action. Two actions and a caveat, on a dark field so it reads as the end of the page.
Calls to action Held column Dark field Derived
- CTA-02 Untriaged
Channel chooser
For readers who are ready but have a preference about how they get in touch. Each channel states what it is best for and how fast the reply is.
Calls to action Ruled sequence Light field Derived
- EDU-01 Untriaged
Concise FAQ
Short answers to the questions that come up first. Disclosure via native details elements, so it works with no JavaScript.
Education and FAQ Held column Light field Derived
- EDU-02 Untriaged
Decision FAQ
For questions a reader is weighing rather than looking up. Short answer, reasoning, then the case against, stated openly.
Education and FAQ Ruled sequence Light field Derived
- EDU-03 Untriaged
Journal index
Article listing as a ruled register. Pillar, title, standfirst, and date, with no thumbnail images required.
Education and FAQ Ruled sequence Light field Derived
- EDU-04 Untriaged
In-article prompt
A mid-article conversion prompt sized to sit inside the reading measure without interrupting the argument.
Education and FAQ Editorial column Light field Derived
- EDU-05 Untriaged
Related resources
Article footer linking. Groups onward links by intent so the reader can pick reading, service detail, or practical information.
Education and FAQ Register grid Light field Derived
- HRO-06 Untriaged
Split screen hero
Alternate to HRO-01. Two full-height halves meeting at a hard edge, dark against lime. The contrast between the two halves is the whole layout.
Heroes Split screen Dark field Derived
- PRF-05 Untriaged
Record filmstrip
The property record read sideways, because a history is a horizontal thing. The only pattern in the library with a different reading direction.
Plan and record proof Filmstrip Light field Derived
- DIF-04 Untriaged
Marquee statement
One statement at a size nothing else on the page reaches, and almost nothing else in the section. Used as a hinge between two dense sections.
Difference Marquee Light field Derived
- PRC-04 Untriaged
Cascading process
Alternate to PRC-01. Each step indents further than the last, so the section reads as a descent into specificity rather than a flat numbered list.
Process Cascade Dark field Derived
- TRU-04 Untriaged
Inset testimonial panel
Alternate to TRU-02 for pages with no usable photography. A bounded sand panel sitting on a dark field with the field visible on all four sides.
Trust Inset panel Dark field Derived
- LVL-05 Untriaged
Offset level index
Alternate to LVL-01. All four levels as a contents-page index on a twelve-column grid, with deliberate empty space in the left margin.
Service levels and scope Offset grid Light field Derived
- HRO-07 Untriaged
Overlap plate hero
The first hero that gives a photograph the full width of the page. Headline sits on the page surface above the plate, and an ink panel breaks the plate corner so the two layers genuinely intersect.
Heroes Overlap Light field Derived
- PRF-06 Untriaged
Annotated plate
Treats the photograph as a survey surface. Numbered pins sit at fixed coordinates on a full-bleed plate and a ruled legend beneath carries the reading, which is how you show a whole property judged in one pass.
Plan and record proof Full bleed Light field Derived
- PRF-07 Untriaged
Condition pair
Two dated views of the same thing on a shared baseline, divided by one hairline, with a ledger beneath stating what actually changed. Before and after logic without the language of a renovation portfolio.
Plan and record proof Inset panel Light field Derived
- PRC-05 Untriaged
Sticky image rail
The claim holds position on the left while the visit steps scroll past on the right. The only pattern where an image column is the primary content and the copy is the fixed reference.
Process Sticky rail Light field Derived
- CAR-04 Untriaged
Staggered visit strip
A year of visits as six views deliberately out of vertical alignment, each with a date and one line. The offsets and the mixed crops are what stop a set of images reading as a tile grid.
Care Stagger Light field Derived
- TRU-05 Untriaged
Portrait register
The people who will be on the property, on hairlines rather than in cards, each paired with the one thing they are accountable for. Continuity is the argument, so the names carry it.
Trust Register grid Light field Derived
- CTA-03 Untriaged
Image band call to action
An image running the full height of one half against a dark ask on the other, meeting at a hard edge. Closes a page that has been type-only without resorting to an overlaid banner.
Calls to action Split screen Dark field Derived
- HRO-08 Untriaged
Article header with plate
The article header for a piece that earns a photograph. Headline and standfirst sit on the page surface, the plate runs past the measure to the right edge, and the meta ledger breaks back across its corner.
Heroes Overlap Light field Derived
- EDU-06 Untriaged
Article body
The article itself: reading measure, subhead rhythm, list treatment, figure, pull quote, and source note. Every journal piece renders through this, so it is the one place article typography is decided.
Education and FAQ Editorial column Light field Derived
- EDU-07 Untriaged
Short answer
The answer stated before the argument. A reader who will not finish the piece still leaves with the decision, and an answer engine gets a block it can quote without reassembling the article.
Education and FAQ Inset panel Light field Derived
- EDU-08 Untriaged
Article contents rail
Contents hold position in the left margin while the article scrolls past. For long pieces where a reader needs to see the shape of the argument before committing to it.
Education and FAQ Sticky rail Light field Derived
- EDU-09 Untriaged
Journal index with lead
The journal landing page when one piece is doing the positioning work. The lead gets a plate and the full measure, everything after it drops to a ruled register with no image at all.
Education and FAQ Stagger Light field Derived
- EDU-10 Untriaged
Journal by pillar
The journal organised by the decision a reader is facing rather than by date. Each pillar states what it is for, then lists its pieces, so someone who arrived with a question finds the group before the article.
Education and FAQ Cascade Light field Derived
- EDU-11 Untriaged
Read more grid
Journal links on a service, city, or home page, where the reader did not come looking for reading. Each entry states in one line who it is for, so the block competes with nothing else on the page.
Education and FAQ Register grid Light field Derived
- EDU-12 Untriaged
Read next strip
The end of an article, on a dark field. Two pieces weighted equally, each with the next step named rather than implied, so the reader chooses instead of being steered.
Education and FAQ Split screen Dark field Derived
- HRO-09 Under review
Full-bleed statement hero
One statement and one photograph, each taking half the viewport, meeting at a hard edge. For a page that has to establish what this is before it explains anything.
Heroes Split screen Light field
- PRC-06 Under review
Image and accordion process
A photograph of a person at real scale on one side and the process disclosed one step at a time on the other.
Process Sticky rail Light field
- PRF-08 Under review
Feature accordion with product interface
An immersive colour field, features disclosed one at a time, and the product rendered beside them as a real surface rather than a photograph of a screen.
Plan and record proof Offset grid Colour field
- DIF-05 Under review
Value accordion with lifestyle image
Three positions, each in its own panel, opened one at a time beside a photograph of the outcome rather than of the work. The actions sit under the whole section, because the argument earns them, not any single claim.
Difference Held column Light field
- PRC-07 Under review
Four-stage progression
Four tall cards on a dark field with the ordinal at display scale and the fill stepping toward the terminal stage. The intro is two lines so the cards are in the first screen rather than under a manifesto.
Process Register grid Dark field
- TRU-06 Under review
Single testimonial card
One wide card with a person at real scale beside what they said, closing on a strip across the foot of the card that states the outcome.
Trust Register grid Light field
- CTA-04 Under review
Centered framed CTA
A large rounded outline with a threshold marker crossing its top edge, a sans headline at display scale, and one oversized action. The last thing on a long page.
Calls to action Inset panel Light field
- EDU-13 Under review
Long-form FAQ accordion
The whole question set inside one large rounded container, at a scale meant to be the page rather than a block on one.
Education and FAQ Inset panel Light field
Nothing matches those filters. .
Reviewing rendering rather than choosing a section? The continuous specimen page lives at /pattern-lab/audit/.