跳到正文
GitHub

容器

Card

一块有边界的表面,下面没有阴影。

什么时候用它

需要读作“浮起来”的卡片是 plate,它靠反色分离,而不是靠模糊。

示例

variants

Recent deploys

green
Twelve releases in the last thirty days, none rolled back.
Updated 4 minutes ago

The reversed plate

One per screen. It separates by reversal, because this system has no blur to raise it with.

说明

一块有边界的表面。

按法则,没有阴影:这套系统里的深度是一条细线和一次底色变化,绝不是模糊。一张需要读作“浮起来”的卡片应该用 plate,它靠反转来区分。

用带名字的子部件来组合;当一张卡片没有像样的头部和尾部时,直接把内容丢进去也行。

属性

Card props
属性类型默认值说明
variant'outline' | 'plate' | 'flat''outline'`outline` 是页面底色上的一个细线框——默认值,也是一张卡片跟其他卡片并排时的正确选择。`plate` 用那一块反转表面填充,留给“本身就是这一段的重点”的卡片;一屏最多一个。`flat` 完全去掉边框,用于网格本身已经画出了单元格之间分割线的卡片。

同时接受 HTMLAttributes<HTMLDivElement> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。

组成部分

Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.

CardHeader

头部一行——标题在左,动作或标记在右。

这个组件没有自己的属性。

CardTitle

卡片的标题,用书刊衬线体。

默认是 <h3>,这在一个自带 <h2> 的区块里是对的,在几乎其他任何地方都是错的——请传 as,而不是留下一个标题层级会跳级的页面。

这个组件没有自己的属性。

CardBody

内容区。

这个组件没有自己的属性。

CardFooter

一条安静的条带,放元数据或次要动作。

这个组件没有自己的属性。