Контейнеры

Объединяет контент и компоненты для фокусировки внимания пользователя и управления контентом

Типы контейнеров

Простой контейнер

Используется для группировки различных элементов в единый контент.

Простой контейнер

Кликабельный контейнер

Используется в качестве элемента, где вся область контейнера — это интерактивное состояние. Может содержать внутри интерактивные элементы для дополнительного взаимодействия.

Кликабельный контейнер

Выбираемый контейнер

Используется как и простой контейнер, но с возможностью выбора, например при выборе одной или нескольких возможных опций с расширенным описанием.

Выбираемый контейнер

Раскрывающийся контейнер

Используйте для компактного размещения информации. При раскрытии контейнер толкает контент вниз.

Выбираемый контейнер

Кнопку раскрытия можно расположить слева или справа

Выбираемый контейнер 2

Цвет

В CDS есть два типа контейнеров — primary (с белым фоном) и secondary (с серым фоном).

ЭлементСвойствоТокен
Фон (primary)background-color--cds-color-background-container-primary
Фон (secondary)background-color--cds-color-background-container-secondary
Новое мажорное обновление!
Мы активно разрабатываем дизайн систему CDS 3.0 на Vue 3