KPI Card
KPI cards are a visual representation of a key performance indicator that compare a metric to a target value.
Overview
Resources
Install
yarn add @activecampaign/camp-components-kpi-cardVariations
Like the data visualization chart palette, the KPIs have extended color options that can be used in the KPI bar. These colors should not be chosen at random and should follow the same order for visual consistency. If a metric better falls under the guidelines of use for success, warning, or danger metrics, prioritize use of those colors.
Individual cards
Default (Midnight)
When using a full KPI bar, the default KPI should be the lowest common denominator that all other metrics in the bar are in relation to, such as for “campaigns sent”.
Moss (Success)
Moss can also be used to indicate success and should be used for metrics aligned to user goals, such as: delivered emails, revenue, active contacts, and daily growth.
Midday (Warning)
Midday represents warning and is to alert users to metrics that they should observe and take caution of, such as: bounced emails, spam complaints, and non-active contacts.
Red (Danger)
Red is specifically reserved for metrics that detract from the user’s goals, such as: unsubscribes and daily losses. When possible, only one red metric should appear in any KPI bar. Use red KPI cards sparingly and only for metrics that have a negative impact.
The following colors do not have any semantic meaning and can be used for a variety of metrics when placed in the KPI bar.
AC Blue
Dusk
Maroon
Violet
KPI bar
When placed together, the KPI cards make up the KPI bar. The number of cards that appear in the bar can vary but other than the default color and the semantic colors, the order of the supplementary colors should always be used in order: AC Blue, followed by Dusk, Maroon, and Violet in that order.
Usage
Tooltips and truncation
If a KPI benefits from additional information, dashed underline styling is used to visually cue to the user that they can interact with the label. The label and underline have no hover state other than the tooltip appearing when the cursor is over the label. For definitions such as these, the content heavy tooltip should be used.
For long labels, they are truncated after a single line and appear with a simple tooltip. Tooltips also appear on hover or focus of reporting icon buttons to signal to the user that there is a report available for them to view. Taking action on this button will take the user to the associated report. KPI cards with a report available to view are identified with a report icon to the left of the label.
Content guidelines
Large numbers
When working with large numbers, the minimum width of KPI cards accommodates up to 5 digits. Abbreviation can occur for numbers over 99,999 that may not fit in the card. At this point, round down to the nearest hundred. Once you hit a million, round down to the nearest hundred thousand. What displays in the tooltip should not be less than the rounded number that appears. * 100.1k (100,100–100,199), 250.5k (250,500–250,599) * 1.3m (1,300,000–1,399,999)
Monetary values
When displaying monetary values, the currency abbreviation must also be displayed. Monetary values would also share the same rules as large numbers, aside from a lack of decimal. These values should also be rounded down to the nearest hundred. Once you hit a million, round down to the nearest lowest hundred thousand. What displays in the tooltip should not be numerically less than the rounded number that appears. * 120,000.00–1.1m (1,199,999.99)
Percentages
- Commas should not be used in percentages until they reach 5 digits * For values ≤ 999% containing decimals, only show one decimal place * For values ≥ 1000%, do not show a decimal * For whole percentages, do not use a decimal (for example, do not show 15.0%)