パーツ番号 06-06-07 ・ CSSのみ

背景色ブロック型プロフィールカード

カード全体を単色ブロックで塗った形式。他のカードと組み合わせて色分けするチーム一覧に向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="avatar">松</div>
          <h4 class="name">松本 健</h4>
          <p class="role">セールスマネージャー</p>
        </div>

CSS

.d06-06-07 .card{width:100%;max-width:220px;padding:22px 16px;border-radius:12px;background:#eef2ff;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;}
        .d06-06-07 .avatar{width:56px;height:56px;border-radius:50%;background:#4338ca;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;font-family:sans-serif;}
        .d06-06-07 .name{margin:0;font-size:14px;font-weight:700;color:#312e81;font-family:sans-serif;}
        .d06-06-07 .role{margin:0;font-size:11px;color:#4f46e5;font-family:sans-serif;}

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