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

サイズ違いバッジセット

small・medium・largeの3段階のサイズを並べた見本です。見出しの重要度や文字サイズに合わせてバッジの大きさを調整したい場合に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-04-06-wrap">
          <span class="d09-04-06-badge d09-04-06-sm">Small</span>
          <span class="d09-04-06-badge d09-04-06-md">Medium</span>
          <span class="d09-04-06-badge d09-04-06-lg">Large</span>
        </div>

CSS

.d09-04-06-wrap{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
        .d09-04-06-badge{display:inline-block;font-weight:700;border-radius:999px;color:#fff;background:#0ea5e9}
        .d09-04-06-sm{font-size:11px;padding:3px 10px}
        .d09-04-06-md{font-size:14px;padding:6px 16px}
        .d09-04-06-lg{font-size:17px;padding:9px 22px}

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