← All layouts  ·  Marketing

Comparison

Us-versus-them table with a fair summary.

A comparison that only flatters one column is not read as information. This one concedes where the competitor is stronger, which is what makes the rest credible.

  • .ms-badge
  • .ms-card
  • .ms-btn
  • .ms-footer-section
  • .ms-table
  • .ms-topbar

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>Ledgerline compared</h1>
    <p>Written by us, so read it accordingly &mdash; but the table concedes where the others
        are stronger, because a comparison that only flatters one column is not read as
        information.</p>

    <div class="ms-card ms-card--flush u-mt-6">
        <table class="ms-table ms-table--striped">
            <thead><tr><th>&nbsp;</th><th>Ledgerline</th><th>Ballpark</th><th>Spreadsheet</th></tr></thead>
            <tbody>
                <tr><td>Bank feeds</td><td><span class="ms-badge ms-badge--success">40 banks</span></td>
                    <td><span class="ms-badge ms-badge--success">60 banks</span></td><td>&mdash;</td></tr>
                <tr><td>Auto-reconciliation</td><td><span class="ms-badge ms-badge--success">96%</span></td>
                    <td>88%</td><td>&mdash;</td></tr>
                <tr><td>VAT filing</td><td><span class="ms-badge ms-badge--success">Built in</span></td>
                    <td><span class="ms-badge ms-badge--success">Built in</span></td>
                    <td>Manual</td></tr>
                <tr><td>Payroll</td><td>&mdash;</td>
                    <td><span class="ms-badge ms-badge--success">Included</span></td><td>&mdash;</td></tr>
                <tr><td>Multi-currency</td><td>&mdash;</td>
                    <td><span class="ms-badge ms-badge--success">Yes</span></td><td>Manual</td></tr>
                <tr><td>Append-only ledger</td><td><span class="ms-badge ms-badge--success">Yes</span></td>
                    <td>&mdash;</td><td>&mdash;</td></tr>
                <tr><td>Price, small company</td><td>&pound;49/mo</td><td>&pound;62/mo</td><td>Free</td></tr>
            </tbody>
        </table>
    </div>

    <div class="u-grid u-grid-cols-12 u-mt-6">
        <div class="u-col-12 u-col-md-6"><div class="ms-card ms-card--accent-success ms-card--fill">
            <h2>Choose us if</h2>
            <p>You want reconciliation to be quick and the audit trail to be real. Our
                append-only ledger is the thing we would not trade away.</p>
        </div></div>
        <div class="u-col-12 u-col-md-6"><div class="ms-card ms-card--accent-warning ms-card--fill">
            <h2>Choose Ballpark if</h2>
            <p>You need payroll and multi-currency in the same tool. We do not do either,
                and bolting them on badly would be worse than saying so.</p>
        </div></div>
    </div>
</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>