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

返品/保証ポリシー要約バッジ

「送料無料」「即日発送」など購入前の不安を解消するアイコン付きバッジを列で表示。カート・商品詳細ページに最適。

css

プレビュー

ソースコード

HTML

<ul class="d09-05-10-list">
          <li>
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#2f6f4f" stroke-width="1.8"><path d="M3 9h13l3 4v4H3z"/><circle cx="7" cy="19" r="1.6"/><circle cx="16" cy="19" r="1.6"/></svg>
            送料無料
          </li>
          <li>
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#2f6f4f" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>
            即日発送
          </li>
          <li>
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#2f6f4f" stroke-width="1.8"><path d="M12 3l7 3v6c0 5-3 8-7 9-4-1-7-4-7-9V6z"/></svg>
            全額保証
          </li>
        </ul>

CSS

.d09-05-10-list{ display:flex; gap:10px; list-style:none; margin:0; padding:0; flex-wrap:wrap; justify-content:center; }
        .d09-05-10-list li{
          display:flex; align-items:center; gap:6px;
          font-size:11.5px; font-weight:700; color:#2f6f4f;
          background:#eaf6ef; border:1px solid #cfe8d9; border-radius:20px;
          padding:7px 12px;
        }

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