パーツ番号 11-04-08 ・ CSSのみ

空状態からの誘導

データが無いときにイラストと大きめCTAで次の行動を促します。会員ダッシュボードやコンテンツ一覧の初期表示に。

css

プレビュー

ソースコード

HTML

<div class="d11-04-08-empty io-reveal">
          <svg class="d11-04-08-art" viewBox="0 0 120 90" width="120" height="90">
            <rect x="24" y="26" width="72" height="50" rx="6" fill="#eef2fb" stroke="#c7d2ea" stroke-width="2"/>
            <path d="M24 40h72" stroke="#c7d2ea" stroke-width="2"/>
            <circle cx="33" cy="33" r="2.5" fill="#c7d2ea"/>
            <circle cx="42" cy="33" r="2.5" fill="#c7d2ea"/>
            <path d="M50 58h20M50 65h32" stroke="#d3ddf0" stroke-width="3" stroke-linecap="round"/>
            <circle cx="90" cy="62" r="15" fill="#5b7cfa"/>
            <path d="M90 55v14M83 62h14" stroke="#fff" stroke-width="3" stroke-linecap="round"/>
          </svg>
          <h4>まだ投稿がありません</h4>
          <p>最初の記事を書いて、あなたのサイトを始めましょう。</p>
          <button class="d11-04-08-cta">最初の一歩を踏み出す</button>
        </div>

CSS

.d11-04-08{background:#f7f9fe}
        .d11-04-08 .d11-04-08-empty{text-align:center;max-width:250px}
        .d11-04-08 .d11-04-08-art{margin-bottom:6px}
        .d11-04-08 .d11-04-08-empty h4{font-size:16px;color:#2b3350;margin-bottom:6px}
        .d11-04-08 .d11-04-08-empty p{font-size:12px;line-height:1.6;color:#7a8296;margin-bottom:16px}
        .d11-04-08 .d11-04-08-cta{background:#5b7cfa;color:#fff;border:none;border-radius:10px;padding:12px 26px;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 8px 20px rgba(91,124,250,.35);transition:transform .2s,box-shadow .2s}
        .d11-04-08 .d11-04-08-cta:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(91,124,250,.45)}

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