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

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

Превью

Кастомизация Starlight Узнайте, как сделать ваш сайт на Starlight уникальным с помощью пользовательских стилей, шрифтов и многого другого.

Импорт

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

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

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

MDX

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

<LinkCard
  title="Создание контента в Markdown"
  href="/ru/guides/authoring-content/"
/>

Markdoc

{% linkcard title="Создание контента в Markdown" href="/ru/guides/authoring-content/" /%}

Превью

Создание контента в Markdown

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

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

MDX

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

<LinkCard
  title="Интернационализация"
  href="/ru/guides/i18n/"
  description="Настройте Starlight для поддержки нескольких языков."
/>

Markdoc

{% linkcard
   title="Интернационализация"
   href="/ru/guides/i18n/"
   description="Настройте Starlight для поддержки нескольких языков." /%}

Превью

Интернационализация Настройте Starlight для поддержки нескольких языков.

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

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

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

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

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

title

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

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

href

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

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

description

тип: string

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