29 lines
1.3 KiB
HTML
29 lines
1.3 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.
|
|
|
|
It is an ordinary .card. It used to be `border-0 bg-white shadow-sm`, which was a
|
|
raised white panel in a kit whose every other surface is a bordered flat one, and
|
|
`bg-white` is a hard-coded light-theme colour besides -- wrong in a dark theme on
|
|
every service. Depth is not a level of hierarchy this kit has.
|
|
{% endcomment %}
|
|
<div class="col">
|
|
<div class="card h-100">
|
|
<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>
|