DataBlock
The DataBlock reports specific data and information with great prominence, allowing identification of trends, comparisons or progress towards a goal. See the numeral writing guidelines in the Writing Guide.
It is used to quickly show a data of great importance, which delivers pre-formatted analyzes (comparisons, trends and relationships) that make the information easier to understand.
This component focuses on a single piece of data and, therefore, should not be used when there is a large volume of information. In these cases, use Lists or Tables.
Default
Use when there is data that needs to be highlighted. In this case, the required elements are label and numeric value.
Label explanation
You can add a tooltip next to the label when needed to explain its meaning.
Trend and Comparison
Use when the main data is related to a time period or goal, and when the intention is to show the trend or progress of this data. It is possible to use a simple trend graph or to present the number linked to the main data, in this case as a percentage.
Prefix and suffix
Indicative elements displayed before or after the value.
Alignment
The inner elements of a data block must be aligned only left or center.
Internacionalization
The component must have enough space, providing for different languages. The displayed value must not break lines or be hidden by the layout.
Good habits
Values cannot break into two lines.