Register

Alerts

Messages in the page: what happened, what to do next

Tones

Information, success, warning and danger, each with its icon so colour is never the only sign.

Prices change on November 1

Sweet Drop Syrups sent their autumn price list.

PO-1059 received

Every item arrived at Market Street.

Oat milk is low at Old Town

One carton left; the next delivery is Tuesday.

Show the code
<div class="stack w-100">
<div class="alert" role="status">
<i class="ti ti-info-circle">
</i>
<div>
<b>Prices change on November 1</b>
<p>Sweet Drop Syrups sent their autumn price list.</p>
</div>
</div>
<div class="alert alert-success" role="status">
<i class="ti ti-circle-check">
</i>
<div>
<b>PO-1059 received</b>
<p>Every item arrived at Market Street.</p>
</div>
</div>
<div class="alert alert-warning" role="status">
<i class="ti ti-alert-triangle">
</i>
<div>
<b>Oat milk is low at Old Town</b>
<p>One carton left; the next delivery is Tuesday.</p>
</div>
</div>
<div class="alert alert-danger" role="alert">
<i class="ti ti-alert-circle">
</i>
<div>
<b>Card reader offline</b>
<p>Till 2 at Riverside cannot take cards. Cash still works.</p>
</div>
</div>
</div>

With an action

The one thing to do about it, at the end.

Q3 sales tax return due Oct 31

$47,201.99 to Maine Revenue Services.

File it
Show the code
<div class="alert alert-warning w-100" role="status">
<i class="ti ti-receipt-tax">
</i>
<div>
<b>Q3 sales tax return due Oct 31</b>
<p>$47,201.99 to Maine Revenue Services.</p>
</div>
<a class="btn btn-sm" href="tax-returns.html">File it</a>
</div>

Dismissible

Gone when read; the focus moves to what comes next.

New: blind cash counts

Turn them on in POS settings.

Backup finished

Oct 4, 3:00 am · 214 MB.

Show the code
<div class="stack w-100">
<div class="alert" role="status">
<i class="ti ti-info-circle">
</i>
<div>
<b>New: blind cash counts</b>
<p>Turn them on in POS settings.</p>
</div>
<button type="button" class="btn btn-ghost btn-icon btn-sm" data-dismiss aria-label="Dismiss" data-tip="Dismiss">
<i class="ti ti-x">
</i>
</button>
</div>
<div class="alert alert-success" role="status">
<i class="ti ti-circle-check">
</i>
<div>
<b>Backup finished</b>
<p>Oct 4, 3:00 am · 214 MB.</p>
</div>
<button type="button" class="btn btn-ghost btn-icon btn-sm" data-dismiss aria-label="Dismiss" data-tip="Dismiss">
<i class="ti ti-x">
</i>
</button>
</div>
</div>

Banner

For the register: full width, short, impossible to miss.

Show the code
<div class="banner w-100" role="status">
<i class="ti ti-wifi-off">
</i>
<span>Offline · sales are saved on this till</span>
<span class="sp">
</span>
<button type="button" class="btn" data-toast="Still offline. Trying again in 30 seconds.">Try now</button>
</div>