Kpi 数字 · `kf-kpi`

数字を 1 つ見せる。項目名、数字、補足の 3 行。

クラスKafune.kpiHtml

HTML

<div class="g" id="g"></div>
<script>
  document.getElementById('g').innerHTML =
    Kafune.kpiHtml({ label: '合計', value: '1,234,567', sub: '前月比 +8%' }) +
    Kafune.kpiHtml({ label: '件数', value: '68', unit: '件', sub: '先週 +4' }) +
    Kafune.kpiHtml({ label: '未読', value: '12', unit: '件', sub: '昨日 −5' }) +
    Kafune.kpiHtml({ label: '進捗', value: '41', unit: '%', sub: '残 19 日' });
</script>

項目名は label(ink-muted)。数字は kpi(Outfit 26px、等幅数字、ink-strong)。単位は <small> で数字の右に。補足は code(ink-faint)で前月比や根拠。
数字は 3 桁区切り、円は「¥」を付けるか見出しに「円」。小数は 1 桁まで。
横に並べるのは 4 つまで。Card の中に置く。
増減を色で示さない。向きは「+」「−」の記号と言葉で。

Kpi 数字 · kf-kpi

Kpi 数字 · `kf-kpi`