Initial commit

yksa_web/templates/yksa/ui/_kpi.html

@@ -0,0 +1,24 @@
+{% comment %}
+KPI tile. One column of a .row-cols-* grid.
+
+    {% include "yksa/ui/_kpi.html" with label=label value=value %}
+    {% include "yksa/ui/_kpi.html" with label=label value=value hint=hint accent="primary" %}
+
+  label   the caption (required)
+  value   the figure (required)
+  hint    muted secondary line under the figure
+  accent  Bootstrap semantic name for a left border -- at most one per strip
+
+A tile whose secondary line is itself markup (a timestamp through
+yksa/ui/_utc.html, say) builds the same three elements inline with the same
+classes, as with .yksa-empty.
+{% endcomment %}
+<div class="col">
+    <div class="card h-100 border-0 bg-white shadow-sm">
+        <div class="card-body py-2 px-3{% if accent %} border-start border-{{ accent }} border-3{% endif %}">
+            <div class="yksa-label text-truncate">{{ label }}</div>
+            <div class="yksa-readout fs-4">{{ value }}</div>
+            {% if hint %}<div class="text-body-secondary small">{{ hint }}</div>{% endif %}
+        </div>
+    </div>
+</div>