パーツ番号 02-13-12 ・ CSSのみ

縦書き見出し+横書きCTAボタンの案内カード

縦書きの見出しの隣に説明文と横書きのボタンを配置した案内カードの見本です。WordPressのセミナー告知やイベント案内セクションで、和の雰囲気を保ちつつ行動を促したいときに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d02-13-12-card">
          <p class="d02-13-12-vh">説明会のご案内</p>
          <div class="d02-13-12-content">
            <p class="d02-13-12-desc">オンラインにて開催いたします。奮ってご参加ください。</p>
            <span class="d02-13-12-btn">詳細を見る &#8594;</span>
          </div>
        </div>

CSS

.d02-13-12{background:#eef2ff}
        .d02-13-12-card{display:flex;gap:18px;align-items:center}
        .d02-13-12-vh{writing-mode:vertical-rl;text-orientation:upright;font-size:19px;font-weight:800;letter-spacing:.12em;color:#312e81;margin:0;border-right:2px solid #c7d2fe;padding-right:12px}
        .d02-13-12-content{display:flex;flex-direction:column;gap:12px;max-width:150px}
        .d02-13-12-desc{margin:0;font-size:11.5px;line-height:1.8;color:#4338ca}
        .d02-13-12-btn{display:inline-block;align-self:flex-start;font-size:11px;font-weight:700;color:#fff;background:#4338ca;padding:8px 14px;border-radius:99px}

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