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

タグ風セクションラベル

角丸ピル型の小さなラベルを見出し上部に配置。カテゴリや種別を先に提示したいセクションの導入に向く。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <span class="pill">FEATURE</span>
          <h4 class="ttl">機能紹介セクション</h4>
        </div>

CSS

.d02-07-02 .wrap{ text-align:center; }
        .d02-07-02 .pill{ display:inline-block; padding:5px 16px; border-radius:999px; background:#eef2ff; color:#4338ca; font-size:11px; font-weight:700; letter-spacing:0.1em; margin-bottom:12px; }
        .d02-07-02 .ttl{ all:unset; display:block; font-size:22px; font-weight:800; color:#1e1b4b; }

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