パーツ番号 09-04-02 ・ CSSのみ

四角バッジセット

角丸を付けない四角い形のバッジを複数並べた見本です。カチッとした印象になり、管理画面やカタログ的なページの分類表示に向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-04-02-wrap">
          <span class="d09-04-02-badge d09-04-02-navy">STAFF</span>
          <span class="d09-04-02-badge d09-04-02-gray">DRAFT</span>
          <span class="d09-04-02-badge d09-04-02-teal">FIXED</span>
          <span class="d09-04-02-badge d09-04-02-brown">SOLD</span>
        </div>

CSS

.d09-04-02-wrap{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
        .d09-04-02-badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;padding:6px 13px;color:#fff}
        .d09-04-02-navy{background:#1e3a5f}
        .d09-04-02-gray{background:#4b5563}
        .d09-04-02-teal{background:#0f766e}
        .d09-04-02-brown{background:#7c4a2d}

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