コンテンツにスキップ
Starlight
Filters

    リンクカード

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

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

    インポート

    Section titled “インポート”
    import { LinkCard } from '@astrojs/starlight/components';

    使用方法

    Section titled “使用方法”

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

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

    <LinkCard title="Markdownの作成" href="/ja/guides/authoring-content/" />
    プレビュー
    Markdownの作成

    リンクの説明を追加する

    Section titled “リンクの説明を追加する”

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

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

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

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

    Section titled “リンクカードをグループ化する”

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

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

    <LinkCard> プロパティ

    Section titled “<LinkCard> プロパティ”

    実装: LinkCard.astro

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

    title

    Section titled “title”

    必須
    型: string

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

    href

    Section titled “href”

    必須
    型: string

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

    description

    Section titled “description”

    型: string

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