Перейти к содержимому

Карточки-ссылки

Для создания карточек-ссылок на разные страницы используйте компонент <LinkCard>.

Превью

Импорт

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

Использование

Отображайте карточку-ссылку с помощью компонента <LinkCard>. Каждый компонент <LinkCard> требует использования атрибутов title и href.

import { LinkCard } from '@astrojs/starlight/components';
<LinkCard
title="Создание контента в Markdown"
href="/ru/guides/authoring-content/"
/>

Добавление описания ссылки

Добавьте краткое описание к карточке-ссылке с помощью атрибута description.

import { LinkCard } from '@astrojs/starlight/components';
<LinkCard
title="Интернационализация"
href="/ru/guides/i18n/"
description="Настройте Starlight для поддержки нескольких языков."
/>
Превью

Группировка карточек-ссылок

Отображайте несколько карточек-ссылок рядом друг с другом при наличии свободного места, группируя их с помощью компонента <CardGrid>. См. пример в статье Группировка карточек.

Параметры <LinkCard>

Реализация: LinkCard.astro

Компонент <LinkCard> принимает следующие параметры, а также все остальные атрибуты элементов <a>:

title

обязательный
тип: string

Заголовок карточки-ссылки.

href

обязательный
тип: string

URL-адрес, на который нужно ссылаться при взаимодействии с карточкой.

description

тип: string

Необязательное описание для отображения под заголовком.