cards.mdx

title	description	sidebar
カード	Starlightでコンテンツをボックス内に表示するためのカードの使用方法を学びます。	order 2

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

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

import Preview from '~/components/component-preview.astro';

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

インポート

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> プロパティ

実装: Card.astro

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

title

必須
型: string

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

icon

型: string

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