ak-card 卡片

outline 描边卡片

PREVIEW / CARD/OUTLINEOutline card

任务信息将在此处显示。

SOURCE / HTML

<div class="ak-card ak-card--outline">任务信息将在此处显示。</div>

stripe 条纹卡片

PREVIEW / CARD/STRIPEStripe card

SOURCE / HTML

<div class="ak-card ak-card--stripe"></div>

place 人物放置卡片

增加 tabindex="0" 可以让卡片通过键盘获得焦点，并保持与鼠标按下相同的选中状态。

用于角色选择时，可在原生 button 上使用 ak-card ak-card--place，通过 aria-pressed="true" 持续显示选中效果。未选中的按钮设置 aria-pressed="false"，焦点移动不会改变选择。

PREVIEW / CARD/PLACEOperator card

SOURCE / HTML

<div class="ak-card ak-card--place"></div>
<div class="ak-card ak-card--place" style="--ak-card-place-color: var(--ak-color-yellow)"></div>
<div class="ak-card ak-card--place" tabindex="0" style="--ak-card-place-color: var(--ak-color-advanced)"></div>

卡片底部颜色由 --ak-card-place-color 控制。