カード

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

プレビュー

衛星

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

インポート

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

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

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

<Card title="これをチェック">強調したい興味深いコンテンツ。</Card>

{% card title="これをチェック" %}
強調したい興味深いコンテンツ。
{% /card %}

プレビュー

これをチェック

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

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

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

<Card title="恒星" icon="star">
  シリウス、ベガ、ベテルギウス
</Card>

{% card title="恒星" icon="star" %}
シリウス、ベガ、ベテルギウス
{% /card %}

プレビュー

恒星

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

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

実装: Card.astro

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

必須
型: string

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

型: string

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