@workday/canvas-kit-css-badge/dist/canvas-kit-css-badge.min.css

provides a summary indicator with dynamic values

/*
 * Workday Canvas - canvas-kit-css-badge v9.1.26
 * Copyright 2019-2023 Workday, Inc.
 */
@keyframes wdc-count-badge-grow{from{transform:scale(0.85)}to{transform:scale(1)}}.wdc-count-badge{align-items:center;animation:wdc-count-badge-grow .2s ease;border-radius:999px;box-sizing:border-box;display:inline-flex;font-family:"Roboto","Helvetica Neue","Helvetica",Arial,sans-serif;font-size:12px;font-weight:700;height:20px;justify-content:center;min-width:20px;line-height:20px;padding:0 6.5px;background:#de2e21;color:#fff;text-shadow:0 0 1px rgba(0,0,0,.35)}.wdc-count-badge:empty{background:#fff;border:solid 6px #de2e21;padding:0}.wdc-count-badge-inverse{align-items:center;animation:wdc-count-badge-grow .2s ease;border-radius:999px;box-sizing:border-box;display:inline-flex;font-family:"Roboto","Helvetica Neue","Helvetica",Arial,sans-serif;font-size:12px;font-weight:700;height:20px;justify-content:center;min-width:20px;line-height:20px;padding:0 6.5px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);color:#0875e1}.wdc-count-badge-inverse:empty{background:#0875e1;border:solid 6px #fff;padding:0}