← All layouts  ·  Marketing

explore Feature tour

Alternating feature sections with supporting imagery.

Alternating sides gives rhythm and stops the page reading as a list. Each section makes one claim and shows it.

• .ms-badge
• .ms-btn
• .ms-footer-section
• .ms-thumb
• .u-grid
• .ms-hero

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>

<section class="ms-hero">
    <h1 class="ms-hero__title">A tour of the parts that matter</h1>
    <p class="ms-hero__sub">Four things Ledgerline does that a spreadsheet does not.</p>
</section>

<div class="u-container u-py-8">
    <section class="u-grid u-grid-cols-12 u-mb-8">
        <div class="u-col-12 u-col-md-6">
            <span class="ms-badge ms-badge--primary">Reconciliation</span>
            <h2>It matches first and asks second</h2>
            <p>Ledgerline reconciles what it is confident about and queues only the rest.
                On a typical month that is 96% matched and forty lines to look at.</p>
            <a class="u-link" href="#">How matching works &rarr;</a>
        </div>
        <div class="u-col-12 u-col-md-6"><span class="ms-thumb"></span></div>
    </section>

    <section class="u-grid u-grid-cols-12 u-mb-8">
        <div class="u-col-12 u-col-md-6"><span class="ms-thumb"></span></div>
        <div class="u-col-12 u-col-md-6">
            <span class="ms-badge ms-badge--primary">Rules</span>
            <h2>Teach it once</h2>
            <p>Categorise a transaction and Ledgerline offers to write the rule. Rules are
                readable, editable and can be turned off without losing history.</p>
            <a class="u-link" href="#">See the rules engine &rarr;</a>
        </div>
    </section>

    <section class="u-grid u-grid-cols-12 u-mb-8">
        <div class="u-col-12 u-col-md-6">
            <span class="ms-badge ms-badge--primary">Filing</span>
            <h2>The return comes from the ledger</h2>
            <p>No re-entry, no export-and-reimport. The VAT return is built from the same
                records you reconciled, and every figure links back to its transactions.</p>
            <a class="u-link" href="#">Filing and deadlines &rarr;</a>
        </div>
        <div class="u-col-12 u-col-md-6"><span class="ms-thumb"></span></div>
    </section>

    <section class="u-grid u-grid-cols-12">
        <div class="u-col-12 u-col-md-6"><span class="ms-thumb"></span></div>
        <div class="u-col-12 u-col-md-6">
            <span class="ms-badge ms-badge--primary">Audit</span>
            <h2>Append-only, always</h2>
            <p>Nothing is edited in place. A correction is a new entry that references the
                old one, so the history of a figure is always recoverable.</p>
            <a class="u-link" href="#">Our data model &rarr;</a>
        </div>
    </section>
</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 marketing layouts