跳转到内容
Starlight

卡片网格

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

预览

星星

天狼星，织女星，参宿四

卫星

木卫一，木卫二，木卫三

导入

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

用法

分组卡片

当有足够大的空间时，可以使用 <CardGrid> 组件对卡片进行分组，并排显示多个 <Card> 组件。

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


<CardGrid>
  <Card title="试试这个" icon="open-book">
    一些你想着重展示的有趣内容。
  </Card>
  <Card title="其他功能" icon="information">
    更多你想分享的信息。
  </Card>
</CardGrid>
预览

试试这个

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

其他功能

更多你想分享的信息。

分组链接卡片

当有足够大的空间时，可以使用 <CardGrid> 组件对链接卡片进行分组，并排显示多个 <LinkCard> 组件。

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


<CardGrid>
  <LinkCard title="Markdown 创作" href="/zh-cn/guides/authoring-content/" />
  <LinkCard title="组件" href="/zh-cn/components/using-components/" />
</CardGrid>
预览
Markdown 创作
组件

交错卡片

通过向 <CardGrid> 组件添加 stagger 属性，使网格的第二列卡片向着垂直方向移动，从而增添视觉趣味。

该属性在主页上非常有用，可用于展示项目的核心功能。

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


<CardGrid stagger>
  <Card title="试试这个" icon="open-book">
    一些你想着重展示的有趣内容。
  </Card>
  <Card title="其他功能" icon="information">
    更多你想分享的信息。
  </Card>
</CardGrid>
预览

试试这个

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

其他功能

更多你想分享的信息。

<CardGrid> 的属性

实现： CardGrid.astro

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

stagger

类型： boolean

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