コンテンツにスキップ

カード

Starlightのスタイルに合わせてコンテンツをボックス内に表示するには、<Card>コンポーネントを使用します。

プレビュー

衛星

イオ、エウロパ、ガニメデ

インポート

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

使用方法

<Card>コンポーネントを使用してカードを表示し、カードのtitleを提供します。

import { Card } from '@astrojs/starlight/components';
<Card title="これをチェック">強調したい興味深いコンテンツ。</Card>
プレビュー

これをチェック

強調したい興味深いコンテンツ。

カードにアイコンを追加する

Starlightの組み込みアイコンの名前をicon属性に設定して、カードにアイコンを含めることができます。

import { Card } from '@astrojs/starlight/components';
<Card title="恒星" icon="star">
シリウス、ベガ、ベテルギウス
</Card>
プレビュー

恒星

シリウス、ベガ、ベテルギウス

カードをグループ化する

<CardGrid>コンポーネントを使用してグループ化することで、十分なスペースがある場合に複数のカードを並べて表示できます。 例については、“カードのグループ化”ガイドを参照してください。

<Card> プロパティ

実装: Card.astro

<Card>コンポーネントは以下のプロパティを受け入れます:

title

必須
型: string

表示するカードのタイトル。

icon

型: string

カードにはStarlightの組み込みアイコンの名前に設定されたicon属性を含めることができます。