LK · Карточка урока в расписании
Источник: email/lk/lk_lesson_cards_v42.html + lk_lesson_cards_june.html
(mtime 11.05). Контекст: страница расписания внутри ЛК.
Кликабельная вся карточка, hover-лифт. Реальные данные: Workout 01 + Workout 02.
Силовая для избавления от дряблости подмышек и валиков на спине
Дарья Верховенко - Всё тело
- Спина
Антигравитационный пилатес от дряблых рук и складок на спине
Максим Яковлев - Руки
- Спина
- Осанка
Что использовано (токены) и адаптация под каталог
paper-white, радиус rounded-lg (18px), тень shadow-e1 → e2 на hover.
Eyebrow в исходнике — дата «4 мая · понедельник»; для каталожного контекста заменено на тип тренировки («Силовая» / «Пилатес»).
В расписании туда вернётся дата + опциональная пилюля «Бонус».
Заголовок — Source Serif 4, 24px, regular, tracking-tight-2, text-wrap: balance.
Аватар 44px — clay-tint / sage-tint с инициалом в italic-display (заглушка; реальные фото будут из FITSPO_Trainers_Avatars_Reference.md).
Блок параметров — отдельные строки «Оборудование:» и «Сложность:» вместо одной строки через разделитель, так как у Workout 01 оборудование длинное и переносится.
Точки сложности — заполнено clay-base, пусто ink-5.
Фокус-теги (Акцент) — paper-deep + ink-2, rounded-md.
Описание (description) на карточке не выводится — оно для страницы тренировки/тултипа.
Минимальный референс · preview
Источник: design-system/preview/components-workout-card.html.
Компактная версия — постер 16:9 с бейджем длительности, eyebrow «тип · акцент»,
заголовок serif, тренер с уровнем. Фиксированная ширина 300px — кладётся в сетку каталога или карусель.
Реальные данные: Workout 01 + Workout 02.
Силовая для избавления от дряблости подмышек и валиков на спине
Дарья Верховенко · Антигравитационный пилатес от дряблых рук и складок на спине
Максим Яковлев · Что использовано (токены) и адаптация под реальные данные
text-wrap: balance справляется,
но проверь — если уйдёт в 4 строки, нужен line-clamp-3 или сокращение в title.
Описание (description) не выводится — оно длинное, идёт на страницу тренировки.
Флип-карточка · 3D + meta на фронте
Зафиксированные решения: 3D-флип по Y-оси, meta-grid (тип / время / уровень) на фронте, оборот = тонкая полоска + компактный заголовок + полное описание. Кликни по карточке — переворот. Кликни снова — назад.
1 / 7 Силовая для избавления от дряблости подмышек и валиков на спине
Дарья Верховенко Силовая для избавления от дряблости подмышек и валиков на спине
Тренировка помогает подтянуть зону подмышек и спину — без жёсткой силовой нагрузки. Уйдет отёчность, разгладятся «валики», спина выпрямится, а руки и мышцы станут более упругими — без ощущения «забитости». Подойдёт как лёгкая самостоятельная практика или как подготовка к более активным тренировкам.
2 / 7 Антигравитационный пилатес от дряблых рук и складок на спине
Максим Яковлев Антигравитационный пилатес от дряблых рук и складок на спине
Тренировка поможет зоне под лопатками подтянуться, а рукам выглядеть «собранными», но лёгкими. За счёт активации глубоких мышц и стабилизации лопаток улучшится осанка и уйдёт напряжение из шеи и плеч. Движения станут свободными, а тело — более собранным к центру.
Финальные параметры (запомнено в память проекта)
rotateY(180deg), 500 мс, cubic-bezier(0.22, 1, 0.36, 1).
Фронт: image h-40 (160px) с пилюлей-номером в левом-верхнем углу («1 / 7» или «Бонус»), eyebrow «зоны акцента» 11px UPPERCASE, заголовок Source Serif 4 22px с
line-clamp-3 (длиннее 3 строк уходит в многоточие), тренер 24px avatar + name, разделитель border-line-base, meta-grid 3 кол прижата к низу через mt-auto: ТИП / ВРЕМЯ / УРОВЕНЬ-точки.
Оборот: stripe h-2 с тем же градиентом, eyebrow «ТИП · ВРЕМЯ», заголовок 17px, описание 13px
ink-2, hint «↩ нажми чтобы закрыть» внизу.
A11y:
tabindex="0", role="button", aria-expanded, поддержка Enter/Space.
Если две карточки выше выглядят как нужно — собираю карусель из 7 карточек на нативном scroll-snap-x mandatory, точки-индикатор внизу, стрелки «‹ ›» опционально. Для оставшихся 5 тренировок нужны данные — то же поле, что у Workout 01/02 (title, description, trainer, duration, type, equipment, accent, difficulty).