パーツ番号 06-13-08 ・ CSSのみ

丸アイコン+名前のミニマルバイライン

アイコンと名前のみで肩書を省いた最小サイズの表記。一覧ページのカード内クレジットに向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="mini">
          <span class="av">酒</span>
          <span class="nm">酒井 大輔</span>
        </div>

CSS

.d06-13-08 .mini{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;background:#f1f5f9;}
        .d06-13-08 .av{width:26px;height:26px;border-radius:50%;background:#334155;color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;font-family:sans-serif;}
        .d06-13-08 .nm{font-size:11.5px;font-weight:700;color:#334155;font-family:sans-serif;}

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