Blocks

Blocks

Ready-made pieces of a page, each a card that does one job. They take plain data, count their numbers up, light under the pointer and reflow with the grid. Every one here is fed real numbers from the sample books, and they open the working templates.

KPI stack

Three figures beside the main chart, each with its change against the same period last year.

Total income
€ +9.4%
vs 2025
Total expense
€ +5.4%
vs 2025
Net period
€ +16.8%
vs 2025

Stat card

A figure at the top of a detail page. Children replace the number for text, like a contact.

Budget €0
Invoiced 2026 €0 +19.8% vs 2025
Projects 0 1 active now
Contact Rita Costarita.costa@example.com
PropValuesDefaultWhat it does
title / valuestring · number—Counts up to the value
currency / decimals'€' | '' · number'€' · 2How it reads
change / changeLabel / goodWhen% or null · string · 'up' | 'down'—A badge; null reads “New in 2026”
note / childrenstring · snippet—A line under it · text instead of a number

Project and client cards

Grid items that open their page. Spent turns red when it runs more than 5 points ahead of the work (second card).

PropValuesDefaultWhat it does
ProjectCardhref · name · status · client · place · progress · budget · spent · end—A job
ClientCardhref · name · since · contact · city · revenue · trend · change · projects—A client

Money blocks

A total and its parts; a figure with the sheet behind its ↗; a loan paid off in ticks.

Income overview· 2026
€0 +9.4%
Contracts €207,666 54%
Change orders €96,142 25%
Retention released €80,759 21%
Van loan
Atlântico Leasing · Ford Transit €0 Paid of €24,000.00 · 63%
Next payment25 November 2026
Net worth
€0 Owns minus owes

Job blocks

How a job is going; who works on it; who to call; a client's jobs.

Progress vs spending
Work done78%
Budget used74.5%

Spending is in step with the work done.

Crew on this job
  • RRui
  • TTiago
  • NNuno
  • AAna
Client
Costa Family Rita Costa rita.costa@example.com +351 912 000 101

Story cards

A numbered story for a home page, a website section or a feature tour: a tall gradient, a title and one line, and a frosted panel holding any chart. The panel carries the night tokens, so the chart inside turns white on the glass by itself. Tones: sunset, ocean, dusk.

01 /

Money as it moves

Income, costs and what is left, the moment a paper is filed. No waiting for the month to end.

Total income · 2026
AprMayJunJulAug
02 /

Where the income comes from

Jobs, maintenance and the rest, side by side, each with its share.

Income overview
03 /

Costs by category

Every paper filed to materials, labour, fuel and more, with its share at a glance.

Spent this month
140Papers
  • Materials37%
  • Labour24%
  • Fuel21%
  • Other18%
PropValuesDefaultWhat it does
numbernumber—Shown as 01 /
title · textstring—The story in a line
tone'sunset' | 'ocean' | 'dusk''sunset'The sky behind it
panelstring—The glass panel’s title
childrensnippet—The panel’s content (a chart, a figure)