# 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 `
`: 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. ```html

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
``` ### Totals `totals` on a `
` of rows - a `
` 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. ```html
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
``` ### 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. ```html ``` ## 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`](https://github.com/redz-tech/REDZ.UI/blob/main/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`.