Для однородных перечней строк подойдёт CdsList, для сворачиваемых секций — CdsExpandablePanel, а если нужна только подложка без структуры — CdsSurface.

Анатомия

Карточка собирается из готовых блоков. Первая схема — каркас: шапка, разделитель, текст и панель действий. Вторая — устройство шапки CdsCardItem: зоны prepend и append по краям, заголовок и подзаголовок в центре. Каждый блок доступен и как проп, и как слот, и как отдельный компонент.

Storybook

Вариации

Наполнение

Заполнить карточку можно тремя способами: пропсами title, subtitle, text — для типовых случаев; одноимёнными слотами — когда вместо строки нужна своя разметка; компонентами CdsCardItem, CdsCardTitle, CdsCardSubtitle, CdsCardText — когда структуру нужно контролировать полностью. Проп divider добавляет разделитель между шапкой и текстом.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsCard,
  CdsCardDivider,
  CdsCardItem,
  CdsCardSubtitle,
  CdsCardText,
  CdsCardTitle,
  CdsIcon
} from '@central-design-system/components';
</script>

<template>
  <div class="cds-row">
    <div class="cds-col">
      <CdsCard
        title="Заголовок карточки"
        subtitle="Подзаголовок карточки"
        text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!"
        append-icon="add"
        divider
      />
      <div class="flex justify-center my-2">Использование Props</div>
    </div>

    <div class="cds-col">
      <CdsCard divider>
        <template #title>Заголовок карточки</template>
        <template #subtitle>Подзаголовок карточки</template>
        <template #text>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore
          voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde
          voluptatem!
        </template>
        <template #append>
          <CdsIcon icon="add" />
        </template>
      </CdsCard>
      <div class="flex justify-center my-2">Использование Slots</div>
    </div>

    <div class="cds-col">
      <CdsCard>
        <CdsCardItem>
          <CdsCardTitle>Заголовок карточки</CdsCardTitle>
          <CdsCardSubtitle>Подзаголовок карточки</CdsCardSubtitle>
          <template #append>
            <CdsIcon icon="add" />
          </template>
        </CdsCardItem>

        <CdsCardDivider />

        <CdsCardText>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore
          voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde
          voluptatem!
        </CdsCardText>
      </CdsCard>
      <div class="flex justify-center my-2">Использование Компонентов</div>
    </div>
  </div>
</template>

Слот	Описание
title / subtitle / text	Замещают одноимённые пропсы
prepend / append	Контент по краям шапки; замещают *-icon и *-avatar
item	Дополнительный контент шапки под заголовком
default	Произвольный контент карточки
image	Фоновое изображение; замещает image
actions	Панель действий — рендерится внутри CdsCardActions
loader	Свой индикатор загрузки при loading

Шапка

Пропсы prepend-icon и append-icon ставят иконку по краям шапки, prepend-avatar и append-avatar — аватар по ссылке на изображение. По умолчанию зоны prepend и append прижаты к верху шапки; item-align="center" центрирует их относительно заголовка с подзаголовком (у CdsCardItem этот проп называется align).

Sandbox Storybook

<script setup lang="ts">
import { CdsCard } from '@central-design-system/components';
</script>

<template>
  <div class="flex flex-wrap justify-center gap-4">
    <CdsCard
      width="320"
      prepend-avatar="/images/temp/thumbnail.jpg"
      title="Анна Смирнова"
      subtitle="Менеджер проекта"
      append-icon="more-vertical"
      item-align="center"
    />

    <CdsCard
      width="320"
      prepend-icon="file"
      title="Договор поставки"
      subtitle="Обновлён вчера"
      append-icon="download"
      item-align="center"
    />
  </div>
</template>

Внешний вид

Кликабельная карточка — со ссылкой, обработчиком клика, в группе или с пропом link — сама подсвечивает рамку при наведении, отдельно включать ничего не нужно. borderless убирает рамку — для карточек на подложке или внутри других контейнеров.

Sandbox Storybook

<script setup lang="ts">
import { CdsCard } from '@central-design-system/components';
</script>

<template>
  <div class="flex flex-wrap justify-center gap-4">
    <CdsCard width="240" title="Обычная" text="Рамка по умолчанию отделяет карточку от фона." />
    <CdsCard width="240" link title="Кликабельная" text="Наведите курсор — рамка подсветится." />
    <CdsCard width="240" borderless title="Borderless" text="Без рамки — для карточек на подложке." />
  </div>
</template>

Ссылка

Передайте href (или to с маршрутом vue-router) — карточка отрендерится тегом a и станет кликабельной целиком, сохранив внешний вид.

Sandbox Storybook

<script setup lang="ts">
import { CdsCard } from '@central-design-system/components';
</script>

<template>
  <CdsCard
    class="m-auto"
    title="CDS Sandbox"
    subtitle="Перейти на песочницу CDS"
    href="https://magersoft.github.io/cds-sandbox"
    target="_blank"
    append-icon="external-link"
    width="300"
  />
</template>

Изображения

Изображение в верхней части — компонент CdsImage первым элементом карточки. Контент можно наложить поверх, поместив шапку в слот изображения.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsButton,
  CdsCard,
  CdsCardActions,
  CdsCardDivider,
  CdsCardItem,
  CdsCardSubtitle,
  CdsCardText,
  CdsCardTitle,
  CdsImage
} from '@central-design-system/components';
</script>

<template>
  <div class="flex flex-wrap justify-center gap-6">
    <CdsCard width="400">
      <CdsImage src="/images/temp/girl.webp" cover class="items-end" />

      <CdsCardItem>
        <CdsCardTitle>Заголовок карточки</CdsCardTitle>
        <CdsCardSubtitle>Подзаголовок карточки</CdsCardSubtitle>
      </CdsCardItem>

      <CdsCardDivider />

      <CdsCardText>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!
        Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
      </CdsCardText>

      <CdsCardActions class="justify-end">
        <CdsButton>Действие</CdsButton>
      </CdsCardActions>
    </CdsCard>

    <CdsCard width="400">
      <CdsImage src="/images/temp/dark-city.webp" cover class="items-end">
        <CdsCardItem>
          <CdsCardTitle class="text-content-on-dark">Заголовок карточки</CdsCardTitle>
          <CdsCardSubtitle class="text-content-on-dark opacity-80">Подзаголовок карточки</CdsCardSubtitle>
        </CdsCardItem>
      </CdsImage>

      <CdsCardText>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!
        Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
      </CdsCardText>

      <CdsCardActions class="justify-end">
        <CdsButton>Действие</CdsButton>
      </CdsCardActions>
    </CdsCard>
  </div>
</template>

Проп image растягивает изображение фоном всей карточки. Позаботьтесь о контрасте: задайте цвет текста через color и подберите тёмное изображение или градиент.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsCard, CdsCardActions } from '@central-design-system/components';
</script>

<template>
  <CdsCard
    class="m-auto"
    title="Заголовок"
    subtitle="Подзаголовок карточки"
    color="content-on-dark"
    text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!"
    image="/images/temp/dark-city.webp"
    width="400"
  >
    <CdsCardActions class="justify-end">
      <CdsButton variant="solid" color="inverse">Действие</CdsButton>
    </CdsCardActions>
  </CdsCard>
</template>

Группа с выбором

Оберните карточки в CdsCardGroup и задайте каждой value — группа превращается в элемент выбора с v-model, выбранная карточка получает подсвеченную рамку. required запрещает снимать выбор.

Sandbox Storybook

<script setup lang="ts">
import { CdsCard, CdsCardGroup } from '@central-design-system/components';
import { ref } from 'vue';

const selected = ref(1);
const items = [1, 2, 3];
</script>

<template>
  <CdsCardGroup v-model="selected" required class="flex-wrap justify-center gap-4">
    <CdsCard
      v-for="item in items"
      :key="item"
      title="Заголовок карточки"
      subtitle="Подзаголовок карточки"
      text="Используется в качестве элемента, где вся область карточки — это интерактивное состояние."
      :append-icon="selected === item ? 'success-fill' : undefined"
      :value="item"
      width="250"
    />
  </CdsCardGroup>
</template>

Проп multiple включает множественный выбор — в v-model попадает массив значений.

Sandbox Storybook

<script setup lang="ts">
import { CdsCard, CdsCardGroup } from '@central-design-system/components';
import { ref } from 'vue';

const selected = ref([2]);
const items = [1, 2, 3];
</script>

<template>
  <CdsCardGroup v-model="selected" multiple class="flex-wrap justify-center gap-4">
    <CdsCard
      v-for="item in items"
      :key="item"
      title="Заголовок карточки"
      subtitle="Подзаголовок карточки"
      text="Используется в качестве элемента, где вся область карточки — это интерактивное состояние."
      :append-icon="selected.includes(item) ? 'success-fill' : undefined"
      :value="item"
      width="250"
    />
  </CdsCardGroup>
</template>

Рекомендации

Storybook

Сценарии использования

Выбор тарифа

Группа карточек заменяет радио-кнопки, когда каждому варианту нужно место под цену и описание. Иконка check-fill в append-icon дублирует выбор в шапке, а кнопка ниже остаётся заблокированной, пока вариант не выбран.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsCard, CdsCardGroup } from '@central-design-system/components';
import { ref } from 'vue';

const selected = ref<string>();

const plans = [
  { id: 'start', title: 'Старт', price: 'Бесплатно', description: '5 проектов и базовая аналитика.' },
  { id: 'team', title: 'Команда', price: '990 ₽ / мес', description: 'Совместная работа и роли доступа.' },
  {
    id: 'business',
    title: 'Бизнес',
    price: '2 900 ₽ / мес',
    description: 'Без ограничений и с приоритетной поддержкой.'
  }
];
</script>

<template>
  <div class="flex flex-col items-center gap-4">
    <CdsCardGroup v-model="selected" class="flex-wrap justify-center gap-4">
      <CdsCard
        v-for="plan in plans"
        :key="plan.id"
        :value="plan.id"
        :title="plan.title"
        :subtitle="plan.price"
        :text="plan.description"
        :append-icon="selected === plan.id ? 'success-fill' : undefined"
        width="240"
      />
    </CdsCardGroup>

    <CdsButton :disabled="!selected" text="Продолжить" />
  </div>
</template>

Карточки товара

Витрина собирается из готовых блоков: CdsImage с фото, рейтинг из иконок в CdsCardText, теги CdsTag с характеристиками и пара действий в CdsCardActions — основная кнопка «В корзину» и вторичная кнопка-иконка избранного, которая переключает закладку и подкрашивает её утилити-классом. Пропсы loading и disabled показывают полосу загрузки и защищают карточку от повторных кликов на время запроса — нажмите «В корзину».

Sandbox Storybook

<script setup lang="ts">
import {
  CdsButton,
  CdsCard,
  CdsCardActions,
  CdsCardDivider,
  CdsCardItem,
  CdsCardSubtitle,
  CdsCardText,
  CdsCardTitle,
  CdsIcon,
  CdsImage,
  CdsTag
} from '@central-design-system/components';
import { ref } from 'vue';

const loadingId = ref<string | null>(null);

const products = [
  {
    id: 'headphones',
    title: 'Наушники Aura ANC',
    category: 'Аудио',
    image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&w=600&q=80',
    rating: 4.8,
    stars: 5,
    reviews: 214,
    price: '12 990 ₽',
    description: 'Беспроводные наушники с активным шумоподавлением и зарядом на 30 часов.',
    tags: [
      {
        name: 'Хит',
        color: 'green'
      },
      {
        name: 'Доставка завтра',
        color: 'purple'
      }
    ]
  },
  {
    id: 'watch',
    title: 'Часы Meridian 40',
    category: 'Аксессуары',
    image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=600&q=80',
    rating: 4.6,
    stars: 5,
    reviews: 98,
    price: '24 490 ₽',
    description: 'Классический корпус 40 мм, сапфировое стекло и ремешок из натуральной кожи.',
    tags: [
      {
        name: 'Новинка',
        color: 'cyan'
      }
    ]
  },
  {
    id: 'sneakers',
    title: 'Кроссовки Vertex Run',
    category: 'Обувь',
    image: 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=600&q=80',
    rating: 4.9,
    stars: 5,
    reviews: 531,
    price: '8 790 ₽',
    description: 'Лёгкая беговая пара с амортизирующей подошвой для ежедневных тренировок.',
    tags: [
      {
        name: '−20%',
        color: 'green'
      },
      {
        name: 'Остался 42 размер',
        color: 'red'
      }
    ]
  }
];

const addToCart = (id: string) => {
  loadingId.value = id;

  setTimeout(() => (loadingId.value = null), 2000);
};

const favorites = ref<string[]>([]);

const toggleFavorite = (id: string) => {
  favorites.value = favorites.value.includes(id)
    ? favorites.value.filter((item) => item !== id)
    : [...favorites.value, id];
};
</script>

<template>
  <div class="flex flex-wrap justify-center gap-4">
    <CdsCard
      v-for="product in products"
      :key="product.id"
      width="280"
      :loading="loadingId === product.id"
      :disabled="loadingId === product.id"
    >
      <CdsImage :src="product.image" height="200" cover />

      <CdsCardItem>
        <CdsCardTitle>{{ product.title }}</CdsCardTitle>
        <CdsCardSubtitle>{{ product.category }}</CdsCardSubtitle>
      </CdsCardItem>

      <CdsCardText>
        <div class="flex items-center gap-1">
          <CdsIcon
            v-for="star in product.stars"
            :key="star"
            :icon="star <= Math.floor(product.rating) ? 'star-fill' : 'star'"
            size="sm"
            class="text-other-lemon-content"
          />
          <span class="text-sm text-content-secondary">{{ product.rating }} ({{ product.reviews }})</span>
        </div>

        <div class="my-2 text-lg font-bold">{{ product.price }}</div>

        <div>{{ product.description }}</div>
      </CdsCardText>

      <CdsCardDivider />

      <div class="flex flex-wrap gap-1 px-4 pt-2">
        <CdsTag v-for="tag in product.tags" :key="tag.name" :text="tag.name" :color="tag.color" size="sm" />
      </div>

      <CdsCardActions class="gap-2">
        <CdsButton class="flex-1" text="В корзину" @click="addToCart(product.id)" />
        <CdsButton
          variant="soft"
          color="neutral"
          :icon="favorites.includes(product.id) ? 'bookmark-fill' : 'bookmark'"
          :class="{ 'text-other-pink-content': favorites.includes(product.id) }"
          :aria-label="favorites.includes(product.id) ? 'Убрать из избранного' : 'Добавить в избранное'"
          @click="toggleFavorite(product.id)"
        />
      </CdsCardActions>
    </CdsCard>
  </div>
</template>

Раскрывающиеся подробности

Спрячьте второстепенный контент за разворотом: блок с v-if оборачивается в CdsTransitionExpand для плавной анимации. Разворачивать можно чем угодно — иконкой-шевроном или кнопкой в панели действий.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsButton,
  CdsCard,
  CdsCardActions,
  CdsCardDivider,
  CdsCardItem,
  CdsCardSubtitle,
  CdsCardText,
  CdsCardTitle,
  CdsFunctionalButton,
  CdsTransitionExpand
} from '@central-design-system/components';
import { ref } from 'vue';

const expanded = ref(false);
const showFull = ref(false);
</script>

<template>
  <div class="flex flex-col items-center gap-4">
    <CdsCard width="400">
      <CdsCardItem>
        <CdsCardTitle>Расширяемая карточка</CdsCardTitle>
        <CdsCardSubtitle>Просто нажмите на иконку стрелочки</CdsCardSubtitle>
      </CdsCardItem>

      <CdsCardActions class="justify-between">
        <CdsButton variant="soft" color="neutral">Действие</CdsButton>
        <CdsFunctionalButton :icon="expanded ? 'chevron-up' : 'chevron-down'" @click="expanded = !expanded" />
      </CdsCardActions>

      <CdsTransitionExpand>
        <div v-if="expanded">
          <CdsCardDivider />
          <CdsCardText>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore
            voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum
            unde voluptatem!
          </CdsCardText>
        </div>
      </CdsTransitionExpand>
    </CdsCard>

    <CdsCard width="400">
      <CdsCardItem>
        <CdsCardTitle>Расширяемая карточка</CdsCardTitle>
        <CdsCardSubtitle>Просто нажмите на кнопку</CdsCardSubtitle>
      </CdsCardItem>

      <CdsTransitionExpand>
        <div v-if="showFull">
          <CdsCardText>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore
            voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum
            unde voluptatem!
          </CdsCardText>
        </div>
      </CdsTransitionExpand>

      <CdsCardDivider />

      <CdsCardActions class="justify-between">
        <CdsButton variant="soft" color="neutral" @click="showFull = !showFull">
          {{ showFull ? 'Скрыть' : 'Показать' }}
        </CdsButton>
      </CdsCardActions>
    </CdsCard>
  </div>
</template>

Галерея

Карточки вкладываются друг в друга: внешняя — альбом с шапкой и счётчиком, вложенные — плитки фотографий в мозаике на CSS-гриде с фиксированной высотой ряда; col-span / row-span укрупняют отдельные снимки. Режим absolute у CdsImage растягивает фото на всю плитку, borderless убирает рамки, а градиент затемняет последнюю плитку под счётчик оставшихся фото.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsCard,
  CdsCardItem,
  CdsCardSubtitle,
  CdsCardTitle,
  CdsFunctionalButton,
  CdsImage
} from '@central-design-system/components';

const photos = [
  { src: '/images/temp/ny.webp', span: 'col-span-2 row-span-2' },
  { src: '/images/temp/space.webp', span: 'col-span-2' },
  { src: '/images/temp/cat.webp', span: '' },
  { src: '/images/temp/dark-city.webp', span: '' },
  { src: '/images/temp/girl.webp', span: '' },
  { src: '/images/temp/city.webp', span: 'col-span-2' },
  { src: '/images/temp/airbnb.webp', span: '', rest: 18 }
];
</script>

<template>
  <CdsCard width="800" class="m-auto">
    <CdsCardItem align="center">
      <CdsCardTitle>Путешествия</CdsCardTitle>
      <CdsCardSubtitle>25 фото · обновлён вчера</CdsCardSubtitle>
      <template #append>
        <div class="flex gap-1">
          <CdsFunctionalButton icon="upload" aria-label="Загрузить фото" />
          <CdsFunctionalButton icon="more-vertical" aria-label="Действия с альбомом" />
        </div>
      </template>
    </CdsCardItem>

    <div class="grid grid-cols-4 auto-rows-[160px] gap-2 px-4 pb-4">
      <CdsCard
        v-for="photo in photos"
        :key="photo.src"
        link
        borderless
        :class="['flex items-center justify-center', photo.span]"
      >
        <CdsImage
          :src="photo.src"
          absolute
          cover
          :gradient="photo.rest ? 'to bottom, rgba(0,0,0,.55), rgba(0,0,0,.55)' : undefined"
        />
        <span v-if="photo.rest" class="text-2xl font-bold text-content-on-dark">+{{ photo.rest }} фото</span>
      </CdsCard>
    </div>
  </CdsCard>
</template>

API

CdsCard

Пропсы

Имя	Тип	По умолчанию	Описание
activeColor	string | undefined	—	Цвет компонента, когда он находится в активном состоянии
appendAvatar	string | undefined	—	Аватар, отображаемый после (справа от) контента в шапке карточки.
appendIcon	IconValue | undefined	—	Иконка, отображаемая после (справа от) контента в шапке карточки.
baseColor	string | undefined	—	Цвет неактивного компонента
bgColor	string | undefined	—	Цвет фона компонента
borderless	boolean | undefined	—	Убрать границы карточки
color	string | undefined	—	Цвет компонента
content	string | number | undefined	—	Контент, отображаемый в компоненте.
disabled	boolean | null | undefined	null	Заблокированное состояние
divider	boolean | undefined	—	Включить разделить между заголовком и контентом
exact	boolean | undefined	—	Если true, активное состояние будет применяться только при точном совпадении маршрута
height	string | number | undefined	—	Высота компонента
href	string | undefined	—	Атрибут href для ссылки. Если указан, компонент будет вести себя как обычная ссылка
image	string | undefined	—	Путь к фоновому изображению карточки.
itemAlign	"start" | "end" | "center" | undefined	—	Выравнивание зон prepend / append относительно контента шапки. Передаётся в CdsCardItem как align.
link	boolean | undefined	—	Назначает карточке стили и поведение ссылки.
loading	string | boolean | undefined	—	Индикатор загрузки для компонента
location	Anchor | null | undefined	—	Позиционирование элемента относительно его контейнера. Например, "top left", "center", "bottom right" и т.д.
maxHeight	string | number | undefined	—	Максимальная высота компонента
maxWidth	string | number | undefined	—	Максимальная ширина компонента
minHeight	string | number | undefined	—	Минимальная высота компонента
minWidth	string | number | undefined	—	Минимальная ширина компонента
position	"absolute" | "static" | "fixed" | "relative" | "sticky" | undefined	—	CSS-позиционирование компонента — значение свойства position
prependAvatar	string | undefined	—	Аватар, отображаемый перед (слева от) контентом в шапке карточки.
prependIcon	IconValue | undefined	—	Иконка, отображаемая перед (слева от) контентом в шапке карточки.
replace	boolean | undefined	—	Если true, навигация по маршруту будет заменять текущую запись в истории вместо добавления новой
selectedClass	string | undefined	—	CSS класс для выбранного состояния
subtitle	string | number | boolean | undefined	—	Подзаголовок карточки. Отображается в CdsCardItem под заголовком.
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения
text	string | number | undefined	—	Текст, отображаемый в компоненте.
textColor	string | undefined	—	Цвет текста компонента
theme	string | undefined	—	Тема компонента
title	string | number | boolean | undefined	—	Заголовок карточки. Отображается в CdsCardItem над подзаголовком.
to	LinkTo | undefined	—	Маршрут назначения или объект для RouterLink. Если указан, компонент будет вести себя как RouterLink
value	any	—	Значение компонента в группе
width	string | number | undefined	—	Ширина компонента

Слоты

Имя	Тип	Описание
actions	any	Блок действий карточки
append	any	Контент после основного содержимого (на месте append-иконки/аватара)
default	any	Контент по умолчанию внутри карточки
image	any	Фоновое изображение карточки
item	any	Кастомный рендеринг элемента карточки (CdsCardItem)
loader	LoaderSlotProps	Слот для пользовательского загрузчика (отображается, если свойство loading имеет значение true).
prepend	any	Контент перед основным содержимым (на месте prepend-иконки/аватара)
subtitle	any	Контент подзаголовка
text	any	Основной текстовый контент карточки
title	any	Контент заголовка

CdsCardActions

Пропсы

Имя	Тип	По умолчанию	Описание
align	"start" | "end" | "center" | undefined	'start'	Выравнивание кнопок действий по горизонтали
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения

Слоты

Имя	Тип	Описание
default	any	Действия карточки (обычно кнопки)

CdsCardDivider

Пропсы

Имя	Тип	По умолчанию	Описание
color	string | undefined	—	Цвет разделителя.
contentOffset	string | number | (string | number)[] | undefined	—	Увеличивает интервал между элементами контента и строками. Если передается в виде массива, второе значение смещает содержимое слота вниз (или вправо если vertical = true).
gradient	boolean | undefined	—	Добавляет эффект затухания с обеих сторон.
inset	boolean | undefined	—	Добавляет отступ для обычных разделителей и уменьшает максимальную высоту для вертикальных разделителей.
length	string | number | undefined	—	Длина разделителя. Единица измерения по умолчанию — пиксели.
opacity	string | number | undefined	—	Прозрачность разделителя.
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения
theme	string | undefined	—	Тема компонента
thickness	string | number | undefined	—	Толщина разделителя. Единица измерения по умолчанию — пиксели.
variant	"solid" | "dotted" | "dashed" | "double" | undefined	'solid'	Вариант отображения разделителя
vertical	boolean | undefined	—	Отображает разделитель вертикально

Слоты

Имя	Тип	Описание
default	any	Контент разделителя карточки

CdsCardGroup

Пропсы

Имя	Тип	По умолчанию	Описание
direction	"horizontal" | "vertical" | undefined	'horizontal'	Переключение между горизонтальным или вертикальным отображением.
disabled	boolean | null | undefined	null	Заблокированное состояние
mandatory	boolean | "force" | undefined	—	Обязательный выбор хотя бы одного элемента
max	number | undefined	—	Максимальное количество выбираемых элементов
modelValue	any	—	Значение выбранных элементов группы
multiple	boolean | undefined	—	Разрешить множественный выбор
required	boolean | "force" | undefined	—	Обязательный выбор хотя бы одного элемента
selectedClass	string | undefined	'cds-card--selected'	CSS класс для выбранного состояния
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения
theme	string | undefined	—	Тема компонента

Слоты

Имя	Тип	Описание
default	GroupProvide	Карточки группы. В аргументах слота доступно состояние группы (выбор, навигация).

Exposed

Имя	Тип	Описание
isSelected	(id: string) => boolean	Проверить, выбрана ли карточка по id
next	() => void	Выбрать следующую карточку
prev	() => void	Выбрать предыдущую карточку
select	(id: string, value: boolean) => void	Выбрать карточку по id
selected	readonly string[]	Идентификаторы выбранных карточек

CdsCardItem

Пропсы

Имя	Тип	По умолчанию	Описание
align	"start" | "end" | "center" | undefined	—	Выравнивание зон prepend / append относительно контента.
appendAvatar	string | undefined	—	Аватар, отображаемый после (справа от) контента.
appendIcon	IconValue | undefined	—	Иконка, отображаемая после (справа от) контента.
prependAvatar	string | undefined	—	Аватар, отображаемый перед (слева от) контентом.
prependIcon	IconValue | undefined	—	Иконка, отображаемая перед (слева от) контентом.
subtitle	string | number | boolean | undefined	—	Подзаголовок элемента карточки.
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения
title	string | number | boolean | undefined	—	Заголовок элемента карточки.

Слоты

Имя	Тип	Описание
append	any	Контент после основного содержимого (на месте append-иконки/аватара)
default	any	Контент по умолчанию внутри тела элемента карточки
prepend	any	Контент перед основным содержимым (на месте prepend-иконки/аватара)
subtitle	any	Контент подзаголовка
title	any	Контент заголовка

CdsCardSubtitle

Пропсы

Имя	Тип	По умолчанию	Описание
opacity	string | number | undefined	—	Прозрачность текста подзаголовка.
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения

Слоты

Имя	Тип	Описание
default	any	Контент подзаголовка карточки

CdsCardText

Пропсы

Имя	Тип	По умолчанию	Описание
opacity	string | number | undefined	—	Прозрачность текста карточки.
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения

Слоты

Имя	Тип	Описание
default	any	Текстовый контент карточки

CdsCardTitle

Пропсы

Имя	Тип	По умолчанию	Описание
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения

Слоты

Имя	Тип	Описание
default	any	Контент заголовка карточки