パーツ番号 09-15-07 ・ CSSのみ

獲得日付付きトロフィーカード

トロフィーアイコンと獲得日をセットにしたカード型の静止見本です。会員マイページの実績履歴や表彰記録の一覧表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-15-07-card">
          <div class="d09-15-07-icon">
            <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8 21h8M12 17v4M7 4h10v4a5 5 0 01-10 0V4z"/><path d="M7 6H4a2 2 0 002 4M17 6h3a2 2 0 01-2 4"/></svg>
          </div>
          <div class="d09-15-07-info">
            <p class="d09-15-07-title">年間MVP賞</p>
            <p class="d09-15-07-date">獲得日: 2026.03.14</p>
          </div>
        </div>

CSS

.d09-15-07-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:14px 18px;box-shadow:0 1px 3px rgba(0,0,0,.06);width:230px;box-sizing:border-box}
        .d09-15-07-icon{flex:none;width:48px;height:48px;border-radius:50%;background:linear-gradient(145deg,#fbbf24,#c9922a);display:flex;align-items:center;justify-content:center}
        .d09-15-07-title{margin:0 0 4px;font-size:13px;font-weight:800;color:#1e293b}
        .d09-15-07-date{margin:0;font-size:11px;color:#94a3b8}

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