卡片

Card 组件用于将内容划分为语义块。本质上，它是一个用于对内容进行分组的容器，可以选择将其折叠。

§用法

该组件有四种类型。

§有主题

带有主题的卡片可以更改背景或笔触颜色。通常用于描述封禁的错误/成功或用户警告。此卡片最常用于组合其默认颜色（普通）的内容。主题参数指定卡片的主题，而 View 参数则决定卡片是被描边还是填充。

对于这种类型的卡片（容器），您可以选择以下选项：

查看：概述/已填充

主题：正常、信息、成功、警告、危险（彩色）

• 正常-带有划线的牌的基本状态，在大多数情况下使用。
• 信息 — 用于向用户提供信息
• 成功 — 用于表示具有积极结果的事件。
• 警告-用于显示警告
• Danger 是一个旨在吸引用户最多注意力的容器；它可能由数据丢失、服务中断等触发。

§可选卡

该类别的卡片要求您从可用选项中进行选择。该卡有三种状态：正常、选中和悬停。

对于这种类型的卡牌，您可以选择以下选项（类型 = 选择）：

已选择 ：对/错

禁用 ：对/错

§筹集了

用于对内容进行分组，类似于 “含主题” 组 中的 “ 普通”。主要区别在于这种卡牌类型有影子。我们建议在需要突出显示卡片的情况下使用它。例如，使用小部件：

记得在这些卡片之间留出足够的空间，这样阴影就不会落在旁边的卡片上。

在 L 尺寸中，卡片有更加 “通风的阴影”，因此在使用这种尺寸时，建议选择比 M 尺寸稍大的卡片之间的间距。

类型 ：容器；

观点 ：抬起

§用行动筹集

与之前的卡片类似，但需要点击卡片。与 Ra ise ed 卡牌不同，存在悬停状态，但没有 “选中选项” 状态，就像在 “可选卡牌” 中一样。当您需要为用户提供包含详细描述的选择选项时，我们建议您使用它。

请记住，点击它会将用户重定向到嵌套页面。因此，用户应该预料到这种卡行为。（从卡片的设计中应该清晰可见）

对于这种类型的卡牌（类型 = 动作），您可以选择以下选项：

禁用 ：对/错

§大小

尺寸 M 和 L，以带阴影的卡片为例（凸起）

有两种尺寸可供选择：M 和 L。圆角半径取决于大小：L 半径 (8px) 和 2XL 半径 (16px)。大小的选择取决于页面控件的位置、边距和大小。例如，如果页面对输入、按钮和其他元素使用大小 L，则卡片的大小也应为 L。

组件的宽度和高度由其内容决定。可以从内容中稍微填充一下来选择最小尺寸。最大大小可以等于页面宽度的 100%。

§用例

信用卡使用示例：

1-带有填充内容的主题以通知用户，

2-带有轮廓的卡片，用于对内容进行分组