KPI Card with Dash Bootstrap Components

Updated 2021-07-01 to use Dash 1.19 and fontawesome icons

Dash Bootstrap Components has a fantastic library of plug and play components that make it easy to get started.

You can find better styled examples of these all over the place if you google 'HTML/CSS dashboard examples.'

The magic of using Dash is that you can style these to your heart's content with CSS and all of the values can be generated with Python, and the whole thing can be reproducible and components can be shared across projects. And the flexbox system is just fine rather than fiddling with positioning in PowerBI.

Python Code for your app.py file:

import dash  # (version 1.19.0) pip install dash

import dash_bootstrap_components as dbc
import dash_html_components as html

fontawesome_stylesheet = "https://use.fontawesome.com/releases/v5.8.1/css/all.css"

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP, fontawesome_stylesheet])

header = html.Div([
    dbc.Row(dbc.Col(html.H1("H1 Text"))),
])

card = dbc.Card([
        dbc.CardBody([
                html.H4("Card title", className="card-title"),
                html.P(
                    "$10.5 M",
                    className="card-value",
                ),
                html.P(
                    "Target: $10.0 M",
                    className="card-target",
                ),
                html.Span([
                    html.I(className="fas fa-arrow-circle-up up"),
                    html.Span(" 5.5% vs Last Year",
                    className="up")
                ])
            ])
        ])

row = html.Div([
        dbc.CardDeck([
                card,
                card,
                card,
            ]),
    ], style={'padding': '25px'}
)

app.layout = html.Div([
    header,
    row,
    row
])

if __name__ == "__main__":
    app.run_server(host="0.0.0.0", port=8080, debug=True)

The 'up' arrow icon is courtesy of fontawesome, which we load with the external stylesheet. Since this is all in python it's simple to turn this into a function and create conditional (i.e. if) statements to change the icon and color scheme for your data.

Here is the basic CSS styling that goes with this:

.card {
  text-align: center;
}
.card .card-title {
  text-align: left;
  font-weight: lighter;
}

.card .card-value {
  font-size: 2rem;
}

.card .card-target {
  font-size: 1rem;
  font-weight: lighter;
}

.card .down {
  color: red;
}

.card .up {
  color: green;
}