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

在庫ステータス表示

商品の在庫状況を色分けで示すバッジです。ECサイトの商品一覧や商品詳細ページに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-09-07-wrap">
          <span class="d09-09-07-badge d09-09-07-instock">在庫あり</span>
          <span class="d09-09-07-badge d09-09-07-low">残りわずか</span>
          <span class="d09-09-07-badge d09-09-07-out">売り切れ</span>
        </div>

CSS

.d09-09-07-wrap{display:flex;flex-direction:column;gap:10px;align-items:flex-start;font-family:sans-serif}
        .d09-09-07-badge{display:inline-block;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600}
        .d09-09-07-instock{background:#dcfce7;color:#15803d}
        .d09-09-07-low{background:#ffedd5;color:#c2410c}
        .d09-09-07-out{background:#f3f4f6;color:#9ca3af;text-decoration:line-through}

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