Alert banners
Four inline notices (info, success, warning and danger), each with a bold first phrase, one sentence, an optional action and a dismiss button.
Every receipt is matched
New payments from your bank feed show up here within a few minutes.
It is live: hover, focus and its own controls respond. Actions that would change data (approve, send, delete) are for your app to wire. The width is a real 390 px, 768 px or 1280 px box, shrunk to fit your screen.
Source
<style>
.odl-empty-state { box-sizing: border-box; inline-size: 100%; max-inline-size: 720px; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--ds-space-stack-sm); padding: var(--ds-space-section-sm) var(--ds-space-inset-lg);
text-align: center; background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
border-radius: var(--ds-radius-container); font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-empty-state .odl-art { display: grid; place-items: center; inline-size: 8.5rem; aspect-ratio: 1; margin-block-end: var(--ds-space-stack-xs); border-radius: var(--ds-radius-full);
background: var(--ds-color-bg-accent-subtle); }
.odl-empty-state svg { inline-size: 6.5rem; block-size: auto; }
.odl-empty-state .odl-tray { fill: var(--ds-color-surface-sunken); stroke: var(--ds-color-border-strong); }
.odl-empty-state .odl-paper { fill: var(--ds-color-surface-raised); stroke: var(--ds-color-border-strong); }
.odl-empty-state .odl-lines { stroke: var(--ds-color-border-default); }
.odl-empty-state .odl-check { fill: var(--ds-color-bg-action-primary); }
.odl-empty-state .odl-tick { stroke: var(--ds-color-text-on-action); }
.odl-empty-state .odl-spark { stroke: var(--ds-color-icon-accent); }
.odl-empty-state h3 { margin: 0; font: var(--ds-text-title-md); text-wrap: balance; }
.odl-empty-state p { margin: 0; max-inline-size: 36ch; color: var(--ds-color-text-secondary); text-wrap: pretty; }
.odl-empty-state .odl-acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--ds-space-inline-md); margin-block-start: var(--ds-space-stack-sm); }
.odl-empty-state button { min-block-size: max(var(--ds-size-control-md), var(--ds-size-target-min)); padding: 0 var(--ds-space-inset-md); border: 0; border-radius: var(--ds-radius-control); background: var(--ds-color-bg-action-primary);
color: var(--ds-color-text-on-action); font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-label); cursor: pointer;
transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-empty-state button:hover { background: var(--ds-color-bg-action-primary-hover); }
.odl-empty-state a { display: inline-flex; align-items: center; min-block-size: var(--ds-size-target-min); color: var(--ds-color-text-link); font: var(--ds-text-label-lg); text-underline-offset: 0.2em; }
.odl-empty-state button:focus-visible, .odl-empty-state a:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
@container (max-width: 20rem) { .odl-empty-state .odl-acts { flex-direction: column; align-self: stretch; } .odl-empty-state .odl-acts button { align-self: stretch; } }
@media (prefers-reduced-motion: reduce) { .odl-empty-state, .odl-empty-state *, .odl-empty-state *::before { transition: none !important; animation: none !important; } }
</style>
<section class="odl-empty-state" aria-label="Receipts">
<span class="odl-art" aria-hidden="true"><svg viewBox="0 0 120 90" fill="none" stroke-width="1.5" stroke-linejoin="round" aria-hidden="true">
<path class="odl-paper" d="M34 14h40l10 10v42H34z"/><path class="odl-lines" d="M42 30h28M42 38h34M42 46h22"/>
<path class="odl-tray" d="M18 56h24l5 9h26l5-9h24v24a4 4 0 0 1-4 4H22a4 4 0 0 1-4-4z"/>
<circle class="odl-check" cx="88" cy="22" r="11"/><path class="odl-tick" stroke-width="2" stroke-linecap="round" d="m83 22.5 3.5 3.5 6.5-7"/>
<path class="odl-spark" stroke-linecap="round" d="M104 10v6M101 13h6M16 30v5M13.5 32.5h5"/>
</svg></span>
<h3>Every receipt is matched</h3>
<p>New payments from your bank feed show up here within a few minutes.</p>
<div class="odl-acts"><button type="button">Import a bank file</button><a href="#">Set up match rules</a></div>
</section>
More like this
Toast stack
Short notices that stack in a corner: done with an undo, in progress with a bar, and failed with a retry that keeps the person's work.
Setup checklist
A short list of first steps with progress: what is done, the one step to do now with its time and a way to skip, and what comes next.