头像

头像提供 24 / 32 / 40 / 48 / 64px 五档。文字头像使用 cdx-50 背景与 cdx-700 文字，头像组重叠 8px 并以白色描边分隔。

返回组件库
26 · AVATAR · 头像
尺寸阶梯
xs sm md lg xl
文字头像
张
李
王
赵
陈
周
图片头像 + 状态徽标
A
B
C
头像组
张
李
王
+5
上传态（hover 遮罩 / 上传中 / 错误）
张
hover uploading error
方形变体（应用图标）
R
<section id="avatar" class="section">
    <div class="section-title">26 · AVATAR · 头像</div>

    <div class="demo-sub">尺寸阶梯</div>
    <div class="demo-box">
      <div style="display:flex;align-items:center;gap:16px">
        <!-- xs 24px -->
        <div style="width:24px;height:24px;border-radius:50%;background:#F0F7F8;border:1px solid #B0D6DB;display:flex;align-items:center;justify-content:center">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#185058" stroke-width="2" stroke-linecap="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        </div>
        <!-- sm 32px -->
        <div style="width:32px;height:32px;border-radius:50%;background:#F0F7F8;border:1px solid #B0D6DB;display:flex;align-items:center;justify-content:center">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#185058" stroke-width="2" stroke-linecap="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        </div>
        <!-- md 40px -->
        <div style="width:40px;height:40px;border-radius:50%;background:#F0F7F8;border:1px solid #B0D6DB;display:flex;align-items:center;justify-content:center">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#185058" stroke-width="2" stroke-linecap="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        </div>
        <!-- lg 56px -->
        <div style="width:56px;height:56px;border-radius:50%;background:#F0F7F8;border:1px solid #B0D6DB;display:flex;align-items:center;justify-content:center">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#185058" stroke-width="2" stroke-linecap="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        </div>
        <!-- xl 80px -->
        <div style="width:80px;height:80px;border-radius:50%;background:#F0F7F8;border:1px solid #B0D6DB;display:flex;align-items:center;justify-content:center">
          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#185058" stroke-width="2" stroke-linecap="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        </div>
      </div>
      <div style="display:flex;align-items:center;gap:16px;margin-top:8px;font-size:11px;color:#71717A;font-family:ui-monospace,monospace">
        <span style="width:24px;text-align:center">xs</span>
        <span style="width:32px;text-align:center">sm</span>
        <span style="width:40px;text-align:center">md</span>
        <span style="width:56px;text-align:center">lg</span>
        <span style="width:80px;text-align:center">xl</span>
      </div>
    </div>

    <div class="demo-sub">文字头像</div>
    <div class="demo-box">
      <div style="display:flex;align-items:center;gap:12px">
        <div style="width:40px;height:40px;border-radius:50%;background:#185058;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:600">张</div>
        <div style="width:40px;height:40px;border-radius:50%;background:#1D6571;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:600">李</div>
        <div style="width:40px;height:40px;border-radius:50%;background:#2A7F8B;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:600">王</div>
        <div style="width:40px;height:40px;border-radius:50%;background:#4D9CA7;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:600">赵</div>
        <div style="width:40px;height:40px;border-radius:50%;background:#6E582C;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:600">陈</div>
        <div style="width:40px;height:40px;border-radius:50%;background:#52525B;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:600">周</div>
      </div>
    </div>

    <div class="demo-sub">图片头像 + 状态徽标</div>
    <div class="demo-box">
      <div style="display:flex;align-items:center;gap:20px">
        <!-- 图片头像 -->
        <div style="position:relative">
          <div style="width:40px;height:40px;border-radius:50%;background:#E4E4E7;border:1px solid #F4F4F5;overflow:hidden;display:flex;align-items:center;justify-content:center">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
          </div>
          <div style="position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;border-radius:50%;background:#3F8F5C;border:2px solid #fff"></div>
        </div>
        <!-- online -->
        <div style="position:relative">
          <div style="width:40px;height:40px;border-radius:50%;background:#185058;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:600">A</div>
          <div style="position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;border-radius:50%;background:#3F8F5C;border:2px solid #fff"></div>
        </div>
        <!-- offline -->
        <div style="position:relative">
          <div style="width:40px;height:40px;border-radius:50%;background:#2A7F8B;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:600">B</div>
          <div style="position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;border-radius:50%;background:#D4D4D8;border:2px solid #fff"></div>
        </div>
        <!-- busy -->
        <div style="position:relative">
          <div style="width:40px;height:40px;border-radius:50%;background:#4D9CA7;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:600">C</div>
          <div style="position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;border-radius:50%;background:#DC2626;border:2px solid #fff"></div>
        </div>
      </div>
    </div>

    <div class="demo-sub">头像组</div>
    <div class="demo-box">
      <div style="display:flex;align-items:center">
        <div style="width:40px;height:40px;border-radius:50%;background:#185058;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:600;border:2px solid #fff;position:relative;z-index:4">张</div>
        <div style="width:40px;height:40px;border-radius:50%;background:#1D6571;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:600;border:2px solid #fff;margin-left:-8px;position:relative;z-index:3">李</div>
        <div style="width:40px;height:40px;border-radius:50%;background:#2A7F8B;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:600;border:2px solid #fff;margin-left:-8px;position:relative;z-index:2">王</div>
        <div style="width:40px;height:40px;border-radius:50%;background:#F4F4F5;display:flex;align-items:center;justify-content:center;color:#71717A;font-size:12px;font-weight:600;border:2px solid #fff;margin-left:-8px;position:relative;z-index:1">+5</div>
      </div>
    </div>

    <div class="demo-sub">上传态（hover 遮罩 / 上传中 / 错误）</div>
    <div class="demo-box">
      <div style="display:flex;align-items:center;gap:24px">
        <!-- 可编辑 hover 态 -->
        <div style="position:relative;width:56px;height:56px;border-radius:50%;background:#185058;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:600;cursor:pointer">
          张
          <div style="position:absolute;inset:0;border-radius:50%;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
          </div>
        </div>
        <!-- 上传中 -->
        <div style="position:relative;width:56px;height:56px;border-radius:50%;background:#F0F7F8;border:1px solid #B0D6DB;display:flex;align-items:center;justify-content:center">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#185058" stroke-width="2" stroke-linecap="round" style="animation:spin 1s linear infinite"><path d="M21 12a9 9 0 11-6.219-8.56"/></svg>
        </div>
        <!-- 错误态 -->
        <div style="position:relative;width:56px;height:56px;border-radius:50%;background:#F0F7F8;border:2px solid #DC2626;display:flex;align-items:center;justify-content:center">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#DC2626" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6M9 9l6 6"/></svg>
        </div>
      </div>
      <div style="display:flex;gap:24px;margin-top:8px;font-size:11px;color:#71717A;font-family:ui-monospace,monospace">
        <span style="width:56px;text-align:center">hover</span>
        <span style="width:56px;text-align:center">uploading</span>
        <span style="width:56px;text-align:center">error</span>
      </div>
    </div>

    <div class="demo-sub">方形变体（应用图标）</div>
    <div class="demo-box">
      <div style="display:flex;align-items:center;gap:12px">
        <div style="width:40px;height:40px;border-radius:6px;background:#F0F7F8;border:1px solid #B0D6DB;display:flex;align-items:center;justify-content:center">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#185058" stroke-width="2" stroke-linecap="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18M3 9h6"/></svg>
        </div>
        <div style="width:40px;height:40px;border-radius:6px;background:#185058;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:600">R</div>
        <div style="width:40px;height:40px;border-radius:6px;background:#E4E4E7;border:1px solid #F4F4F5;overflow:hidden;display:flex;align-items:center;justify-content:center">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
        </div>
      </div>
    </div>
  </section>

安装

在页面中引入组件样式与 Tailwind 配置即可。组件样式只包含组件本身，不包含站点外壳。

<link rel="stylesheet" href="design-system/assets/design-system.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="design-system/tokens/tailwind.config.js"></script>

使用方式

在 Code 标签页复制完整标记，替换其中的文案与数据即可。颜色、字号、圆角与阴影一律引用 tokens/design-tokens.json 中的 token，不要写入未定义的颜色值。

组件在浅色主题下设计；若页面启用暗色模式，请先用 token 覆盖背景与文字色，再复用组件结构。

设计规范

完整的尺寸、状态与反模式说明见 DESIGN.md。开发完成后请按 §28 检查清单逐项核对。