Selectable table
A dense table with row checkboxes, status pills and a bar of bulk actions that appears, with a live count, as soon as a row is picked.
- Received
- $2,846,191.37
- 2,418 receipts · USD at booking rates
- Matched to invoices
- $2,492,802.73
- 87.6% of value
- Waiting to match
- $311,482.09
- 192 receipts · oldest from Oct 9
- Held as credit
- $41,906.55
- 63 receipts on 58 accounts
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-kpi-strip { box-sizing: border-box; inline-size: 100%; container-type: inline-size; text-wrap: pretty; }
.odl-kpi-strip dl { box-sizing: border-box; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr);
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); box-shadow: var(--ds-elevation-raised); overflow: hidden; font: var(--ds-text-body-md); }
.odl-kpi-strip dl > div { min-inline-size: 0; padding: var(--ds-space-inset-lg); display: grid; align-content: start; gap: var(--ds-space-stack-xs);
box-shadow: calc(-1 * var(--ds-border-width-default)) 0 0 0 var(--ds-color-border-subtle), 0 calc(-1 * var(--ds-border-width-default)) 0 0 var(--ds-color-border-subtle); }
.odl-kpi-strip dt { color: var(--ds-color-text-secondary); font: var(--ds-text-label-lg); }
.odl-kpi-strip dd { margin: 0; }
.odl-kpi-strip .odl-value { font: var(--ds-text-title-lg); font-variant-numeric: tabular-nums; white-space: nowrap; }
@container (min-width: 26rem) { .odl-kpi-strip dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 50rem) { .odl-kpi-strip dl { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.odl-kpi-strip .odl-value span { color: var(--ds-color-text-tertiary); }
.odl-kpi-strip .odl-note { color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); }
.odl-kpi-strip .odl-meter { display: flex; align-items: center; gap: var(--ds-space-inline-sm); }
.odl-kpi-strip .odl-meter i { flex: 1; max-inline-size: 6rem; block-size: var(--ds-space-4); border-radius: var(--ds-radius-full); background: var(--ds-color-bg-neutral-subtle); overflow: hidden; }
.odl-kpi-strip .odl-meter i::before { content: ""; display: block; block-size: 100%; inline-size: var(--odl-fill, 50%); background: var(--ds-color-bg-action-primary); border-radius: inherit; }
.odl-kpi-strip .odl-warn { color: var(--ds-color-text-warning); }
@container (max-width: 25.98rem) {
.odl-kpi-strip dl > div { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--ds-space-inline-md); row-gap: var(--ds-space-4); padding: var(--ds-space-inset-md); }
.odl-kpi-strip dt { grid-column: 1; grid-row: 1; }
.odl-kpi-strip .odl-value { grid-column: 2; grid-row: 1; font: var(--ds-text-title-md); text-align: end; }
.odl-kpi-strip .odl-note { grid-column: 1 / -1; }
}
</style>
<div class="odl-kpi-strip"><dl aria-label="Receipts this month">
<div><dt>Received</dt><dd class="odl-value">$2,846,191<span>.37</span></dd><dd class="odl-note">2,418 receipts · USD at booking rates</dd></div>
<div><dt>Matched to invoices</dt><dd class="odl-value">$2,492,802<span>.73</span></dd>
<dd class="odl-note odl-meter"><i style="--odl-fill: 87.6%" aria-hidden="true"></i>87.6% of value</dd></div>
<div><dt>Waiting to match</dt><dd class="odl-value">$311,482<span>.09</span></dd><dd class="odl-note"><span class="odl-warn">192 receipts</span> · oldest from Oct 9</dd></div>
<div><dt>Held as credit</dt><dd class="odl-value">$41,906<span>.55</span></dd><dd class="odl-note">63 receipts on 58 accounts</dd></div>
</dl></div>
More like this
Activity feed
A record's history: who did what and when, with field changes shown as old value, new value and the difference.
Approval panel
One bill waiting for approval: the amount, the policy that applies, who has approved so far, and what the balance will be after paying.