パーツ番号 02-07-33 ・ CSSのみ

日付ラベル付き見出し

カレンダー風の日付バッジを見出しに添えるスタイル。開催期間のあるキャンペーンやイベント告知セクションの見出しに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <div class="date-badge">
            <span class="dd">07</span>
            <span class="mm">JUL</span>
          </div>
          <h4 class="ttl">サマーセール開催</h4>
        </div>

CSS

.d02-07-33 .wrap{ display:flex; flex-direction:column; align-items:center; gap:10px; }
        .d02-07-33 .date-badge{ display:flex; flex-direction:column; align-items:center; width:52px; border-radius:8px; background:#fff; border:2px solid #dc2626; overflow:hidden; }
        .d02-07-33 .dd{ font-size:18px; font-weight:800; color:#1f2937; line-height:1.6; }
        .d02-07-33 .mm{ display:block; width:100%; text-align:center; font-size:10px; font-weight:800; color:#fff; background:#dc2626; letter-spacing:.05em; }
        .d02-07-33 .ttl{ all:unset; font-size:20px; font-weight:800; color:#1f2937; }

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