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

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

Превью

Звёзды

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

Луны

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

Импорт

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

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

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

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

MDX

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

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

Markdoc

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

{% card title="Другая фича" icon="information" %}
Дополнительная информация, которой вы хотите поделиться.
{% /card %}
{% /cardgrid %}

Превью

Зацените это

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

Другая фича

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

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

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

MDX

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

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

Markdoc

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

{% linkcard title="Компоненты" href="/ru/components/using-components/" /%}
{% /cardgrid %}

Превью

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

Компоненты

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

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

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

MDX

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

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

Markdoc

{% cardgrid stagger=true %}
{% card title="Зацените это" icon="open-book" %}
Интересный контент, который вы хотите выделить.
{% /card %}

{% card title="Другая фича" icon="information" %}
Дополнительная информация, которой вы хотите поделиться.
{% /card %}
{% /cardgrid %}

Превью

Зацените это

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

Другая фича

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

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

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

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

stagger

тип: boolean

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