2. 卡片¶

卡片包含一个主题的内容和动作。卡片是一种灵活和可扩展的内容容器，它可以用包括页眉和页脚、标题和图像在内的组件进行格式化。

2.1. 简单卡片¶

Card Title

Card content

2.2. 含有头部和尾部的卡片¶

所有第一次出现三个或三个以上’ ^^^ ‘之前的内容被认为是页眉，所有最后出现三个或三个以上’ +++ '之后的内容被认为是页脚:

Header

Card Title

Card content

Footer

2.3. 带有图片的卡片¶

你也可以添加一个图像作为卡的背景或在卡的顶部/底部, 使用 img-background, img-top, img-bottom 选项:

Title

Text

Header

Title

Content

Footer

Header

Title

Content

Footer

2.4. 可点击的卡片¶

使用link和link-type选项，你可以把整张卡变成一个可点击的链接。试着把鼠标悬停在上面，然后点击下面的卡片:

可点击卡片的链接形式有两种：

一种是外部链接，这种只需要直接在 card 指令下添加 link 选项以及对应的链接即可。
另一种是内部链接，这种需要在 card 指令下添加选项 :link-type: ref 和 link 选项以及对应的目标和交叉引用。

Clickable Card (external)

The entire card can be clicked to navigate to https://example.com.

Clickable Card (internal)

The entire card can be clicked to navigate to the cards-clickable reference target.

2.5. 卡片的对齐¶

你可以使用 text-align 选项来对齐卡片中的文本，以及 auto 对齐卡片的边距 (margin)。

使用 text-align 选项来对齐卡片中的文本
使用 margin 选项来

Align Center

Content

Align Right

Content

Align Left

Content

:::{card} Align Center
:width: 75%
:margin: 0 2 auto auto
:text-align: center

Content
:::

:::{card} Align Right
:width: 50%
:margin: 0 2 auto 0
:text-align: right

Content
:::

:::{card} Align Left
:width: 50%
:margin: 0 2 0 auto
:text-align: left

Content
:::

2.6. 卡片传送带¶

card-carousel指令可用于创建单行固定宽度的可滚动卡片。参数应该是1到12之间的数字，表示要显示的牌的数量。

当滚动一个传送带时，滚动条将从最近的卡片开始:

card 1

content

card 2

Longer

content

card 3

card 4

card 5

card 6

2.7. card 可选项¶

width
The width that the card should take up (in %): auto, 25%, 50%, 75%, 100%.

卡占用的宽度(以%计):自动，25%，50%，75%，100%。
margin
Outer margin of grid. One (all) or four (top bottom left right) values from: 0, 1, 2, 3, 4, 5, auto.

网格的外缘。一个(全部)或四个(上、下、左、右)值:0、1、2、3、4、5、auto。这个选项的值不同于之前的网格的对应四种屏幕的值，这个是对应使用此属性的卡片的周围（上、下、左、右）的距离值。
text-align
Default horizontal text alignment: left, right, center or justify

默认水平文本对齐方式:左、右、中或右对齐
img-background
A URI (relative file path or URL) to an image to be placed below the content.

作为内容背景的图像的URI(相对文件路径或URL)。
img-top
A URI (relative file path or URL) to an image to be placed above the content.

将放置在内容上方的图像的URI(相对文件路径或URL)。header之上
img-bottom
A URI (relative file path or URL) to an image to be placed below the content.

将放置在内容下方的图像的URI(相对文件路径或URL)。footer之下
link
Turn the entire card into a clickable link to an external/internal target.

把整个卡片变成一个可点击的链接到一个外部/内部目标。
link-type
Type of link: url (default), ref, doc, any.

链接类型:url(默认)，ref, doc, any。
shadow
The size of the shadow below the card: none, sm (default), md, lg.

卡片下方的阴影大小:none, sm(默认)，md, lg。
class-card
Additional CSS classes for the card container element.

卡片容器元素的其他CSS类。
class-header
Additional CSS classes for the header element.

用于header元素的其他CSS类。
class-body
Additional CSS classes for the body element.

用于body元素的其他CSS类。
class-title
Additional CSS classes for the title element.

用于title元素的其他CSS类。
class-footer
Additional CSS classes for the footer element.

用于footer元素的其他CSS类。