The Stat Card component is a really simple UI element to quickly display a number from a database, calculated or hardcoded in a card format, allowing you do display some quick data.

All three label properties (Title, Value, Label) support Bindings through Handlebars or JavaScript functions. In the example above you can see this demonstrated in a mixture of ways, there's a calculation happening on an average latitude, there's a number of rows displayed from the database, and there's the current user's firstname displayed as the title.

Adding a Stat Card

The Stat Card is located under Card > Stat Card in the Budibase design section. A wrapping Data Provider is not required as the Stat Card can also display information about the user, or run JavaScript functions. However, if you want to display data from Data SourcesData Sources - Budibase is built up of multiple data sources, this can be the internal Budibase DB, but can also be your remote MySQL, PostgreSQL, REST or one of the many other sources available in Budibase. you'll need to add the Stat Card as a child of a Data Provider that has the Data Source connected.

Displaying Data

If you want to display data in a Stat Card, you can use Bindings in the Settings PanelSettings Panel - The Settings Panel is where you can configure every property of a design element. By default this is displayed, when clicking an element when you're in the Budibase Design Section, on the right.. There are three values you can set using Bindings.