← All layouts  ·  Publishing

menu_book Documentation

Three columns: navigation, content, on-page contents.

The classic docs shape, and classic for a reason: where am I, what am I reading, what else is on this page. The right rail is the first thing to drop on a narrow screen.

• .ms-sidenav
• .ms-btn
• .ms-card
• .ms-alert
• .ms-breadcrumb-item
• .ms-input

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-6">
    <div class="u-grid u-grid-cols-12">
        <aside class="u-col-12 u-col-lg-3">
            <div class="ms-card ms-card--flush" style="position:sticky; top:1rem">
                <div class="u-p-3"><input class="ms-input ms-input--sm" placeholder="Search docs"></div>
                <ul class="ms-sidenav">
                    <li class="ms-sidenav__section">Getting started</li>
                    <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#">Installation</a></li>
                    <li class="ms-sidenav__item"><a class="ms-sidenav__link ms-sidenav__link--active" href="#">Authentication</a></li>
                    <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#">Your first request</a></li>
                    <li class="ms-sidenav__section">API</li>
                    <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#">Accounts</a></li>
                    <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#">Transactions</a></li>
                    <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#">Webhooks</a></li>
                </ul>
            </div>
        </aside>

        <main class="u-col-12 u-col-lg-6">
            <nav class="ms-breadcrumb">
                <span class="ms-breadcrumb-item"><a class="ms-breadcrumb-link" href="#">Docs</a></span>
                <span class="ms-breadcrumb-item">Authentication</span>
            </nav>
            <h1>Authentication</h1>
            <div class="ms-prose">
                <p>Every request carries a bearer token. Tokens are scoped to one
                    organisation and never expire, so treat one like a password.</p>
                <h2 id="creating">Creating a token</h2>
                <p>Generate a token in <strong>Settings &rarr; API</strong>. You will see the
                    value once.</p>
                <div class="ms-code">
                    <pre><code>curl https://api.ledgerline.example/v1/accounts \
  -H "Authorization: Bearer sk_live_..."</code></pre>
                </div>
                <h2 id="scopes">Scopes</h2>
                <p>Tokens carry the narrowest scope that will do the job.</p>
                <table class="ms-table ms-table--compact">
                    <thead><tr><th>Scope</th><th>Allows</th></tr></thead>
                    <tbody>
                        <tr><td><code>read</code></td><td>Reading accounts and transactions</td></tr>
                        <tr><td><code>write</code></td><td>Creating and updating records</td></tr>
                        <tr><td><code>admin</code></td><td>Managing members and tokens</td></tr>
                    </tbody>
                </table>
                <div class="ms-alert ms-alert--warning">
                    A leaked token can be revoked from the same screen. Revoking is immediate.
                </div>
            </div>
        </main>

        <aside class="u-col-12 u-col-lg-3">
            <div class="ms-card ms-card--flat" style="position:sticky; top:1rem">
                <strong>On this page</strong>
                <ul class="ms-sidenav">
                    <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#creating">Creating a token</a></li>
                    <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#scopes">Scopes</a></li>
                </ul>
                <hr class="ms-divider">
                <a class="u-link" href="#">Edit this page</a>
            </div>
        </aside>
    </div>
</div>

More publishing layouts