パーツ番号 10-09-06 ・ CSSのみ

予約確認カード(日時・人数固定表示)

予約日時や人数などをまとめたサマリーカード。予約完了ページやマイページの予約確認欄に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="confirm">
          <div class="head"><span class="chk">✓</span><span class="ttl">ご予約内容</span></div>
          <div class="row"><span class="lb">日時</span><span class="vl">7月15日(水) 14:00</span></div>
          <div class="row"><span class="lb">人数</span><span class="vl">2名</span></div>
          <div class="row"><span class="lb">店舗</span><span class="vl">渋谷本店</span></div>
          <span class="stat">確定</span>
        </div>

CSS

.d10-09-06 .confirm{ width:100%; max-width:230px; padding:14px 16px; border-radius:10px; background:#f7f8fa; border:1px solid #eceef1; }
        .d10-09-06 .head{ display:flex; align-items:center; gap:6px; margin-bottom:10px; }
        .d10-09-06 .chk{ width:18px; height:18px; border-radius:50%; background:#2f9e5c; color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; }
        .d10-09-06 .ttl{ font-size:12px; font-weight:700; color:#3a3f47; }
        .d10-09-06 .row{ display:flex; justify-content:space-between; font-size:11px; padding:4px 0; color:#5a606b; }
        .d10-09-06 .row .vl{ color:#222; font-weight:600; }
        .d10-09-06 .stat{ display:inline-block; margin-top:8px; font-size:10px; font-weight:700; color:#2f9e5c; background:#eaf7ef; padding:2px 10px; border-radius:999px; }

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