リンクカード
異なるページへのリンクを目立たせて表示するには、<LinkCard>
コンポーネントを使用します。
インポート
使用方法
<LinkCard>
コンポーネントを使用して、リンクを目立たせて表示します。
各<LinkCard>
にはtitle
とhref
属性が必要です。
リンクの説明を追加する
description
属性を使用して、リンクカードに短い説明を追加します。
import { LinkCard } from '@astrojs/starlight/components';
<LinkCard title="国際化" href="/ja/guides/i18n/" description="複数の言語をサポートするようにStarlightを設定します。"/>
{% linkcard title="国際化" href="/ja/guides/i18n/" description="複数の言語をサポートするようにStarlightを設定します。" /%}
国際化 複数の言語をサポートするようにStarlightを設定します。
リンクカードをグループ化する
<CardGrid>
コンポーネントを使用してグループ化することで、十分なスペースがある場合に複数のリンクカードを並べて表示できます。
例については、“リンクカードのグループ化”ガイドを参照してください。
<LinkCard>
プロパティ
実装: LinkCard.astro
<LinkCard>
コンポーネントは、以下のプロパティおよび他のすべての<a>
要素の属性を受け入れます:
title
必須
型: string
表示するリンクカードのタイトル。
href
必須
型: string
カードが操作されたときにリンクするURL。
description
型: string
タイトルの下に表示するオプションの説明。