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

複数指標コンパクトサマリーカード

3つの指標を区切り線付きで横に並べた省スペース構成。WordPressのランディングページ管理画面や週次レポートに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-13-06-card">
          <p class="d05-13-06-title">サマリー</p>
          <div class="d05-13-06-row">
            <div class="d05-13-06-cell">
              <p class="d05-13-06-num">1,204</p>
              <p class="d05-13-06-lbl">訪問数</p>
            </div>
            <div class="d05-13-06-cell">
              <p class="d05-13-06-num">312</p>
              <p class="d05-13-06-lbl">申込数</p>
            </div>
            <div class="d05-13-06-cell">
              <p class="d05-13-06-num">25.9%</p>
              <p class="d05-13-06-lbl">CVR</p>
            </div>
          </div>
        </div>

CSS

.d05-13-06-card{
          width:100%;max-width:280px;background:#fff;border:1px solid #e5e7eb;
          border-radius:14px;padding:18px 16px;box-sizing:border-box;
        }
        .d05-13-06-title{margin:0 0 12px;font-size:12.5px;font-weight:700;color:#6b7280}
        .d05-13-06-row{display:flex}
        .d05-13-06-cell{flex:1;text-align:center;padding:0 6px;border-left:1px solid #eef0f3}
        .d05-13-06-cell:first-child{border-left:none}
        .d05-13-06-num{margin:0 0 4px;font-size:17px;font-weight:800;color:#1f2937}
        .d05-13-06-lbl{margin:0;font-size:10.5px;color:#9ca3af}

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