← All layouts  ·  Finance

payments Payroll run

Pay run with employee rows, totals and a confirm step.

An irreversible action, so the layout ends in a deliberate confirm panel that restates the totals rather than a button sitting under the last table row.

• .ms-sidenav
• .ms-stat
• .ms-card
• .ms-shell
• .ms-btn
• .ms-table

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.

<div class="ms-shell">
    <aside class="ms-shell__sidebar">
        <div class="ms-shell__brand">Meridian</div>
        <ul class="ms-sidenav">
            <li class="ms-sidenav__section">Banking</li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">account_balance</span>Accounts</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link ms-sidenav__link--active" href="#"><span class="material-icons">swap_horiz</span>Payments</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">receipt_long</span>Invoices</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">insights</span>Reports</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">credit_card</span>Cards</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">settings</span>Settings</a></li>
        </ul>
    </aside>
    <div class="ms-shell__main">
        <div class="ms-shell__bar">
            <strong>Payroll</strong>
            <span class="ms-toolbar__spacer"></span>
            <span class="ms-avatar-sm">SM</span>
        </div>
        <div class="ms-shell__body">
            <div class="ms-toolbar">
                <h1 style="margin:0">August pay run</h1>
                <span class="ms-badge ms-badge--warning">Not yet submitted</span>
                <span class="ms-toolbar__spacer"></span>
                <span class="ms-stat__meta">Pay date 28 August 2026</span>
            </div>

            <div class="ms-stat-row u-mb-4">
                <div class="ms-card"><div class="ms-stat">
                    <span class="ms-stat__label">Employees</span><span class="ms-stat__value">12</span></div></div>
                <div class="ms-card"><div class="ms-stat">
                    <span class="ms-stat__label">Gross</span><span class="ms-stat__value">&pound;38,410</span></div></div>
                <div class="ms-card"><div class="ms-stat">
                    <span class="ms-stat__label">Deductions</span><span class="ms-stat__value">&pound;9,882</span></div></div>
                <div class="ms-card"><div class="ms-stat">
                    <span class="ms-stat__label">Net to pay</span><span class="ms-stat__value">&pound;28,528</span></div></div>
            </div>

            <div class="ms-card ms-card--flush u-mb-4">
                <table class="ms-table ms-table--striped ms-table--compact">
                    <thead><tr><th>Employee</th><th>Role</th><th class="u-text-right">Gross</th>
                        <th class="u-text-right">Tax</th><th class="u-text-right">NI</th>
                        <th class="u-text-right">Net</th></tr></thead>
                    <tbody>
                        <tr><td>Ellie Roberts</td><td>Buyer</td><td class="u-text-right">&pound;3,750</td>
                            <td class="u-text-right">&pound;612</td><td class="u-text-right">&pound;284</td>
                            <td class="u-text-right">&pound;2,854</td></tr>
                        <tr><td>James Doyle</td><td>Warehouse</td><td class="u-text-right">&pound;2,410</td>
                            <td class="u-text-right">&pound;318</td><td class="u-text-right">&pound;178</td>
                            <td class="u-text-right">&pound;1,914</td></tr>
                        <tr><td>Priya Kaur</td><td>Design</td><td class="u-text-right">&pound;3,980</td>
                            <td class="u-text-right">&pound;668</td><td class="u-text-right">&pound;302</td>
                            <td class="u-text-right">&pound;3,010</td></tr>
                    </tbody>
                </table>
            </div>

            <div class="ms-card ms-card--accent-danger">
                <h2>Submit this run</h2>
                <p>Submitting sends &pound;28,528.00 to 12 employees on 28 August and files
                    an FPS with HMRC. <strong>It cannot be undone from here</strong> &mdash;
                    a correction after submission needs an amended submission.</p>
                <label class="ms-checkbox"><input type="checkbox">
                    I have checked the figures above</label>
                <br>
                <button class="ms-btn ms-btn--error ms-btn--lg u-mt-4">Submit pay run</button>
            </div>
        </div>
    </div>
</div>

More finance layouts