リンクカード

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

プレビュー

Starlightのカスタマイズ カスタムスタイル、フォントなどを使用して、Starlightサイトを自分のものにする方法を学びます。

インポート

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

使用方法

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

MDX

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

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

Markdoc

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

プレビュー

Markdownの作成

リンクの説明を追加する

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

MDX

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

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

Markdoc

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

プレビュー

国際化 複数の言語をサポートするようにStarlightを設定します。

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

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

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

<LinkCard> プロパティ

実装: LinkCard.astro

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

title

必須
型: string

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

href

必須
型: string

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

description

型: string

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