Example tool

A small tool, built from components

Everything on this page comes from the design system.

Link the hosted stylesheet, set the four body properties above, and assemble the interface from the fm- classes. There is nothing else to install.

Primary action Secondary action

Primary card

A card holds a single statement. The primary variant sits on the primary surface with white text.

Secondary card

The secondary variant sits on the lighter surface with dark text. Every card needs one variant modifier.

A hint sits under the field, never inside it as a placeholder.

A dialog

The native <dialog> element with the .fm-modal class. Esc or the close button dismisses it. Content and behaviour are yours; the design system supplies backdrop, shadow and layout.

Budget lines

Item Owner Amount €
Cargo-bike sharingTransport42 000
School gardenEducation18 500
Energy adviceFacilities9 200
Total69 700