カード

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

プレビュー

衛星

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

インポート

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

使用方法

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

MDX

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

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

Markdoc

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

プレビュー

これをチェック

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

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

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

MDX

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

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

Markdoc

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

プレビュー

恒星

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

カードをグループ化する

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

<Card> プロパティ

実装: Card.astro

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

title

必須
型: string

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

icon

型: string

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