パーツ番号 09-08-09 ・ CSSのみ

空の通知一覧イラスト

ベルモチーフのアウトラインで新着通知が無いことを伝える静止イラスト。管理画面や会員サイトの通知パネルに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-08-09-wrap">
          <svg class="d09-08-09-svg" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M50 14 C36 14 28 24 28 38 V52 L20 66 H80 L72 52 V38 C72 24 64 14 50 14 Z" stroke="#c7ccd6" stroke-width="6" stroke-linejoin="round"/>
            <path d="M42 76 a8 8 0 0 0 16 0" stroke="#c7ccd6" stroke-width="6" stroke-linecap="round"/>
          </svg>
          <p class="d09-08-09-text">通知はありません</p>
        </div>

CSS

.d09-08-09-wrap{ text-align:center; }
        .d09-08-09-svg{ width:80px; height:80px; margin:0 auto 12px; display:block; }
        .d09-08-09-text{ margin:0; font-size:14px; font-weight:700; color:#3a3f4b; }

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