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

肩書バッジ付きプロフィールカード

役職名をバッジ状に強調表示する形式。経営陣紹介など役職の重要度を視覚的に伝えたい場面に有効です。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="avatar">山</div>
          <h4 class="name">山本 直樹</h4>
          <span class="badge">CTO</span>
        </div>

CSS

.d06-06-05 .card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;}
        .d06-06-05 .avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#1e293b,#475569);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;font-family:sans-serif;}
        .d06-06-05 .name{margin:0;font-size:15px;font-weight:700;color:#1e293b;font-family:sans-serif;}
        .d06-06-05 .badge{padding:3px 12px;border-radius:999px;background:#fef3c7;color:#b45309;font-size:11px;font-weight:700;font-family:sans-serif;}

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