通用原则

• 单个卡片内需是相同属性、类型的内容，或针对同一对象的信息聚合

• 同类卡片组合使用时，样式及交互应保持一致

• 多个卡片嵌套不宜过于复杂，建议卡片嵌套不超过两层

• 卡片通常按照栅格的规则进行排列

• 当整个卡片可点击的时候，需给出明确指示

类型

类型	何时使用
常规	作为模块级容器时使用，比如 Dashobard 中的卡片
常规+选项卡	同常规，但需同时展示多个同类信息的场景
盒子	作为页面级容器时使用
盒子 + 选项卡	同盒子，但需同时展示多个同类信息的场景

常规

常规 + 选项卡

在常规类型基础上，搭配「Tab 选项卡」使用，同时展示多个相同类型的信息。

盒子

盒子+选项卡

构成

1. 标题

   1. 不允许折行，不允许省略

   2. 可根据业务需要增加标签

   3. 可搭配选项卡使用：

      1. 常规：使用选项卡时，直接替换标题

      2. 盒子：可搭配选项卡使用，标题不受影响

2. 辅助说明（可选）

   1. 不允许折行，不允许省略，可增加Link

   2. 搭配选项卡使用时，建议取消辅助说明

3. 分隔线

   1. 盒子：根据实际需要选择

   2. 常规：无分隔线

4. 操作区

   1. 常规：最多一个操作项，或使用「...」，点击后查看所有操作项

   2. 盒子：不做特定限制

5. 内容区

   1. 内容不做限定，可以为图表、文字、图形等等

   2. 内容区高度可固定后内部滚动

6. 容器

行为

切换选项卡

选项卡默认选中第一个，点击可切换。

查看全部操作

常规类型中，通常把操作收起在「···」中，点击后唤起菜单。

---

样式

布局

卡片根据栅格进行布局。