コンテンツにスキップ
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="/ja/guides/authoring-content/" />
  <LinkCard title="コンポーネント" href="/ja/components/using-components/" />
</CardGrid>
プレビュー
Markdownの作成
コンポーネント

カードをずらす

視覚的な興味を加えるために、<CardGrid>コンポーネントにstagger属性を追加してグリッドの2列目を垂直方向にずらします。

この属性は、プロジェクトの主要な機能を表示するホームページで便利です。

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

グリッド内のカードをずらすかどうかを定義します。