← All layouts  ·  Commerce

point_of_sale Point of sale

Touch-first till: product pad, running order, tender.

Built for a finger on a counter screen rather than a mouse: large hit targets, no hover states carrying meaning, and the total where a cashier reads it without moving their head.

• .ms-card
• .ms-btn
• .ms-chip
• .ms-shell
• .ms-stat
• .ms-toolbar

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">
    <div class="ms-shell__main">
        <div class="ms-shell__bar">
            <strong>Till 2</strong>
            <span class="ms-badge ms-badge--success">Online</span>
            <span class="ms-toolbar__spacer"></span>
            <span class="ms-stat__meta">Sam M. &middot; Shift since 08:00</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-chip-set u-mb-4">
                        <button class="ms-chip ms-chip--active" type="button">All</button>
                        <button class="ms-chip" type="button">Hot drinks</button>
                        <button class="ms-chip" type="button">Cold drinks</button>
                        <button class="ms-chip" type="button">Food</button>
                        <button class="ms-chip" type="button">Retail</button>
                    </div>
                    <div class="u-grid u-grid-cols-12">
                        <div class="u-col-4 u-col-md-3"><button class="ms-card ms-card--interactive u-w-full" type="button">
                            <strong>Flat white</strong><p>&pound;3.20</p></button></div>
                        <div class="u-col-4 u-col-md-3"><button class="ms-card ms-card--interactive u-w-full" type="button">
                            <strong>Americano</strong><p>&pound;2.80</p></button></div>
                        <div class="u-col-4 u-col-md-3"><button class="ms-card ms-card--interactive u-w-full" type="button">
                            <strong>Latte</strong><p>&pound;3.40</p></button></div>
                        <div class="u-col-4 u-col-md-3"><button class="ms-card ms-card--interactive u-w-full" type="button">
                            <strong>Tea</strong><p>&pound;2.40</p></button></div>
                        <div class="u-col-4 u-col-md-3"><button class="ms-card ms-card--interactive u-w-full" type="button">
                            <strong>Bacon roll</strong><p>&pound;4.50</p></button></div>
                        <div class="u-col-4 u-col-md-3"><button class="ms-card ms-card--interactive u-w-full" type="button">
                            <strong>Porridge</strong><p>&pound;3.60</p></button></div>
                        <div class="u-col-4 u-col-md-3"><button class="ms-card ms-card--interactive u-w-full" type="button">
                            <strong>Flapjack</strong><p>&pound;2.20</p></button></div>
                        <div class="u-col-4 u-col-md-3"><button class="ms-card ms-card--interactive u-w-full" type="button">
                            <strong>Bottled water</strong><p>&pound;1.50</p></button></div>
                    </div>
                </div>

                <div class="u-col-12 u-col-lg-4">
                    <div class="ms-card">
                        <div class="ms-toolbar">
                            <strong>Order #1184</strong>
                            <span class="ms-toolbar__spacer"></span>
                            <a class="u-link" href="#">Void</a>
                        </div>
                        <table class="ms-table ms-table--compact">
                            <tr><td>2 &times; Flat white</td><td class="u-text-right">&pound;6.40</td></tr>
                            <tr><td>1 &times; Bacon roll</td><td class="u-text-right">&pound;4.50</td></tr>
                            <tr><td>1 &times; Flapjack</td><td class="u-text-right">&pound;2.20</td></tr>
                        </table>
                        <div class="ms-stat u-mt-4">
                            <span class="ms-stat__label">Total due</span>
                            <span class="ms-stat__value">&pound;13.10</span>
                        </div>
                        <div class="u-grid u-grid-cols-12 u-mt-4">
                            <div class="u-col-6"><button class="ms-btn ms-btn--outline ms-btn--lg u-w-full">Cash</button></div>
                            <div class="u-col-6"><button class="ms-btn ms-btn--primary ms-btn--lg u-w-full">Card</button></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More commerce layouts