getting started
premium components
deprecated components
Card
The Card
component is a small box used to display a numerical value. Typically
used in multiples to highlight key metrics or KPIs.
Schema
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
}
}
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. |
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 . |
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 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.
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

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 info@hybiscus.dev