Карточки

Для отображения контента в блоке со стилями Starlight используя компонент <Card>.

Превью

Луны

Ио, Европа, Ганимед

Импорт

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

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

Отображайте карточки с помощью компонента <Card>, используя атрибут title для добавления заголовка.

MDX

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

<Card title="Зацените это">Интересный контент, который хочется выделить.</Card>

Markdoc

{% card title="Зацените это" %}
Интересный контент, который хочется выделить.
{% /card %}

Превью

Зацените это

Интересный контент, который хочется выделить.

Добавление иконок

Включите иконку в карточку, используя атрибут icon, содержащий имя одной из встроенных иконок Starlight.

MDX

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

<Card title="Звёзды" icon="star">
  Сириус, Вега, Бетельгейзе
</Card>

Markdoc

{% card title="Звёзды" icon="star" %}
Сириус, Вега, Бетельгейзе
{% /card %}

Превью

Звёзды

Сириус, Вега, Бетельгейзе

Группировка карточек

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

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

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

Компонент <Card> принимает следующие параметры:

title

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

Заголовок карточки для отображения.

icon

тип: string

Карточка может содержать атрибут icon, содержащий имя одной из встроенных иконок Starlight.