卡片

要在一个匹配 Starlight 样式的盒子中显示内容，请使用 <Card> 组件。

预览

卫星

木卫一、木卫二、木卫三

导入

import { Card } from '@astrojs/starlight/components';

用法

使用 <Card> 组件来显示卡片，并为卡片提供一个 title。

MDX

import { Card } from '@astrojs/starlight/components';

<Card title="Check this out">Interesting content you want to highlight.</Card>

Markdoc

{% card title="Check this out" %}
Interesting content you want to highlight.
{% /card %}

预览

看看这个

你想要高亮显示的有趣内容。

为卡片添加图标

通过将 icon 属性设置为 Starlight 的一个内置图标 的名称，可以在卡片中包含一个图标。

MDX

import { Card } from '@astrojs/starlight/components';

<Card title="Stars" icon="star">
  Sirius, Vega, Betelgeuse
</Card>

Markdoc

{% card title="Stars" icon="star" %}
Sirius, Vega, Betelgeuse
{% /card %}

预览

恒星

天狼星、织女星、参宿四

卡片组

当有足够空间时，通过使用 <CardGrid> 组件将多个卡片分组，可以并排显示它们。请参阅 “卡片组” 指南以获取示例。

<Card> 属性

实现： Card.astro

<Card> 组件接受以下属性

title

必需
类型： string

要显示的卡片标题。

icon

类型： string

卡片可以包含一个 icon 属性，设置为 Starlight 的一个内置图标 的名称。