Icon Stat
Description
The Icon Stat component is a flexible and visually appealing way to present statistical information. It combines an optional icon with a numerical value, an optional suffix, and a descriptive title. This component is ideal for dashboards, summary sections, or anywhere you need to highlight key metrics with visual emphasis.
Installation
bash
sabaccui add iconStat
Usage
Here are some examples of how to use the Icon Stat component in a Storyblok block:
Basic usage with all fields
Preview
0 Active Users
+Active Users
Usage without an icon
Preview
0 Uptime
%Uptime
Usage with a large number
Preview
0 Annual Revenue
$Annual Revenue
Schema
| Field | Type | Description | Default |
|---|---|---|---|
icon | asset | An optional icon to display alongside the stat. | null |
value | number | The numerical value of the statistic. | null |
suffix | text | An optional suffix to append to the value (e.g., "%", "+"). Translatable. | "" |
title | text | A descriptive title for the statistic. Translatable. | "" |
Notes
- The component uses a
NumberTickercomponent to animate the display of the numerical value. - If no icon is provided, a vertical line will be displayed as a visual separator.
- The component is responsive and adjusts its layout for different screen sizes.
- The title is displayed in gray to differentiate it from the main value.
Best Practices:
- Use concise and clear titles to explain what the statistic represents.
- Choose appropriate icons that visually relate to the statistic being displayed.
- Consider using suffixes to provide additional context or units for the values.
- Ensure that the numerical values are kept up-to-date for accurate reporting.
- Use this component in conjunction with other components to create informative dashboards or summary sections.