The Key Figures component is designed to visually emphasize important numbers or core statements. When users scroll to the position of the component, an animation is triggered: the entered values automatically count up.
The component can include:
a headline (can be shown or hidden)
a subheadline (can be shown or hidden)
multiple items (key figures)
Structure of an Item
Each item consists of three elements:
Value
This is where the key figure is entered.
The value is the visually dominant element and is displayed with an animated counting effect.
The Value field is not limited to numbers — short keywords or phrases can also be used. Keep in mind that the value is displayed larger than the caption and the copy text.
Caption
A short label or descriptive title displayed below the value.
The caption is centered by default.
Copy Text
An optional additional text managed via a rich text editor.
The copy text can be shown or hidden.
Within the rich text editor, text alignment can be adjusted (e.g., left, right, or centered). However, the caption remains centered regardless of the copy text alignment.
Links can also be added within the rich text editor.
Layout & Structure
You can create an unlimited number of key figures.
When more than four items are added, the layout automatically wraps to a new row (starting from five items).
A color scheme can be applied to the entire component.
Use Cases
The Key Figures component is particularly suitable for:
performance metrics
company statistics
success indicators
highlighting core messages in a compact format
Tips & Tricks
Use short and impactful values for maximum visual effect.
Be aware of the strong visual dominance of the value field when using keywords instead of numbers.
Plan the layout carefully if multiple rows are expected.
Ensure sufficient contrast when applying a color scheme.