24 lines
1 KiB
HTML
24 lines
1 KiB
HTML
{% 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>
|