コンテンツにスキップ

リンクカード

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

プレビュー

インポート

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

使用方法

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

import { LinkCard } from '@astrojs/starlight/components';
<LinkCard title="Markdownの作成" href="/ja/guides/authoring-content/" />
プレビュー

リンクの説明を追加する

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

import { LinkCard } from '@astrojs/starlight/components';
<LinkCard
title="国際化"
href="/ja/guides/i18n/"
description="複数の言語をサポートするようにStarlightを設定します。"
/>
プレビュー

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

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

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

<LinkCard> プロパティ

実装: LinkCard.astro

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

title

必須
型: string

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

href

必須
型: string

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

description

型: string

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