CoreCard

Живой MDC-рендер и исходник для копирования.

Живой рендер

Так ContentRenderer отрисует этот контент на реальной странице.

Панель-контейнер для группировки контента: текст, изображения, метки. Карточка — композитный контейнер: отступы несут секции, поэтому содержимое оборачивайте в ::core-card-content, а заголовок и описание давайте пропом или слотами #title / #description (маркеры слотов — без отступа). В MDC карточка статична — переход (to) и интерактив подключается в коде. Сетку ряда задаёт обёртка ::div{class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3"} — держит только простые карточки без слот-маркеров, идущие вплотную; карточки со слотами обёртка молча теряет — они рендерятся вертикально.

Базовая карточка и варианты поверхности

Простые карточки в сетке: обёртка-див, карточки идут вплотную (без пустых строк между ними).

Текст карточки с инлайн-меткой: beta.

Мягкая заливка цветом: variant="soft".

Рамка без заливки: variant="outline".

Заголовок и описание слотами, заголовок пропом

Слотовые карточки — вертикально (в div-обёртке парсер теряет маркеры):

Ряд карточек с картинками: заголовок пропом, текст и изображение (обычный markdown-img — ::core-card-image внутри обёрток парсер теряет) в core-card-content.

Команда дизайн-системы d2n.

Коллектив d2n

Фирменный знак: квадратная композиция.

Социальный баннер для ссылок и шаринга.

OG-баннер d2n

Исходник (MDC)

Тот же код текстом — скопируйте в свой контент как есть.

MDC

Панель-контейнер для группировки контента: текст, изображения, метки. Карточка — композитный контейнер: отступы несут секции, поэтому содержимое оборачивайте в `::core-card-content`, а заголовок и описание давайте пропом или слотами `#title` / `#description` (маркеры слотов — без отступа). В MDC карточка статична — переход (`to`) и интерактив подключается в коде. Сетку ряда задаёт обёртка `::div{class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3"}` — держит только простые карточки без слот-маркеров, идущие вплотную; карточки со слотами обёртка молча теряет — они рендерятся вертикально.

### Базовая карточка и варианты поверхности

Простые карточки в сетке: обёртка-див, карточки идут вплотную (без пустых строк между ними).

::div{class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3"}
  ::core-card
    ::core-card-content
    Текст карточки с инлайн-меткой: :core-chip{label="beta"}.
    ::
  ::
  ::core-card{variant="soft" color="primary"}
    ::core-card-content
    Мягкая заливка цветом: `variant="soft"`.
    ::
  ::
  ::core-card{variant="outline" color="success"}
    ::core-card-content
    Рамка без заливки: `variant="outline"`.
    ::
  ::
::

### Заголовок и описание слотами, заголовок пропом

Слотовые карточки — вертикально (в div-обёртке парсер теряет маркеры):

::core-card
#title
Заголовок карточки

#description
Короткое описание под заголовком.

::core-card-content
Основное содержимое с отступами секции.
::
::

Ряд карточек с картинками: заголовок пропом, текст и изображение (обычный markdown-`img` — `::core-card-image` внутри обёрток парсер теряет) в `core-card-content`.

::div{.flex.flex-wrap.gap-2}
  ::core-card{title="Коллектив"}
    ::core-card-content
    Команда дизайн-системы d2n.
  
    ![Коллектив d2n](/images/d2n-team.jpg)
    ::
  ::

  ::core-card{title="Бренд"}
    ::core-card-content
    Фирменный знак: квадратная композиция.
  
    ![Логотип d2n](/images/brand-logo.svg)
    ::
  ::

  ::core-card{title="Баннер"}
    ::core-card-content
    Социальный баннер для ссылок и шаринга.
  
    ![OG-баннер d2n](/images/og-image.png)
    ::
  ::
::