Card

The Card component is a small box used to display a numerical value. Typically used in multiples to highlight key metrics or KPIs.

Example JSON

Below are two examples of the JSON required to define a Card.

{
    "type": "Card",
    "options": {
        "title": "Click through rate",
        "value": 5,
        "units": "%",
        "icon": "dashboard"
    }
},
{
    "type": "Card",
    "options": {
        "title": "Impressions",
        "value": "1,364",
        "units": "views",
        "icon": "confetti",
        "highlighted": true
    }
}

Description

Key	Description
title	The title of the Card.
value	The numerical value to display in the Card
units	Optional. The units for the value being displayed.
title_uppercase	Optional. Whether to have the title in uppercase. Defaults to true.
title_font_size	Optional. Font size of title text. Defaults to sm. See below for more details.
icon_font_size	Optional. Font size of the icon. Defaults to 4xl. See below for more details.
value_font_size	Optional. Font size of value text. Defaults to 4xl. See below for more details.
units_font_size	Optional. Font size of units text. Defaults to 2xl. See below for more details.
icon	Optional. The icon to place next to the value.
highlighted	Optional. Highlight the Card by using an accented colour background.
width	Optional. The width of the component. Only applies when inside a Section or Row component whose columns option is set to null.

Font size

The font size of the different parts of the component can be overriden using the *_size keys, and can take on any of the following values (in increasing order):

• xs
• sm
• lg
• xl
• 2xl
• 3xl
• 4xl

Width

For details on the width key, please see here.

Icon

Icons are powered by the Tabler Icons package which provides over 1,250 different icons. Simply use the icon name provided on the Tabler Icons website in place of the icon key in your JSON.

Highlighted background

By setting the highlighted key to true, this changes the background to an accent colour to help draw attention to the card. The colour chosen is dictated by the theme applied to your report. Refer to the Themes section for more details.

Theming

The text inside a Card component is controlled by the typography theme, as the font uses the heading font family (which is controlled by typography themes).

Example