卡片

卡片包含关于单个主题的内容和操作。卡片是灵活且可扩展的内容容器，可以使用包括标题、页脚、标题和图像等组件进行格式化。

卡片标题

卡片内容

详情请参阅 Material Design 和 Bootstrap 卡片 描述。

语法
:::{card} Card Title

Card content
:::

.. card:: Card Title

    Card content

所有在首次出现三个或更多 ^^^ 之前的内容被视为标题，所有在最后出现三个或更多 +++ 之后的内容被视为页脚：

Header

卡片标题

卡片内容

Footer

语法
:::{card} Card Title
Header
^^^
Card content
+++
Footer
:::

.. card:: Card Title

    Header
    ^^^
    Card content
    +++
    Footer

在网格中使用卡片时（参见 grid-item-card），页脚可以对齐。

Header

卡片标题

卡片内容

Footer

Header

卡片标题

Longer

卡片内容

Footer

卡片图片

您还可以使用 img-background、img-top、img-bottom 选项将图像添加为卡片的背景或卡片的顶部/底部：

your desired alt text
Title

Text

your desired alt text

Header

Title

Content

Footer

Header

Title

Content

Footer

your desired alt text
语法
:::::{grid} 2 3 3 4

::::{grid-item}

:::{card} Title
:img-background: images/particle_background.jpg
:class-card: sd-text-black
:img-alt: my text

Text
:::

::::

::::{grid-item-card} Title
:img-top: images/particle_background.jpg
:img-alt:

Header
^^^
Content
+++
Footer
::::

::::{grid-item-card} Title
:img-bottom: images/particle_background.jpg

Header
^^^
Content
+++
Footer
::::

:::::

.. grid:: 2 3 3 4

    .. grid-item::

        .. card:: Title
            :img-background: images/particle_background.jpg
            :class-card: sd-text-black
            :img-alt: my text

            Text

    .. grid-item-card:: Title
        :img-top: images/particle_background.jpg
        :img-alt:

        Header
        ^^^
        Content
        +++
        Footer

    .. grid-item-card:: Title
        :img-bottom: images/particle_background.jpg

        Header
        ^^^
        Content
        +++
        Footer

可点击的卡片

通过使用 link 和 link-type 选项，您可以将整张卡片转变为可点击的链接。请尝试将鼠标悬停并点击下方的卡片：

可点击的卡片 (外部)

整张卡片均可点击，以跳转至 https://example.com。

example.com
可点击的卡片 (内部)

整张卡片均可点击，以跳转至 cards-clickable 参考目标。

可点击的卡片
语法
(cards-clickable)=

## Clickable cards

Using the `link` and `link-type` options, you can turn an entire card into a clickable link. Try hovering over then clicking on the cards below:

:::{card} Clickable Card (external)
:link: https://example.com

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

:::{card} Clickable Card (external)
:link: https://example.com
:link-alt: example.com

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

:::{card} Clickable Card (internal)
:link: cards-clickable
:link-type: ref

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

:::{card} Clickable Card (internal)
:link: cards-clickable
:link-type: ref
:link-alt: clickable cards

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

.. _cards-clickable:

Clickable cards
...............

Using the ``link`` and ``link-type`` options, you can turn an entire card into a clickable link. Try hovering over then clicking on the cards below:

.. card:: Clickable Card (external)
    :link: https://example.com

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

.. card:: Clickable Card (external)
    :link: https://example.com
    :link-alt: example.com

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

.. card:: Clickable Card (internal)
    :link: cards-clickable
    :link-type: ref

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

.. card:: Clickable Card (internal)
    :link: cards-clickable
    :link-type: ref
    :link-alt: clickable cards

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

上面创建的 外部链接 等效于使用 <https://example.com> （https://example.com），或者如果提供了 link-alt 选项，则等效于 [替代文本](https://example.com) （替代文本）。

小技巧

使用 URL 作为链接文本会使残障人士和搜索引擎更难理解您的网页内容，因此最好通过 link-alt 选项提供链接文本。

上面创建的 内部链接 等效于使用 {ref}`cards-clickable`（可点击的卡片），或者如果提供了 link-alt 选项，则等效于 {ref}`替代文本 <cards-clickable>` （替代文本）。

备注

您无法在可点击的卡片中添加额外的链接，无论是在卡片标题还是卡片正文中。整张卡片将成为一个指向您指定目标的单一链接，这会覆盖卡片内的任何其他链接。

卡片对齐

您可以使用 text-align 选项来对齐卡片中的文本，同时也可以使用 auto 边距来实现卡片的水平对齐。

Align Center

Content

Align Right

Content

Align Left

Content

卡片轮播

可以使用 card-carousel 指令创建一行固定宽度且可滚动的卡片。参数应为 1 到 12 之间的数字，用于指定显示的卡片数量。

当滚动轮播时，滚动会自动对齐到最近一张卡片的起始位置：

card 1

content

card 2

Longer

content

card 3
card 4
card 5
card 6
语法
::::{card-carousel} 2

:::{card} card 1
content
:::
:::{card} card 2
Longer

content
:::
:::{card} card 3
:::
:::{card} card 4
:::
:::{card} card 5
:::
:::{card} card 6
:::
::::

.. card-carousel:: 2

    .. card:: card 1

        content

    .. card:: card 2

        Longer

        content

    .. card:: card 3

    .. card:: card 4

    .. card:: card 5

    .. card:: card 6

card 选项

width

卡片应占据的宽度（以百分比表示）：自动、25%、50%、75%、100%。

margin

网格的外部边距。一个（所有）或四个（上、下、左、右）值：0、1、2、3、4、5、auto。

text-align

默认水平文本对齐：left, right, center 或 justify

img-background

URI（相对文件路径或 URL），指向放置在内容下方的图像。

img-top

URI（相对文件路径或 URL），指向放置在内容上方的图像。

img-bottom

URI（相对文件路径或 URL），指向放置在内容下方的图像。

img-alt

图像的替代文本（供屏幕阅读器使用）。

link

将整张卡片转变为可点击的链接，指向外部或内部目标。

link-type

链接类型：url（默认）、ref、doc、any。

link-alt

链接的替代文本（将被屏幕阅读器使用）。

shadow

卡片下方阴影的大小：none（无阴影），sm （小，默认值），md （中），lg （大）。

class-card

用于卡片容器元素的额外 CSS 类。

class-header

用于 header 元素的额外 CSS 类。

class-body

用于 body 元素的额外CSS类。

class-title

用于 title 元素的额外CSS类。

class-footer

用于页脚元素的额外CSS类。

class-img-top

用于顶部图片（如果存在）的额外CSS类。

class-img-bottom

用于底部图片（如果存在）的额外CSS类。