← All layouts  ·  Admin

manage_accounts User management

Members, roles and invitations with a permission matrix.

The permission matrix is a table rather than a stack of toggles, because the question is always comparative: what can this role do that the one below it cannot.

• .ms-sidenav
• .ms-badge
• .ms-shell
• .ms-avatar-sm
• .ms-card
• .ms-table

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="ms-shell">
    <aside class="ms-shell__sidebar">
        <div class="ms-shell__brand">Northbound</div>
        <ul class="ms-sidenav">
            <li class="ms-sidenav__section">Manage</li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">dashboard</span>Overview</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">group</span>Customers</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">inventory_2</span>Products</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">receipt_long</span>Orders</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">insights</span>Reports</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link  ms-sidenav__link--active" href="#"><span class="material-icons">settings</span>Settings</a></li>
        </ul>
    </aside>
    <div class="ms-shell__main">
        <div class="ms-shell__bar">
            <strong>Team</strong>
            <span class="ms-toolbar__spacer"></span>
            <input class="ms-input" placeholder="Search" style="max-width:220px">
            <span class="ms-avatar-sm">AM</span>
        </div>
        <div class="ms-shell__body">
            <nav class="ms-breadcrumb"><span class="ms-breadcrumb-item">Home</span>
                <span class="ms-breadcrumb-item">Team</span></nav>
            <div class="ms-toolbar">
                <h1 style="margin:0">Team</h1>
                <span class="ms-badge">12 members</span>
                <span class="ms-toolbar__spacer"></span>
                <button class="ms-btn ms-btn--primary">Invite people</button>
            </div>

            <div class="ms-card ms-card--flush u-mb-4">
                <table class="ms-table ms-table--striped">
                    <thead><tr><th>Person</th><th>Role</th><th>Last active</th><th>Status</th><th></th></tr></thead>
                    <tbody>
                        <tr><td><span class="ms-avatar-sm">SM</span> Sam Mercer</td>
                            <td><span class="ms-badge ms-badge--primary">Owner</span></td>
                            <td>Now</td><td><span class="ms-badge ms-badge--success">Active</span></td>
                            <td class="u-text-right"><a class="u-link" href="#">Manage</a></td></tr>
                        <tr><td><span class="ms-avatar-sm">ER</span> Ellie Roberts</td>
                            <td><span class="ms-badge">Admin</span></td>
                            <td>2 hours ago</td><td><span class="ms-badge ms-badge--success">Active</span></td>
                            <td class="u-text-right"><a class="u-link" href="#">Manage</a></td></tr>
                        <tr><td><span class="ms-avatar-sm">JD</span> James Doyle</td>
                            <td><span class="ms-badge">Editor</span></td>
                            <td>Yesterday</td><td><span class="ms-badge ms-badge--warning">Invited</span></td>
                            <td class="u-text-right"><a class="u-link" href="#">Resend</a></td></tr>
                    </tbody>
                </table>
            </div>

            <div class="ms-card ms-card--flush">
                <div class="u-p-4"><h2 style="margin:0">Permissions</h2>
                    <p class="ms-stat__meta">A matrix rather than a stack of toggles: the question
                        is always what this role can do that the one below it cannot.</p></div>
                <table class="ms-table ms-table--compact">
                    <thead><tr><th>Capability</th><th>Owner</th><th>Admin</th><th>Editor</th><th>Viewer</th></tr></thead>
                    <tbody>
                        <tr><td>View reports</td><td>Yes</td><td>Yes</td><td>Yes</td><td>Yes</td></tr>
                        <tr><td>Edit products</td><td>Yes</td><td>Yes</td><td>Yes</td><td>&mdash;</td></tr>
                        <tr><td>Refund orders</td><td>Yes</td><td>Yes</td><td>&mdash;</td><td>&mdash;</td></tr>
                        <tr><td>Manage billing</td><td>Yes</td><td>&mdash;</td><td>&mdash;</td><td>&mdash;</td></tr>
                        <tr><td>Delete organisation</td><td>Yes</td><td>&mdash;</td><td>&mdash;</td><td>&mdash;</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

More admin layouts