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

大見出し数字+背景アイコンの統計カード

背景に薄く配した大きなアイコンと数字を組み合わせた統計カードです。レビュー評価などの目立たせたい数値表示に向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-09-06-card">
          <span class="d05-09-06-icon">★</span>
          <span class="d05-09-06-num">4.9</span>
          <span class="d05-09-06-label">平均評価スコア</span>
        </div>

CSS

.d05-09-06{padding:20px}
        .d05-09-06-card{position:relative;width:100%;padding:26px 20px;border-radius:14px;background:#fff7ed;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center}
        .d05-09-06-icon{position:absolute;right:8px;top:4px;font-size:96px;line-height:1;color:#fdba74;opacity:.35}
        .d05-09-06-num{position:relative;font-size:38px;font-weight:800;color:#9a3412}
        .d05-09-06-label{position:relative;margin-top:6px;font-size:12px;color:#c2410c;font-weight:600}

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