PennySum

Component gallery

Preview only: this page is never built for production. Figures come from the real maths (calc/vat.ts) on the VAT calculator spec's first example. Offers and ad slots are samples and link nowhere.

Header

The header as built: wide here, and a wordmark with a menu button when this panel is under 640px wide. Then the open phone menu, which fills the screen on a real phone (shown inside a phone-sized frame).

Stepper input

Normal, at its minimum (the − button is disabled), with help text, and invalid (a required size that is blank or 0: accent outline, aria-invalid, described by the empty-state message).

Money input

The £ prefix and a text field (type "£1,234.50" or paste with commas): normal, invalid (more than 2 decimal places), and a blank optional amount.

Choice buttons

One selected, another selected, and a longer list that wraps.

Inline result bar

Real pages show it at 800px and below only; it is forced visible here. Second: the empty state.

Result card

The VAT calculator's first example: checked (the date is a gallery sample; real cards use the tool's lastFactCheck), not yet fact-checked (what every tool shows in a preview today), added to the project list, and empty (a required size is 0).

On a wide card, then on a phone-width card.

Partner offer

Button beside the text on a wide card; full width below the text on a narrow card.

Ad slot

With the sample frame, and as it ships (label and reserved space only).

Working shown

Project-type control

Tool pages show it only when two or more tools in the group have pages. Here every tool in the group is listed, the current one raised and the others real links.

Article section

The first article section of the VAT calculator that needs no calculator result, from the spec's copy.

Worked examples

The VAT calculator's first example, worked out by the real maths.

Sources list

Primary sources, then a secondary source (tagged) and the source of a derived figure (listed, not tagged).