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

アイコンリスト型料金カード

機能項目それぞれに小さな絵文字アイコンを添えた料金カードの見本です。特徴を視覚的に伝えたいプラン紹介に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-08-12-card">
          <p class="d05-08-12-name">グロースプラン</p>
          <p class="d05-08-12-price">¥3,980<span>/月</span></p>
          <ul class="d05-08-12-feat">
            <li><span class="d05-08-12-ic">&#128230;</span>無制限プロジェクト</li>
            <li><span class="d05-08-12-ic">&#128101;</span>チーム10名まで</li>
            <li><span class="d05-08-12-ic">&#128274;</span>SSL標準対応</li>
          </ul>
        </div>

CSS

.d05-08-12-card{width:100%;max-width:240px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;padding:18px;text-align:center}
        .d05-08-12-name{font-size:11px;color:#166534;margin:0 0 8px;font-weight:700}
        .d05-08-12-price{font-size:19px;font-weight:800;color:#14532d;margin:0 0 10px}
        .d05-08-12-price span{font-size:9px;font-weight:400;color:#4ade80}
        .d05-08-12-feat{list-style:none;margin:0;padding:0;font-size:10px;color:#166534;line-height:2;text-align:left}
        .d05-08-12-ic{margin-right:6px;font-size:11px}

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