# 账号卡

头像（会员有一圈主色环）· 名字 · 计划行 · 一个动作。

```html
<div class="xxd-group__body" style="max-width:380px"><div class="xxd-account"><span class="xxd-avatar" style="--avatar-size:36px">东</span><div class="xxd-account__main"><div class="xxd-account__name">小小东</div><div class="xxd-plan-line">免费版 · 今天还能写入 3 篇</div></div><button class="xxd-btn" data-size="sm">开通会员</button></div>
<div class="xxd-account" style="border-top:1px solid var(--line)"><span class="xxd-avatar" data-member style="--avatar-size:36px">东</span><div class="xxd-account__main"><div class="xxd-account__name">小小东</div><div class="xxd-plan-line" data-tone="warning">会员 · 还剩 3 天到期</div></div><button class="xxd-btn" data-size="sm">续费</button></div></div>
```
- 数字只在有用时出现：会员看不到次数
- 最后一周用警告色