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

非対称オフセットヒーロー

テキストブロックを中心からあえてずらして配置し、余白で緊張感を出す構図です。WordPressのファッション・雑貨系サイトに向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-07-04-hero">
          <div class="d01-07-04-block">
            <span class="d01-07-04-eyebrow">SPRING SALE</span>
            <h1>季節の、はじまりに。</h1>
            <p>新作アイテムを、いち早くチェック。</p>
            <a href="#" class="d01-07-04-btn" onclick="return false;">見る</a>
          </div>
        </div>

CSS

.prev.d01-07-04{padding:0;display:block;min-height:300px}
        .d01-07-04-hero{position:relative;height:300px;background:linear-gradient(100deg,#f3ece2 0%,#e4d5c1 100%)}
        .d01-07-04-block{position:absolute;left:8%;top:50%;transform:translateY(-50%);max-width:60%;text-align:left}
        .d01-07-04-eyebrow{display:block;font-size:10px;letter-spacing:.2em;color:#a9713f;margin-bottom:10px}
        .d01-07-04-block h1{margin:0 0 10px;font-size:21px;font-weight:700;color:#3d2c1c;letter-spacing:.03em}
        .d01-07-04-block p{margin:0 0 16px;font-size:12px;line-height:1.8;color:#75604a}
        .d01-07-04-btn{display:inline-block;padding:9px 24px;background:#3d2c1c;color:#fff;font-size:11.5px;font-weight:600;text-decoration:none;letter-spacing:.05em;border-radius:2px}

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