← All layouts  ·  Productivity

Task list

Grouped tasks with priorities, due dates and quick add.

Quick add sits at the top of the list it adds to, so the new item appears where the eye already is.

  • .ms-sidenav
  • .ms-stat
  • .ms-badge
  • .ms-shell
  • .ms-table
  • .ms-card

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" href="#"><span class="material-icons">dashboard</span>Boards</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link ms-sidenav__link--active" 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>My tasks</strong>
            <span class="ms-toolbar__spacer"></span>
            <span class="ms-avatar-sm">ER</span>
        </div>
        <div class="ms-shell__body">
            <div class="u-grid u-grid-cols-12">
                <div class="u-col-12 u-col-lg-8">
                    <div class="ms-toolbar">
                        <input class="ms-input ms-input--sm" placeholder="Add a task and press Enter">
                        <span class="ms-kbd">Enter</span>
                    </div>

                    <div class="ms-card ms-card--flush">
                        <div class="u-p-4"><strong>Today</strong>
                            <span class="ms-badge ms-badge--warning">3 overdue</span></div>
                        <table class="ms-table ms-table--compact">
                            <tr><td style="width:2rem"><input type="checkbox"></td>
                                <td><strong>Chase Fellside invoice 4471</strong>
                                    <p class="ms-stat__meta">Finance</p></td>
                                <td><span class="ms-badge ms-badge--danger">2 days late</span></td>
                                <td class="u-text-right"><span class="ms-avatar-sm">ER</span></td></tr>
                            <tr><td><input type="checkbox"></td>
                                <td><strong>Review bulk reconciliation PR</strong>
                                    <p class="ms-stat__meta">Engineering</p></td>
                                <td><span class="ms-badge ms-badge--warning">Today</span></td>
                                <td class="u-text-right"><span class="ms-avatar-sm">JD</span></td></tr>
                            <tr><td><input type="checkbox"></td>
                                <td><strong>Sign off August pay run</strong>
                                    <p class="ms-stat__meta">Finance</p></td>
                                <td><span class="ms-badge">28 Aug</span></td>
                                <td class="u-text-right"><span class="ms-avatar-sm">SM</span></td></tr>
                        </table>
                    </div>

                    <div class="ms-card ms-card--flush">
                        <div class="u-p-4"><strong>Done today</strong></div>
                        <table class="ms-table ms-table--compact">
                            <tr><td style="width:2rem"><input checked type="checkbox"></td>
                                <td style="text-decoration:line-through; color:#6b7280">
                                    Publish 2.8.0 changelog</td>
                                <td class="u-text-right ms-stat__meta">09:40</td></tr>
                            <tr><td><input checked type="checkbox"></td>
                                <td style="text-decoration:line-through; color:#6b7280">
                                    Reply to Mercer Groundworks</td>
                                <td class="u-text-right ms-stat__meta">08:15</td></tr>
                        </table>
                    </div>
                </div>

                <div class="u-col-12 u-col-lg-4">
                    <div class="ms-card">
                        <h2>This week</h2>
                        <div class="ms-stat"><span class="ms-stat__label">Completed</span>
                            <span class="ms-stat__value">18</span>
                            <span class="ms-stat__delta ms-stat__delta--good">+4 on last week</span></div>
                        <hr class="ms-divider">
                        <p class="ms-label">Open by project</p>
                        <table class="ms-table ms-table--compact">
                            <tr><td>Engineering</td><td class="u-text-right">9</td></tr>
                            <tr><td>Finance</td><td class="u-text-right">4</td></tr>
                            <tr><td>Support</td><td class="u-text-right">2</td></tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More productivity layouts

Kanban board
Calendar
File manager
Email client
Project timeline