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

アイコン+数値+ラベルの3要素カード

丸いアイコンバッジと数値、ラベルを横並びにした定番構成。WordPressの会員サイトや管理画面のサマリータイルに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-13-04-card">
          <div class="d05-13-04-icon">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="8" r="3.5"></circle>
              <path d="M5 20c0-3.87 3.13-6 7-6s7 2.13 7 6"></path>
            </svg>
          </div>
          <div class="d05-13-04-body">
            <p class="d05-13-04-value">2,431</p>
            <p class="d05-13-04-label">新規会員数</p>
          </div>
        </div>

CSS

.d05-13-04-card{
          width:100%;max-width:260px;background:#fff;border:1px solid #e5e7eb;
          border-radius:14px;padding:20px 22px;box-sizing:border-box;
          display:flex;align-items:center;gap:14px;
        }
        .d05-13-04-icon{
          flex:none;width:44px;height:44px;border-radius:12px;
          background:linear-gradient(135deg,#6366f1,#8b5cf6);
          display:flex;align-items:center;justify-content:center;
        }
        .d05-13-04-body{min-width:0}
        .d05-13-04-value{margin:0 0 4px;font-size:21px;font-weight:800;color:#1f2937}
        .d05-13-04-label{margin:0;font-size:12px;color:#6b7280}

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