Stepper
Figma
Stepper — элемент, который разделяет текстовую информацию по шагам, этапам или событиям, идущим последовательно
Из чего состоит
  1. Буллит
  2. Линия-разделитель
  3. Заголовок
  4. Подзаголовок
  5. Текстовый блок
Основные
Отключаемые
Редактируемые
Основные свойства
Тема (Theme)
Стиль (Style)
Размер (Size)
Ориентация (Orientation)
Буллит (Bullet)
Форма буллита (Bullet_form)
Расположение (Location)
Позиция контента (Content Position)
Позиция Stepper Content Vertical (Position)
Вид Stepper Content Vertical и Stepper Content Horizontal (View)
Форма Stepper Content Vertical и Stepper Content Horizontal (Form)
Сначала подзаголовок (Subtitle First)
Форма Stepper line (Form)
Ориентация Stepper line (Orientation)
Ширина Stepper line (Width)
Отключаемые элементы
👁 Контент слева (Left Content)
👁 Контент справа (Right Content)
👁 Иконка (Icon)
👁 Шапка (Head)
👁 Заголовок (Title)
👁 Подзаголовок (Subtitle)
👁 Текст (Text)
Редактируемые элементы
✏️ Иконка (Icon SVG)
✏️ Заголовок (Title TXT)
✏️ Подзаголовок (Subtitle TXT)
✏️ Текст (Text TXT)
Сложные степперы
Цвет
1) Для заголовка, подзаголовка, описания, числа внутри буллета применяется ЧБ палитра text&icons
2) Для буллета — вся цветовая палитра отттенков(!) акцентных цветов + ЧБ палитра bg&stroke
3) Для разделителя — вся цветовая палитра оттенков(!) акцентных цветов + ЧБ палитра bg&stroke
4) Для иконки внутри буллета — акцентный цвет
Карточки степпера
1) Для заголовка, подзаголовка, описания, числа внутри буллета применяется ЧБ палитра text&icons
2) Отступ внутри карточки = 16px
3) Толщина обводки карточки настраивается от 0 до 4 px
Отступы внутри карточки степпера
Отступы со всех сторон внутри карточки степпера в виде (View) fill и outline = 16px. В виде transparent отступы отсутствуют
Несколько степперов с карточками
Стиль линии горизонтальной группы степперов
Ширина степпера в горизонтальной группе
  1. Фиксированная
  2. Растягивается под внешний контейнер
Ширина группы степперов больше ширины контейнера
Если группа степперов не помещается по ширине экрана / контейнера, то возможен горизонтальный скролл или перенос степперов на новую строку.