パーツ番号 02-14-03 ・ CSSのみ

オーバーラインラベル

大文字と広めの字間トラッキングを効かせた小さなラベルを見出し上部に配置。ポートフォリオの作品紹介に向く。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <span class="over">FEATURED WORK</span>
          <p class="lead">建築写真プロジェクト</p>
        </div>

CSS

.d02-14-03{ display:flex; align-items:center; justify-content:center; }
        .d02-14-03 .wrap{ text-align:center; }
        .d02-14-03 .over{ display:block; font-size:11px; font-weight:700; letter-spacing:0.28em; color:#9ca3af; text-transform:uppercase; margin-bottom:10px; }
        .d02-14-03 .lead{ all:unset; display:block; font-size:19px; font-weight:700; color:#1f2937; }

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