← All layouts · Utility
Search results
Query, facets, results with highlighting, and no-result help.
The zero-result state is designed rather than left to chance, because it is the state a search engine is judged on.
- .ms-btn
- .ms-card
- .ms-chip
- .ms-checkbox
- .ms-stat
- .ms-badge
Live
The layout as it renders, in a frame at its own width. Resize the window to watch it respond — the frame is a real viewport.
How to build it
This is the layout's template, read from disk — the same file the frame
above renders, so it cannot drift out of date. Copy it into your own page
and replace the content; every class in it ships in
mcgowan.css.
<header class="ms-topbar">
<div class="ms-logo"><a class="u-link" href="#">Ledgerline</a></div>
<input class="ms-input" placeholder="Search" style="max-width:460px" value="reconciliation">
<span class="ms-avatar-sm">ER</span>
</header>
<div class="u-container u-py-6">
<div class="u-grid u-grid-cols-12">
<aside class="u-col-12 u-col-lg-3">
<div class="ms-card ms-card--flat" style="position:sticky; top:1rem">
<h2>Refine</h2>
<p class="ms-label">Type</p>
<label class="ms-checkbox"><input checked type="checkbox"> Documentation (24)</label><br>
<label class="ms-checkbox"><input checked type="checkbox"> Blog (11)</label><br>
<label class="ms-checkbox"><input type="checkbox"> Changelog (6)</label><br>
<label class="ms-checkbox"><input type="checkbox"> Support (18)</label>
<hr class="ms-divider">
<p class="ms-label">Updated</p>
<div class="ms-chip-set">
<button class="ms-chip" type="button">Past month</button>
<button class="ms-chip ms-chip--active" type="button">Past year</button>
<button class="ms-chip" type="button">Any time</button>
</div>
</div>
</aside>
<main class="u-col-12 u-col-lg-9">
<div class="ms-toolbar">
<p class="ms-stat__meta" style="margin:0">59 results for
<strong>reconciliation</strong> · 0.08 seconds</p>
<span class="ms-toolbar__spacer"></span>
<select class="ms-input ms-input--sm" style="max-width:160px">
<option>Most relevant</option>
<option>Newest first</option>
</select>
</div>
<div class="ms-chip-set u-mb-4">
<span class="ms-chip">Documentation ×</span>
<span class="ms-chip">Blog ×</span>
<span class="ms-chip">Past year ×</span>
<a class="u-link" href="#">Clear all</a>
</div>
<div class="ms-card ms-card--flat">
<span class="ms-badge">Documentation</span>
<h3 style="margin:0.35rem 0"><a class="u-link" href="#">Bulk reconciliation</a></h3>
<p class="ms-stat__meta">docs.ledgerline.example / api / reconciliation</p>
<p>Match up to 500 transactions in a single request. Bulk
<mark>reconciliation</mark> is available on the Practice plan.</p>
</div>
<div class="ms-card ms-card--flat">
<span class="ms-badge">Blog</span>
<h3 style="margin:0.35rem 0"><a class="u-link" href="#">Why we rebuilt reconciliation from scratch</a></h3>
<p class="ms-stat__meta">18 August 2026 · Priya Kaur</p>
<p>The old matcher was right 94% of the time, which sounds good until you
have 40,000 transactions a month.</p>
</div>
<div class="ms-card ms-card--flat">
<span class="ms-badge">Documentation</span>
<h3 style="margin:0.35rem 0"><a class="u-link" href="#">Reconciliation rules</a></h3>
<p class="ms-stat__meta">docs.ledgerline.example / guides / rules</p>
<p>A rule matches on payee, amount range and account. Rules run in order and
the first match wins.</p>
</div>
<nav class="ms-pagination u-mt-6">
<a class="ms-btn ms-btn--sm ms-btn--primary" href="#">1</a>
<a class="ms-btn ms-btn--sm ms-btn--outline" href="#">2</a>
<a class="ms-btn ms-btn--sm ms-btn--outline" href="#">3</a>
<a class="ms-btn ms-btn--sm ms-btn--outline" href="#">Next</a>
</nav>
</main>
</div>
</div>