Skip to content

Numeric Widget

The numeric widget displays numeric text. The number can be static text or it can be a dynamic widget value

Numeric Widget

The number text will be dynamically scaled according to the size of the widget and will be centered by default.

Configurable components

Class NameDescription
cardNumeric widget card component
primaryPrimary numeric component

Widget Properties

NameDescription
prefixOptional prefix text to display before the text
suffixOptional suffix text to display after the text
textAlternate numeric text to display
valueWidget numeric data value to display

Common CSS Properties

PropertyDescription
font-sizeSet the font size of the numeric text. Defaults to max(10px, min(min(18cqw, 18cqh), 144px))
font-weightSet the font weight of the numeric text. Defaults to bold.
backgroundBackground color
colorText color
justify-contentSet to left to left align the text.
prefix.font-sizeSet the font size of the prefix text. Defaults to max(10px, min(min(5cqw, 5cqh), 36px))
suffix.font-sizeSet the font size of the suffix text. Defaults to max(10px, min(min(5cqw, 5cqh), 36px))