パーツ番号 05-09-03 ・ CSSのみ

増減矢印付きKPIカード

前月比の▲▼マークを添えて数値の増減を示すKPIカードです。管理画面のダッシュボードで指標の変化を伝えるのに向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-09-03-cards">
          <div class="d05-09-03-card">
            <span class="d05-09-03-title">月間売上</span>
            <span class="d05-09-03-value">¥3.2M</span>
            <span class="d05-09-03-diff d05-09-03-up">▲ 12.4%</span>
          </div>
          <div class="d05-09-03-card">
            <span class="d05-09-03-title">解約率</span>
            <span class="d05-09-03-value">2.1%</span>
            <span class="d05-09-03-diff d05-09-03-down">▼ 0.6pt</span>
          </div>
        </div>

CSS

.d05-09-03{padding:20px}
        .d05-09-03-cards{display:flex;gap:16px;width:100%}
        .d05-09-03-card{flex:1;display:flex;flex-direction:column;gap:6px;padding:16px 14px;border-radius:10px;background:#fff;border:1px solid #e5e7eb;box-shadow:0 1px 3px rgba(0,0,0,.04)}
        .d05-09-03-title{font-size:11px;color:#94a3b8;font-weight:600}
        .d05-09-03-value{font-size:22px;font-weight:800;color:#1e293b}
        .d05-09-03-diff{width:fit-content;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:700}
        .d05-09-03-up{color:#16a34a;background:#dcfce7}
        .d05-09-03-down{color:#dc2626;background:#fee2e2}

クラス名 .d05-09-03 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。