パーツ番号 09-05-01 ・ CSSのみ

SSL/セキュリティ認証バッジ

鍵アイコンと「SSL暗号化通信」の表示で通信の安全性を訴求。LPやECサイトのフォーム周辺に置くと安心感を高められる。

cssdarkinput

プレビュー

ソースコード

HTML

<div class="d09-05-01-badge">
          <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.8">
            <rect x="5" y="11" width="14" height="9" rx="1.5"/>
            <path d="M8 11V7a4 4 0 0 1 8 0v4"/>
          </svg>
          <div class="d09-05-01-text">
            <strong>SSL暗号化通信</strong>
            <span>お客様の情報を安全に保護</span>
          </div>
        </div>

CSS

.d09-05-01{ background:#f4f7fb; }
        .d09-05-01-badge{
          display:flex; align-items:center; gap:14px;
          padding:16px 22px; border-radius:12px;
          background:#fff; border:1px solid #dbe6f1;
          box-shadow:0 4px 14px rgba(20,60,110,0.08);
        }
        .d09-05-01-badge svg{ color:#1a7a4c; flex-shrink:0; }
        .d09-05-01-text{ display:flex; flex-direction:column; gap:2px; }
        .d09-05-01-text strong{ font-size:14px; color:#173a5e; letter-spacing:.02em; }
        .d09-05-01-text span{ font-size:11.5px; color:#6b8299; }

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