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


Below are two examples of the schema 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


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.
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, when inside a Section or Row component with their columns option set to null.


The width key supports defining the width using a fraction specified as a string e.g. 1/3. The values for the denominator supported are 2, 3, 4, 5, 6 and 12, whilst the numerator can be any value up to the value of the denominator.

If the width key is set to null, then the component will attempt to fill all the available horizontal space.


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 schema.

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.


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).


Missing something?

Hybiscus is continuously improving and adding new features. If you think we are missing a critical feature, please do not hesitate to contact us and offer your feedback at