← All layouts  ·  Marketing

SaaS landing page

Hero, proof, features, pricing teaser and a closing call.

One argument, made in order: what it is, that it works, how it works, what it costs, and one thing to do next. The call to action is the same words every time it appears.

  • .ms-btn
  • .ms-card
  • .ms-stat
  • .ms-hero
  • .ms-footer-section
  • .ms-toolbar

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">Bookkeeping that keeps up with the week</h1>
    <p class="ms-hero__sub">Reconcile in minutes, not evenings. Ledgerline connects to your
        bank, matches what it can, and shows you only what it cannot.</p>
    <div class="ms-hero__actions">
        <a class="ms-btn ms-btn--primary ms-btn--lg" href="#">Start free</a>
        <a class="ms-btn ms-btn--outline ms-btn--lg" href="#">Book a demo</a>
    </div>
    <p class="ms-stat__meta">No card needed &middot; 30-day trial &middot; cancel in one click</p>
</section>

<div class="u-container u-py-8">
    <div class="ms-stat-row">
        <div class="ms-stat"><span class="ms-stat__label">Businesses</span>
            <span class="ms-stat__value">12,400</span></div>
        <div class="ms-stat"><span class="ms-stat__label">Auto-matched</span>
            <span class="ms-stat__value">96%</span></div>
        <div class="ms-stat"><span class="ms-stat__label">Hours saved a month</span>
            <span class="ms-stat__value">9.2</span></div>
        <div class="ms-stat"><span class="ms-stat__label">Rating</span>
            <span class="ms-stat__value">4.8</span></div>
    </div>

    <h2 class="u-text-center u-mt-8">What it does</h2>
    <div class="u-grid u-grid-cols-12">
        <div class="u-col-12 u-col-md-4"><div class="ms-card ms-card--feature ms-card--fill">
            <span class="ms-card__icon-block"><span class="material-icons">sync</span></span>
            <h3>Bank feeds</h3>
            <p>Direct connections to 40 banks, refreshed hourly, with no screen scraping.</p>
        </div></div>
        <div class="u-col-12 u-col-md-4"><div class="ms-card ms-card--feature ms-card--fill">
            <span class="ms-card__icon-block"><span class="material-icons">rule</span></span>
            <h3>Rules that learn</h3>
            <p>Categorise once. The next one like it is matched before you see it.</p>
        </div></div>
        <div class="u-col-12 u-col-md-4"><div class="ms-card ms-card--feature ms-card--fill">
            <span class="ms-card__icon-block"><span class="material-icons">verified</span></span>
            <h3>Filing built in</h3>
            <p>VAT returns prepared from the same ledger you reconciled, not a re-entry.</p>
        </div></div>
    </div>

    <div class="ms-card ms-card--roomy u-mt-8">
        <blockquote style="font-size:1.2rem">
            &ldquo;We closed the month in an afternoon for the first time in nine years.&rdquo;
        </blockquote>
        <div class="ms-toolbar">
            <span class="ms-avatar-md">PK</span>
            <div><strong>Priya Kaur</strong>
                <p class="ms-stat__meta">Finance director, Fellside Outdoor</p></div>
        </div>
    </div>
</div>

<section class="ms-hero">
    <h2 class="ms-hero__title">Try it on this month's books</h2>
    <p class="ms-hero__sub">Import a statement and see how much it matches before you decide.</p>
    <div class="ms-hero__actions">
        <a class="ms-btn ms-btn--primary ms-btn--lg" href="#">Start free</a>
    </div>
</section>
<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

Pricing
Feature tour
Testimonial wall
Coming soon
Comparison