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

カウントダウンバッジ(固定日数表示)

イベント開催までの残日数を固定値で示すバッジ。予約締切や開催告知バナーの訴求要素に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="cd">
          <span class="num">5</span>
          <span class="lb">開催まであと<b>5</b>日</span>
        </div>

CSS

.d10-09-09 .cd{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 20px; border-radius:12px; background:#1f2430; }
        .d10-09-09 .cd .num{ font-size:34px; font-weight:800; color:#7ee0b8; line-height:1; }
        .d10-09-09 .cd .lb{ font-size:11px; color:#aeb4c0; }
        .d10-09-09 .cd .lb b{ color:#7ee0b8; }

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