Summaries and totals

The facts of one record in pairs - a label and its value - and the sums at the foot of an invoice or a booking.

Examples

summary on a <dl>: the terms in a column as wide as the longest, the values beside them; in a region narrower than 30rem each value goes under its term.

Booking 24-0187

Excursion: North Bay: marine park by speedboat
Date: 14 December 2026, 08:30
Guests: 2 adults, 1 child
Pickup: East beach, the hotel's lobby

<section class="card" aria-labelledby="summary-booking-title">
	<div class="card-header"><h2 class="fs-14" id="summary-booking-title">Booking 24-0187</h2></div>
	<div class="card-body">
		<dl class="summary">
			<dt>Excursion</dt><dd>North Bay: marine park by speedboat</dd>
			<dt>Date</dt><dd>14 December 2026, 08:30</dd>
			<dt>Guests</dt><dd>2 adults, 1 child</dd>
			<dt>Pickup</dt><dd>East beach, the hotel's lobby</dd>
		</dl>
	</div>
</section>

Totals

totals on a <dl> of rows - a <div> each, its label and its value - the numbers at the end in tabular-nums; totals-grand on the last row draws it larger, under a line.

2 adults × 2,500 THB: 5,000 THB
1 child × 1,500 THB: 1,500 THB
Discount, early booking: -650 THB
To pay: 5,850 THB

<dl class="totals">
	<div><dt>2 adults × 2,500 THB</dt><dd>5,000 THB</dd></div>
	<div><dt>1 child × 1,500 THB</dt><dd>1,500 THB</dd></div>
	<div><dt>Discount, early booking</dt><dd>-650 THB</dd></div>
	<div class="totals-grand"><dt>To pay</dt><dd>5,850 THB</dd></div>
</dl>

In a confirmation

REDZ.ui.confirm({rows: [{label, value}]}) shows the same pairs in its dialog - what a payment is, what a move changes - after its note and before its lists; every word is text, never HTML.

<button class="btn btn-primary" type="button" data-docs-run="confirm-rows">Pay 5,850 THB</button>

Accessibility

A description list tells a screen reader which value belongs to which term, so no heading is needed for each pair.
A sum written with its sign - "-650 THB" - says a discount without color.

Tokens

From css/components/summary.css, which declares no custom property of its own.

It reads the theme's --redz-space-8, --redz-space-16, --redz-text-muted, --redz-text, --redz-space-4, --redz-border, --redz-fs-16.