← All layouts  ·  Publishing

rss_feed Blog index

Featured post, archive list and tag filters.

Tags filter in place rather than navigating away, and the featured post is chosen rather than simply newest.

• .ms-btn
• .ms-card
• .ms-chip
• .ms-badge
• .ms-thumb
• .ms-footer-section

Open full page

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>
    <nav class="ms-topbar__nav">
        <a href="#">Product</a><a href="#">Pricing</a><a href="#">Customers</a><a href="#">Docs</a>
    </nav>
    <div class="ms-toolbar">
        <a class="ms-btn ms-btn--ghost ms-btn--sm" href="#">Sign in</a>
        <a class="ms-btn ms-btn--primary ms-btn--sm" href="#">Start free</a>
    </div>
</header>

<div class="u-container u-py-8">
    <h1>Writing</h1>
    <p>Notes on bookkeeping, small business finance and the occasional engineering post.</p>

    <div class="ms-chip-set u-mb-6">
        <button class="ms-chip ms-chip--active" type="button">All</button>
        <button class="ms-chip" type="button">Product</button>
        <button class="ms-chip" type="button">Engineering</button>
        <button class="ms-chip" type="button">Finance</button>
        <button class="ms-chip" type="button">Company</button>
    </div>

    <article class="ms-card ms-card--horizontal ms-card--accent">
        <span class="ms-thumb ms-thumb--square"></span>
        <div>
            <span class="ms-badge ms-badge--primary">Featured</span>
            <h2>Why we rebuilt reconciliation from scratch</h2>
            <p>The old matcher was right 94% of the time, which sounds good until you have
                40,000 transactions a month and 2,400 of them need a human.</p>
            <p class="ms-stat__meta">Priya Kaur &middot; 18 August 2026 &middot; 12 min</p>
        </div>
    </article>

    <div class="u-grid u-grid-cols-12 u-mt-4">
        <div class="u-col-12 u-col-md-4"><article class="ms-card ms-card--media ms-card--fill">
            <span class="ms-thumb ms-card__media"></span>
            <div class="ms-card__body">
                <span class="ms-badge">Finance</span>
                <h3>Making Tax Digital, plainly</h3>
                <p class="ms-stat__meta">11 August 2026</p>
            </div></article></div>
        <div class="u-col-12 u-col-md-4"><article class="ms-card ms-card--media ms-card--fill">
            <span class="ms-thumb ms-card__media"></span>
            <div class="ms-card__body">
                <span class="ms-badge">Engineering</span>
                <h3>Ledgers are append-only or they are wrong</h3>
                <p class="ms-stat__meta">4 August 2026</p>
            </div></article></div>
        <div class="u-col-12 u-col-md-4"><article class="ms-card ms-card--media ms-card--fill">
            <span class="ms-thumb ms-card__media"></span>
            <div class="ms-card__body">
                <span class="ms-badge">Company</span>
                <h3>We are hiring two engineers</h3>
                <p class="ms-stat__meta">28 July 2026</p>
            </div></article></div>
    </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>
</div>
<footer class="ms-footer"><div class="ms-footer-inner">
    <div class="ms-footer-section"><strong>Ledgerline</strong><p>Bookkeeping that keeps up.</p></div>
    <div class="ms-footer-section"><strong>Product</strong><p>Features<br>Pricing<br>Integrations</p></div>
    <div class="ms-footer-section"><strong>Company</strong><p>About<br>Careers<br>Contact</p></div>
    <div class="ms-footer-section"><strong>Legal</strong><p>Privacy<br>Terms<br>Security</p></div>
</div></footer>

More publishing layouts