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

年額割引表示付き料金カード

月額表示に加え年払い時の割引率を併記したカード。年間契約への誘導を図りたい料金ページで使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-08-06-card">
          <p class="d05-08-06-name">プロプラン</p>
          <p class="d05-08-06-month">月額 ¥2,000</p>
          <p class="d05-08-06-year">年払いなら<strong>¥19,200</strong>/年</p>
          <span class="d05-08-06-off">20%OFF</span>
        </div>

CSS

.d05-08-06-card{width:100%;max-width:220px;background:#eef2ff;border:1px solid #c7d2fe;border-radius:12px;padding:18px;text-align:center}
        .d05-08-06-name{font-size:11px;color:#4338ca;margin:0 0 8px;font-weight:700}
        .d05-08-06-month{font-size:16px;font-weight:800;color:#1e1b4b;margin:0 0 6px}
        .d05-08-06-year{font-size:9.5px;color:#4f46e5;margin:0 0 8px}
        .d05-08-06-year strong{color:#1e1b4b}
        .d05-08-06-off{display:inline-block;background:#4f46e5;color:#fff;font-size:9px;font-weight:700;padding:3px 10px;border-radius:999px}

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