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

色分け背景ステータスKPIカード

状態に応じて背景色そのものを変えて注意を引くカード。WordPressの監視・運用ダッシュボードで異常値を目立たせたい場面に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-13-03-card">
          <span class="d05-13-03-badge">警告</span>
          <p class="d05-13-03-label">エラー発生率</p>
          <p class="d05-13-03-value">4.8%</p>
          <p class="d05-13-03-sub">しきい値 3.0% を超過</p>
        </div>

CSS

.d05-13-03-card{
          width:100%;max-width:260px;background:linear-gradient(135deg,#fb923c,#f97316);
          border-radius:14px;padding:20px 22px;box-sizing:border-box;color:#fff;
        }
        .d05-13-03-badge{
          display:inline-block;font-size:10.5px;font-weight:700;background:rgba(255,255,255,.28);
          padding:3px 10px;border-radius:99px;margin-bottom:10px;letter-spacing:.03em;
        }
        .d05-13-03-label{margin:0 0 6px;font-size:12.5px;font-weight:700;opacity:.92}
        .d05-13-03-value{margin:0 0 8px;font-size:26px;font-weight:800}
        .d05-13-03-sub{margin:0;font-size:11.5px;opacity:.85}

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