PencilSum

Component gallery

Preview only: this page is never built for production. Values come from the registry running real spec examples. 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), and with help text.

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 10 x 10 ft patio 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

Materials checklist

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.

Live slab drawing

The 10 x 10 ft patio, and with no length yet. It redraws as the inputs change and has a text alternative.

Article section

Rendered from the spec outline as written, with the Draft copy tag.

Worked examples

The spec's examples, computed by the registry.

Sources list

Primary sources, then sources labelled secondary and derived.