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

会員特典一覧カード

会員ランクごとの特典を並べて比較できるカードです。料金表とは異なり特典内容の比較に絞った構成で、MemberPressのランク説明ページに向いています。

membershipcss

プレビュー

ソースコード

HTML

<div class="d10-05-08-cards">
          <div class="d10-05-08-card">
            <span class="d10-05-08-rank">シルバー</span>
            <ul>
              <li>基本コンテンツ閲覧</li>
              <li>月1回のニュースレター</li>
            </ul>
          </div>
          <div class="d10-05-08-card d10-05-08-featured">
            <span class="d10-05-08-rank">ゴールド</span>
            <ul>
              <li>全コンテンツ閲覧</li>
              <li>限定動画アクセス</li>
              <li>優先サポート</li>
            </ul>
          </div>
        </div>

CSS

.d10-05-08-cards{display:flex;gap:12px}
        .d10-05-08-card{
          width:130px;border-radius:12px;padding:16px 14px;
          background:#f8fafc;border:1px solid #e2e8f0;
        }
        .d10-05-08-featured{background:#0f172a;border-color:#0f172a}
        .d10-05-08-rank{display:block;font-size:12px;font-weight:800;color:#334155;margin-bottom:10px}
        .d10-05-08-featured .d10-05-08-rank{color:#fbbf24}
        .d10-05-08-card ul{margin:0;padding-left:16px}
        .d10-05-08-card li{font-size:10.5px;color:#475569;line-height:1.7}
        .d10-05-08-featured li{color:#e2e8f0}

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