← All layouts  ·  Finance

request_quote Expense report

Claim with receipts, categories and an approval trail.

The approval trail is part of the document rather than a separate screen, because the first question anybody asks of a claim is who has already signed it off.

• .ms-sidenav
• .ms-timeline
• .ms-shell
• .ms-badge
• .ms-btn
• .ms-card

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>Expenses</strong>
            <span class="ms-toolbar__spacer"></span>
            <span class="ms-avatar-sm">SM</span>
        </div>
        <div class="ms-shell__body">
            <div class="u-grid u-grid-cols-12">
                <div class="u-col-12 u-col-lg-8">
                    <div class="ms-card">
                        <div class="ms-toolbar">
                            <div><h1 style="margin:0">Claim EX-2214</h1>
                                <p class="ms-stat__meta">Sam Mercer &middot; August 2026</p></div>
                            <span class="ms-toolbar__spacer"></span>
                            <span class="ms-badge ms-badge--warning">Awaiting approval</span>
                        </div>
                    </div>

                    <div class="ms-card ms-card--flush">
                        <table class="ms-table">
                            <thead><tr><th>Date</th><th>Description</th><th>Category</th>
                                <th>Receipt</th><th class="u-text-right">Amount</th></tr></thead>
                            <tbody>
                                <tr><td>04 Aug</td><td>Train, Kendal to Leeds</td><td>Travel</td>
                                    <td><a class="u-link" href="#">View</a></td>
                                    <td class="u-text-right">&pound;68.40</td></tr>
                                <tr><td>04 Aug</td><td>Hotel, one night</td><td>Accommodation</td>
                                    <td><a class="u-link" href="#">View</a></td>
                                    <td class="u-text-right">&pound;119.00</td></tr>
                                <tr><td>05 Aug</td><td>Client lunch (3)</td><td>Hospitality</td>
                                    <td><span class="ms-badge ms-badge--danger">Missing</span></td>
                                    <td class="u-text-right">&pound;74.20</td></tr>
                            </tbody>
                            <tfoot><tr><th colspan="4" class="u-text-right">Total claimed</th>
                                <th class="u-text-right">&pound;261.60</th></tr></tfoot>
                        </table>
                    </div>

                    <div class="ms-alert ms-alert--warning">
                        One receipt is missing. Claims over &pound;50 need one before approval.
                    </div>
                </div>

                <div class="u-col-12 u-col-lg-4">
                    <div class="ms-card">
                        <h2>Approval trail</h2>
                        <ul class="ms-timeline">
                            <li class="ms-timeline__item"><span class="ms-timeline__marker"></span>
                                <span class="ms-timeline__time">06 Aug, 09:12</span>
                                <div class="ms-timeline__body">Submitted by Sam Mercer</div></li>
                            <li class="ms-timeline__item"><span class="ms-timeline__marker"></span>
                                <span class="ms-timeline__time">06 Aug, 14:40</span>
                                <div class="ms-timeline__body">Checked by Finance &mdash; receipt query raised</div></li>
                            <li class="ms-timeline__item"><span class="ms-timeline__marker"></span>
                                <span class="ms-timeline__time">Pending</span>
                                <div class="ms-timeline__body">Line manager approval</div></li>
                        </ul>
                        <button class="ms-btn ms-btn--primary u-w-full">Approve</button>
                        <button class="ms-btn ms-btn--outline u-w-full u-mt-2">Query</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More finance layouts