← 静的パーツギャラリーへ戻る

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

アイコン+キャプションスタック見出し

アイコン・見出し文・英字キャプションを縦に積んだラベル型見出し。キャンペーンや案内カードの導入に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="stack">
          <span class="icon">&#127991;&#65039;</span>
          <h4 class="ttl">キャンペーン情報</h4>
          <span class="caption">CAMPAIGN INFO</span>
        </div>

CSS

.d02-07-26 .stack{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
        .d02-07-26 .icon{ font-size:26px; line-height:1; }
        .d02-07-26 .ttl{ all:unset; font-size:20px; font-weight:800; color:#1f2937; }
        .d02-07-26 .caption{ font-size:11px; letter-spacing:.12em; color:#9ca3af; font-weight:700; }

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