Accordion
Figma
Accordion — элемент, с помощью которого можно показать или скрыть контент
Из чего состоит
  1. Левая иконка
  2. Кнопка 2
  3. Кнопка 2
  4. Область тултипа
  5. Текст
  6. Правая иконка
  7. Теги
Основные
Отключаемые
Редактируемые
Основные свойства
Тема (Theme)
Состояние (State)
Стиль (Style)
Вид (View)
Форма (Form)
Отключаемые элементы
👁 Открытый (Opened)
👁 Левая иконка (Left Icon)
Редактируемые элементы
✏️ Заголовок (Title)
✏️ Левая иконка (Left Icon)
✏️ Текст (Text)
Два режима открытия
  • 1 режим: одновременно может быть открыта только одна карточка. 

  • 2 режим: одновременно может быть открыто несколько карточек
Отступы между пунктами аккордеона (вертикальные)
Отступы между пункутами могут быть любые. Задается на проекте.
Расположение аккордеонов
Пункты аккордеона могут располагаться, как друг под другом, так и сбоку в несколько столбцов.
Отступы внутри аккордеона
Отступы внутри аккордеона слева и справа в Виде (View) — “Underline” могут быть либо 24px (по умолчанию), либо 0px
Акцентный цвет
Иконки и кнопка «подробнее» могут быть акцентного цвета со всеми состояниями (default, hover, active)
Если акцентный цвет "Green" или "Yellow", то цвет кнопки «подробнее» по умолчанию вместо “Default” всегда "Active"
Цвет фона
Цвет фона аккордеона можно менять на любой. Он остается одинаковый при наведении или нажатии (hover/active), но на цвет фона накладывается элемент (название в слоях: «Фильтр Hover/Active (Rectangle)».

Цвет фильтра содержит прозрачность и зависит от состояния (hover/active).
При наведение — day-base-dynamic-transparrent-hover. При нажатии — day-base-dynamic-transparrent-active
Цвет обводки
Цвет обводки аккордеона можно менять на любой. Он остается одинаковый при наведении или нажатии (hover/active), но на цвет обводки накладывается элемент (название в слоях: «Фильтр Hover/Active (Rectangle)».

Цвет фильтра содержит прозрачность и зависит от состояния (hover/active).
При наведение — day-base-dynamic-transparrent-hover
При нажатии — day-base-dynamic-transparrent-active

Таким образом, сохраняется оттенок, выбранный для обводки
Размер текста заголовка
Размер текста заголовка может быть любой и настраивается на проекте
Размер текста пункта
Размер текста пункта может быть любой и настраивается на проекте
Кликабельная область
Кликабельная область — вся верхняя область заголовка с иконками