link-cards.mdx

title	description	sidebar
リンクカード	Starlightでリンクを目立つカードとして表示する方法を学びます。	order 3

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

異なるページへのリンクを目立たせて表示するには、<LinkCard>コンポーネントを使用します。

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

インポート

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

使用方法

<LinkCard>コンポーネントを使用して、リンクを目立たせて表示します。 各<LinkCard>にはtitleとhref属性が必要です。

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

<LinkCard title="Markdownの作成" href="/ja/guides/authoring-content/" />

{% linkcard title="Markdownの作成" href="/ja/guides/authoring-content/" /%}

リンクの説明を追加する

description属性を使用して、リンクカードに短い説明を追加します。

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

<LinkCard
	title="国際化"
	href="/ja/guides/i18n/"
	description="複数の言語をサポートするようにStarlightを設定します。"
/>

{% linkcard
   title="国際化"
	 href="/ja/guides/i18n/"
	 description="複数の言語をサポートするようにStarlightを設定します。" /%}

リンクカードをグループ化する

<CardGrid>コンポーネントを使用してグループ化することで、十分なスペースがある場合に複数のリンクカードを並べて表示できます。

例については、"リンクカードのグループ化"ガイドを参照してください。

<LinkCard> プロパティ

実装: LinkCard.astro

<LinkCard>コンポーネントは、以下のプロパティおよび他のすべての<a>要素の属性を受け入れます：

title

必須
型: string

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

href

必須
型: string

カードが操作されたときにリンクするURL。

description

型: string

タイトルの下に表示するオプションの説明。