パーツ番号 05-04-06 ・ CSSのみ

KPIカード(増減矢印付き)

数値と前月比の▲▼バッジを表示し、ホバーでカードが浮き上がります。WordPressの管理画面風レポートやダッシュボードに使えます。

hovercss

プレビュー

ソースコード

HTML

<div class="d05-04-06-wrap">
          <div class="d05-04-06-card">
            <span class="d05-04-06-t">月間売上</span>
            <span class="d05-04-06-v">¥8.4M</span>
            <span class="d05-04-06-badge d05-04-06-up">▲ 12.5%</span>
          </div>
          <div class="d05-04-06-card">
            <span class="d05-04-06-t">解約率</span>
            <span class="d05-04-06-v">2.1%</span>
            <span class="d05-04-06-badge d05-04-06-down">▼ 0.8%</span>
          </div>
          <div class="d05-04-06-card">
            <span class="d05-04-06-t">新規会員</span>
            <span class="d05-04-06-v">1,340</span>
            <span class="d05-04-06-badge d05-04-06-up">▲ 6.2%</span>
          </div>
        </div>

CSS

.d05-04-06 .d05-04-06-wrap{display:flex;flex-direction:column;gap:12px;width:100%}
        .d05-04-06 .d05-04-06-card{background:#fff;border:1px solid #e6ebf3;border-radius:12px;padding:14px 16px;
          display:flex;align-items:center;gap:12px;box-shadow:0 2px 6px rgba(20,40,90,.05);
          transition:transform .25s ease,box-shadow .25s ease}
        .d05-04-06 .d05-04-06-card:hover{transform:translateY(-4px);box-shadow:0 10px 22px rgba(20,40,90,.13)}
        .d05-04-06 .d05-04-06-t{font-size:12px;color:#5a6273;flex:0 0 68px}
        .d05-04-06 .d05-04-06-v{font-size:22px;font-weight:800;color:#2a3140;flex:1}
        .d05-04-06 .d05-04-06-badge{font-size:12px;font-weight:700;padding:3px 9px;border-radius:20px}
        .d05-04-06 .d05-04-06-up{color:#12915f;background:#e4f7ee}
        .d05-04-06 .d05-04-06-down{color:#c8402f;background:#fdecea}

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