跳转到内容
Starlight

卡片网格

要将多个 <Card> 或 <LinkCard> 组件包裹在网格中，请使用 <CardGrid> 组件。

预览

恒星

天狼星、织女星、参宿四

卫星

木卫一、木卫二、木卫三

导入

标题为“导入”的部分
import { CardGrid } from '@astrojs/starlight/components';

用法

标题为“用法”的部分

分组卡片

标题为“分组卡片”的部分

通过使用 <CardGrid> 组件将多个 <Card> 组件分组，可以在有足够空间时将它们并排显示。

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


<CardGrid>
  <Card title="Check this out" icon="open-book">
    Interesting content you want to highlight.
  </Card>
  <Card title="Other feature" icon="information">
    More information you want to share.
  </Card>
</CardGrid>
预览

看看这个

你想要突出显示的有趣内容。

其他功能

你想要分享的更多信息。

标题为“分组链接卡片”的部分

通过使用 <CardGrid> 组件将多个 <LinkCard> 组件分组，可以在有足够空间时将它们并排显示。

import { LinkCard, CardGrid } from '@astrojs/starlight/components';


<CardGrid>
  <LinkCard title="Authoring Markdown" href="/guides/authoring-content/" />
  <LinkCard title="Components" href="/components/using-components/" />
</CardGrid>
预览
编写 Markdown
组件

交错卡片

标题为“交错卡片”的部分

通过向 <CardGrid> 组件添加 stagger 属性，可以垂直移动网格的第二列以增加视觉趣味性。

这个属性在你的主页上显示项目关键功能时很有用。

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


<CardGrid stagger>
  <Card title="Check this out" icon="open-book">
    Interesting content you want to highlight.
  </Card>
  <Card title="Other feature" icon="information">
    More information you want to share.
  </Card>
</CardGrid>
预览

看看这个

你想要突出显示的有趣内容。

其他功能

你想要分享的更多信息。

<CardGrid> 属性

标题为“<CardGrid> 属性”的部分

实现： CardGrid.astro

<CardGrid> 组件接受以下属性

stagger

标题为“stagger”的部分

类型： boolean

定义是否在网格中交错卡片。