卡片

要在框中显示与 Starlight 样式匹配的内容，请使用 <Card> 组件。

预览

卫星

木卫一，木卫二，木卫三

导入

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

用法

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

MDX

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

<Card title="试试这个">一些你想着重展示的有趣内容。</Card>

Markdoc

{% card title="试试这个" %}
一些你想着重展示的有趣内容。
{% /card %}

预览

试试这个

一些你想着重展示的有趣内容。

为卡片添加图标

要在卡片中包含一个图标，请把 icon 属性设置为 Starlight 的内置图标名称之一。

MDX

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

<Card title="星星" icon="star">
  天狼星，织女星，参宿四
</Card>

Markdoc

{% card title="星星" icon="star" %}
天狼星，织女星，参宿四
{% /card %}

预览

星星

天狼星，织女星，参宿四

分组卡片

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

<Card> 的属性

实现： Card.astro

<Card> 组件接受以下属性：

title

必要属性
类型： string

要显示的卡片标题。

icon

类型： string

将 icon 属性设置为 Starlight 的内置图标名称之一，能够使卡片包含一个图标。