KPI Card Component Dash

app.py

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc

external_stylesheets = [dbc.themes.BOOTSTRAP, "assets/style.css"]


def card(name, desc, value, color):
  """KPI Card Component"""
    return dbc.Col(
        dbc.Card(
            [
                dbc.CardBody(
                    [
                        html.P(
                            html.Img(
                                src=f"https://thispersondoesnotexist.com/image",
                                className="card-img",
                            )
                        ),
                        html.H4(name, className="card-title"),
                        html.P(desc, className="card-desc"),
                        html.P(f"{value:,}", className="card-text"),
                        html.P("Key Metric", className="card-kpi"),
                        html.P("Last 15 minutes", className="card-bottom"),
                    ],
                    className="text-center mx-auto",
                )
            ],
            style={
                "background": f"linear-gradient(to bottom, {color} 25%, #FFFFFF 0%)"
            },
        ),
        className="col-auto mb-3",
    )


app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = dbc.Container(
    html.Div(
        [
            html.H1("Card Component", className="text-center"),
            dbc.Row(
                [
                    card(f"John Doe", "Business Owner", 2, "green"),
                    card(f"Jane Doe", "Millionaire", 103, "blue"),
                    card(f"Juan Alimaña", "Entrepreneur", 104, "red"),
                ],
                className="cards justify-content-center",
            ),
        ]
    )
)


if __name__ == "__main__":
    app.run_server(debug=True)

style.css

.card {
    width: 14rem;
    height: 20rem;
    border: 0;
    box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
}

.card-img {
    border: 4px solid #FFFFFF;
    border-radius: 5rem;
    max-width: 7.5rem;
}

.card-title {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0.0625rem;
}

.card-party {
    color: #929FB1;
    margin-bottom: 0.0625rem;
}

.card-text {
    font-size: 2.25rem;
    margin-bottom: 0rem;
}

.card-kpi {
    color: #929FB1;
    margin-top:-0.25rem;
    font-size: 0.625rem;
}

.card-bottom {
    color: #929FB1;
    font-size: 0.625rem;
    margin: 1.125rem -7rem auto auto;
}

.cards {
    margin-top: 3rem;
}