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

会員ランクバッジ

ゴールド・シルバー・ブロンズのランクを色分けバッジで並べた一覧です。MemberPressの会員レベルをマイページ等で視覚的に示すのに使えます。

membershipcss

プレビュー

ソースコード

HTML

<div class="d10-05-02-list">
          <div class="d10-05-02-badge d10-05-02-gold">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 2l2.6 6.2 6.7.5-5.1 4.4 1.6 6.6L12 16.9 6.2 19.7l1.6-6.6-5.1-4.4 6.7-.5z"/></svg>
            <span>ゴールド会員</span>
          </div>
          <div class="d10-05-02-badge d10-05-02-silver">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 2l2.6 6.2 6.7.5-5.1 4.4 1.6 6.6L12 16.9 6.2 19.7l1.6-6.6-5.1-4.4 6.7-.5z"/></svg>
            <span>シルバー会員</span>
          </div>
          <div class="d10-05-02-badge d10-05-02-bronze">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 2l2.6 6.2 6.7.5-5.1 4.4 1.6 6.6L12 16.9 6.2 19.7l1.6-6.6-5.1-4.4 6.7-.5z"/></svg>
            <span>ブロンズ会員</span>
          </div>
        </div>

CSS

.d10-05-02-list{display:flex;flex-direction:column;gap:12px;width:100%;max-width:240px}
        .d10-05-02-badge{
          display:flex;align-items:center;gap:10px;
          padding:10px 16px;border-radius:10px;
          font-size:13px;font-weight:700;color:#fff;
        }
        .d10-05-02-gold{background:linear-gradient(135deg,#f59e0b,#d97706)}
        .d10-05-02-silver{background:linear-gradient(135deg,#94a3b8,#64748b)}
        .d10-05-02-bronze{background:linear-gradient(135deg,#c2703d,#92400e)}

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