パーツ番号 01-07-08 ・ CSSのみ

ミニマルテキストのみヒーロー

白背景に大きな文字だけを置き余白で見せる構図です。WordPressのタイポグラフィ重視なブランドサイトのトップに向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-07-08-hero">
          <h1>SIMPLE<br>IS BEST.</h1>
          <p>タイポグラフィだけで魅せる、余白の力。</p>
        </div>

CSS

.prev.d01-07-08{padding:0;display:block;min-height:300px}
        .d01-07-08-hero{height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#fff}
        .d01-07-08-hero h1{margin:0 0 14px;font-size:34px;line-height:1.15;font-weight:800;color:#111;letter-spacing:.02em}
        .d01-07-08-hero p{margin:0;font-size:12px;color:#8a8a8a;letter-spacing:.05em}

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