← All layouts  ·  Productivity

Kanban board

Columns of cards with counts and a work-in-progress limit.

Columns scroll independently and carry a count against a limit, because a board without limits is a list with extra steps.

  • .ms-card
  • .ms-sidenav
  • .ms-toolbar
  • .ms-badge
  • .ms-chip
  • .ms-shell

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">Workspace</li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link ms-sidenav__link--active" href="#"><span class="material-icons">dashboard</span>Boards</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">check_circle</span>Tasks</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">calendar_today</span>Calendar</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">folder</span>Files</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">mail</span>Inbox</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">group</span>People</a></li>
        </ul>
    </aside>
    <div class="ms-shell__main">
        <div class="ms-shell__bar">
            <strong>Autumn release</strong>
            <span class="ms-toolbar__spacer"></span>
            <span class="ms-avatar-sm">ER</span>
        </div>
        <div class="ms-shell__body">
            <div class="ms-toolbar">
                <div class="ms-chip-set">
                    <button class="ms-chip ms-chip--active" type="button">All</button>
                    <button class="ms-chip" type="button">Mine</button>
                    <button class="ms-chip" type="button">Blocked</button>
                </div>
                <span class="ms-toolbar__spacer"></span>
                <button class="ms-btn ms-btn--primary ms-btn--sm">Add card</button>
            </div>

            <div style="display:grid; grid-template-columns:repeat(4,minmax(240px,1fr)); gap:1rem; overflow-x:auto">
                <section>
                    <div class="ms-toolbar"><strong>Backlog</strong>
                        <span class="ms-badge">8</span></div>
                    <div class="ms-card ms-card--compact ms-card--interactive">
                        <strong>Rework the export dialogue</strong>
                        <div class="ms-chip-set u-mt-2"><span class="ms-chip">UX</span></div>
                    </div>
                    <div class="ms-card ms-card--compact ms-card--interactive">
                        <strong>Drop the legacy ledger endpoint</strong>
                        <div class="ms-chip-set u-mt-2"><span class="ms-chip">API</span></div>
                    </div>
                    <div class="ms-card ms-card--outline ms-card--compact">
                        <span class="ms-empty__title">Drop a card here</span>
                    </div>
                </section>

                <section>
                    <div class="ms-toolbar"><strong>In progress</strong>
                        <span class="ms-badge ms-badge--warning">3</span></div>
                    <div class="ms-card ms-card--compact ms-card--accent-warning ms-card--interactive">
                        <strong>Bulk reconciliation endpoint</strong>
                        <p class="ms-stat__meta">Due Friday</p>
                        <div class="ms-toolbar u-mt-2">
                            <span class="ms-avatar-sm">JD</span>
                            <span class="ms-toolbar__spacer"></span>
                            <span class="ms-badge">3 of 5</span>
                        </div>
                    </div>
                    <div class="ms-card ms-card--compact ms-card--interactive">
                        <strong>Rules engine: suggest on save</strong>
                        <div class="ms-toolbar u-mt-2"><span class="ms-avatar-sm">PK</span></div>
                    </div>
                </section>

                <section>
                    <div class="ms-toolbar"><strong>Review</strong>
                        <span class="ms-badge">2</span></div>
                    <div class="ms-card ms-card--compact ms-card--accent ms-card--interactive">
                        <strong>VAT rounding on multi-line invoices</strong>
                        <p class="ms-stat__meta">Waiting on Sam</p>
                    </div>
                </section>

                <section>
                    <div class="ms-toolbar"><strong>Done</strong>
                        <span class="ms-badge ms-badge--success">14</span></div>
                    <div class="ms-card ms-card--compact ms-card--accent-success">
                        <strong>Webhook payloads in minor units</strong>
                        <p class="ms-stat__meta">Shipped in 2.8.0</p>
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>

More productivity layouts

Calendar
Task list
File manager
Email client
Project timeline