← All layouts  ·  Marketing

Testimonial wall

Masonry quotes with logos and a metrics strip.

Quotes are attributed with a name, a role and a company, because an unattributed testimonial is worth less than no testimonial.

  • .ms-stat
  • .ms-card
  • .ms-btn
  • .ms-toolbar
  • .ms-avatar-sm
  • .ms-footer-section

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">What people actually say</h1>
    <p class="ms-hero__sub">Every quote here is attributed. An unattributed testimonial is
        worth less than none.</p>
</section>

<div class="u-container u-py-8">
    <div class="ms-stat-row u-mb-8">
        <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">Average rating</span>
            <span class="ms-stat__value">4.8</span></div>
        <div class="ms-stat"><span class="ms-stat__label">Would recommend</span>
            <span class="ms-stat__value">94%</span></div>
        <div class="ms-stat"><span class="ms-stat__label">Reviews</span>
            <span class="ms-stat__value">2,180</span></div>
    </div>

    <div class="u-grid u-grid-cols-12">
        <div class="u-col-12 u-col-md-4"><div class="ms-card ms-card--fill">
            <p>&ldquo;We closed the month in an afternoon for the first time in nine years.&rdquo;</p>
            <div class="ms-card__footer"><div class="ms-toolbar">
                <span class="ms-avatar-sm">PK</span>
                <div><strong>Priya Kaur</strong>
                    <p class="ms-stat__meta">Finance director, Fellside Outdoor</p></div>
            </div></div>
        </div></div>
        <div class="u-col-12 u-col-md-4"><div class="ms-card ms-card--fill">
            <p>&ldquo;The rules engine is the first one I have not had to fight. It suggests
                the rule I was about to write.&rdquo;</p>
            <div class="ms-card__footer"><div class="ms-toolbar">
                <span class="ms-avatar-sm">JD</span>
                <div><strong>James Doyle</strong>
                    <p class="ms-stat__meta">Bookkeeper, Doyle &amp; Co</p></div>
            </div></div>
        </div></div>
        <div class="u-col-12 u-col-md-4"><div class="ms-card ms-card--fill">
            <p>&ldquo;Support answered on a Sunday and knew what a CIS deduction was. That
                is a low bar and nobody else cleared it.&rdquo;</p>
            <div class="ms-card__footer"><div class="ms-toolbar">
                <span class="ms-avatar-sm">TM</span>
                <div><strong>Tom Mercer</strong>
                    <p class="ms-stat__meta">Director, Mercer Groundworks</p></div>
            </div></div>
        </div></div>
        <div class="u-col-12 u-col-md-6"><div class="ms-card ms-card--fill">
            <p>&ldquo;Migration took a morning and they did the tricky half. Two years of
                history came across intact, which I did not expect.&rdquo;</p>
            <div class="ms-card__footer"><div class="ms-toolbar">
                <span class="ms-avatar-sm">ER</span>
                <div><strong>Ellie Roberts</strong>
                    <p class="ms-stat__meta">Owner, Roberts Joinery</p></div>
            </div></div>
        </div></div>
        <div class="u-col-12 u-col-md-6"><div class="ms-card ms-card--fill">
            <p>&ldquo;It is not the cheapest and I stopped caring about that in month two.&rdquo;</p>
            <div class="ms-card__footer"><div class="ms-toolbar">
                <span class="ms-avatar-sm">SM</span>
                <div><strong>Sam Mercer</strong>
                    <p class="ms-stat__meta">Practice manager, Northbound Accounts</p></div>
            </div></div>
        </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>

More marketing layouts

SaaS landing page
Pricing
Feature tour
Coming soon
Comparison