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

バッジ付き料金カード(人気・お得)

カード上部に「人気No.1」等のバッジを添えて選択を後押しするデザイン。おすすめプランの訴求に効果的です。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-08-05-card">
          <span class="d05-08-05-badge">人気No.1</span>
          <p class="d05-08-05-name">ビジネスプラン</p>
          <p class="d05-08-05-price">¥6,600<span>/月</span></p>
          <p class="d05-08-05-note">最もお得な組み合わせ</p>
        </div>

CSS

.d05-08-05-card{position:relative;width:100%;max-width:220px;background:#fff7ed;border:1px solid #fdba74;border-radius:12px;padding:26px 16px 18px;text-align:center}
        .d05-08-05-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:#ea580c;color:#fff;font-size:9px;font-weight:700;padding:4px 12px;border-radius:999px;white-space:nowrap}
        .d05-08-05-name{font-size:11px;color:#9a3412;margin:0 0 6px}
        .d05-08-05-price{font-size:19px;font-weight:800;color:#7c2d12;margin:0}
        .d05-08-05-price span{font-size:9px;font-weight:400;color:#c2410c}
        .d05-08-05-note{font-size:9px;color:#c2410c;margin:6px 0 0}

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