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

Карточные сетки

Чтобы обернуть несколько компонентов <Card> или <LinkCard> в сетку, используйте компонент <CardGrid>.

Превью

Звёзды

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

Луны

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

Импорт

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

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

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

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

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


<CardGrid>
  <Card title="Зацените это" icon="open-book">
    Интересный контент, который вы хотите выделить.
  </Card>
  <Card title="Другая фича" icon="information">
    Дополнительная информация, которой вы хотите поделиться.
  </Card>
</CardGrid>
Превью

Зацените это

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

Другая фича

Дополнительная информация, которой вы хотите поделиться.

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

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

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


<CardGrid>
  <LinkCard
    title="Создание контента в Markdown"
    href="/ru/guides/authoring-content/"
  />
  <LinkCard title="Компоненты" href="/ru/components/using-components/" />
</CardGrid>
Превью
Создание контента в Markdown
Компоненты

Смещение карточек

Сместите второй столбец сетки по вертикали, чтобы добавить визуальный интерес, добавив атрибут stagger к компоненту <CardGrid>.

Этот атрибут полезен на главной странице для отображения ключевых особенностей вашего проекта.

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


<CardGrid stagger>
  <Card title="Зацените это" icon="open-book">
    Интересный контент, который вы хотите выделить.
  </Card>
  <Card title="Другая фича" icon="information">
    Дополнительная информация, которой вы хотите поделиться.
  </Card>
</CardGrid>
Превью

Зацените это

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

Другая фича

Дополнительная информация, которой вы хотите поделиться.

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

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

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

stagger

тип: boolean

Определяет, нужно ли перемешивать карты в сетке или нет.