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

チェックマーク完了ラベル見出し

丸いチェックアイコンを添えた確認・完了系の見出し。フォーム完了画面や手続き完了通知の見出しに向く。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <span class="check">&#10003;</span>
          <h4 class="ttl">お申し込み完了</h4>
        </div>

CSS

.d02-07-15 .wrap{ display:flex; align-items:center; justify-content:center; gap:10px; }
        .d02-07-15 .check{ display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:#059669; color:#fff; font-size:15px; font-weight:800; flex-shrink:0; }
        .d02-07-15 .ttl{ all:unset; font-size:20px; font-weight:800; color:#1f2937; }

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