← All layouts  ·  Utility

flag Onboarding

Stepped setup with progress and a skip that works.

Skip is a real option and says what it costs. Onboarding that traps somebody is remembered as the product's first act.

• .ms-badge
• .ms-btn
• .ms-chip
• .ms-field
• .ms-label
• .ms-divider

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="u-container u-py-8" style="max-width:760px">
    <div class="ms-logo"><strong>Ledgerline</strong></div>

    <div class="ms-toolbar u-mt-6">
        <span class="ms-badge ms-badge--success">1 Account</span>
        <hr class="ms-divider" style="flex:1">
        <span class="ms-badge ms-badge--primary">2 Your business</span>
        <hr class="ms-divider" style="flex:1">
        <span class="ms-badge">3 Bank</span>
        <hr class="ms-divider" style="flex:1">
        <span class="ms-badge">4 Done</span>
    </div>
    <div class="ms-progress"><div class="ms-progress__bar" style="width:50%"></div></div>

    <div class="ms-card ms-card--roomy u-mt-6">
        <h1>Tell us about your business</h1>
        <p class="ms-stat__meta">Two minutes. It decides which VAT scheme and chart of
            accounts we set up for you, so it is worth getting right.</p>

        <form class="ms-form u-mt-4">
            <div class="ms-field">
                <label class="ms-label" for="name">Business name</label>
                <input class="ms-input" id="name">
            </div>
            <div class="ms-field">
                <label class="ms-label" for="type">Structure</label>
                <select class="ms-input" id="type">
                    <option>Sole trader</option>
                    <option selected>Limited company</option>
                    <option>Partnership</option>
                </select>
            </div>
            <div class="ms-field">
                <label class="ms-label" for="vat">VAT scheme</label>
                <select class="ms-input" id="vat">
                    <option>Not registered</option>
                    <option selected>Standard</option>
                    <option>Flat rate</option>
                    <option>Cash accounting</option>
                </select>
                <p class="ms-form-help">You can change this later, but changing it mid-period
                    means restating the current return.</p>
            </div>
            <div class="ms-field">
                <label class="ms-label">What do you want to do first?</label>
                <div class="ms-chip-set">
                    <button class="ms-chip ms-chip--active" type="button">Reconcile a backlog</button>
                    <button class="ms-chip" type="button">File a VAT return</button>
                    <button class="ms-chip" type="button">Send invoices</button>
                    <button class="ms-chip" type="button">Just look around</button>
                </div>
            </div>
        </form>

        <div class="ms-toolbar u-mt-6">
            <button class="ms-btn ms-btn--ghost">Back</button>
            <span class="ms-toolbar__spacer"></span>
            <button class="ms-btn ms-btn--ghost">Skip for now</button>
            <button class="ms-btn ms-btn--primary">Continue</button>
        </div>
    </div>
</div>

More utility layouts