card-grids.mdx

title	description	sidebar
Карточные сетки	Узнайте, как обернуть несколько карточек в сетку в Starlight.	order 4

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

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

import Preview from '~/components/component-preview.astro';

Сириус, Вега, Бетельгейзе Ио, Европа, Ганимед

Импорт

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>

{% 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>

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

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

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

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

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

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

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

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

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

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

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

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

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

stagger

тип: boolean

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