Назад в каталог блоков

hero with cards

Платформа: Универсальный. Назначение: блок «hero with cards» из категории «8.2. Первый экран / hero». Стиль блока — visual/showcase: приоритет у медиа, выразительная композиция, контролируемая декоративность и плавные re...

Платформа Универсальный Категория 8.2. Первый экран / hero Код universalnyy__8-2-pervyy-ekran-hero__hero-with-cards__008
hero with cards
Описание

Платформа: Универсальный. Назначение: блок «hero with cards» из категории «8.2. Первый экран / hero». Стиль блока — visual/showcase: приоритет у медиа, выразительная композиция, контролируемая декоративность и плавные reveal-анимации.  Фон блока: фон строится как главный визуальный акцент: допустим чистый цвет, мягкий градиент, крупная картинка или видеофон; допускаются свечения, тонкая рамка, декоративные скосы, маски краев и умеренный параллакс; анимация фона плавная, без рывков и без потери читаемости текста.  Картинки / медиа: 1–2 ключевые картинки или одно главное медиа; положение обычно справа или на фоне; суммарная ширина визуала 42–58% desktop, 100% mobile; форма прямоугольная, мягко скругленная, либо коллаж; поведение — лёгкий hover, reveal по скроллу, на мобильном упрощение до статичного режима.  Заголовок: заголовок крупный, 48–72px desktop / 28–38px mobile, жирный, возможны акцентные слова другим цветом или градиентом; ширина текстового столбца 42–56%; анимация появления ступенчатая, без агрессивного bounce.  Надзаголовок: надзаголовок в виде badge/pill 12–16px, с рамкой или полупрозрачным фоном, может включать иконку слева; располагается над H1 и служит для статуса, выгоды или категории.  Подзаголовок: подзаголовок 18–22px desktop / 15–17px mobile, с ограничением по ширине, спокойным цветом и хорошей читаемостью; допускается анимация fade-up.  Текст: основной текст короткий, не перегруженный, 16–18px, с высоким контрастом; акцентные слова можно выделять полужирным или вторичным цветом.  Ссылки: вспомогательные ссылки 14–16px, рядом с CTA или ниже; возможна стрелка, underline при hover и мягкое смещение иконки.  Кнопки CTA: 1–2 CTA-кнопки: primary и secondary/ghost; высота 44–56px, крупный радиус, текст 15–17px; допустим градиент или чистый цвет; иконка слева или справа; hover — лёгкий подъём, glow или изменение тени.  Поведение / анимация / адаптивность: иконки и бейджи допустимы как элементы доверия; при наличии рейтинга, логотипов клиентов или KPI они располагаются ниже CTA; адаптивность обязательна: на mobile порядок блоков меняется на вертикальный, отступы уменьшаются, видео заменяется постером, второстепенные декоративные элементы отключаются Дополнительно учитывать доступность, контрастность, reduced-motion, hover/focus/active states, lazy-load медиа, производительность и реальный mobile-first сценарий.