Переиспользуемые блоки: что делает каждый блок, где используется и как его применять

Что делает: Базовая обёртка секции: поверхность, градиент, разделение на две колонки и единый внешний ритм страницы.

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

Что делает: Канонический заголовок секции: короткая метка, заголовок, пояснение и компактное действие.

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

Что делает: Минимальная адаптивная сетка на две или три колонки для поясняющих карточек и блоков возможностей.

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

Что делает: Базовая карточка для материалов и услуг в списке.

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

Что делает: Готовая оболочка для списка материалов: заголовок, действие и поток HorizontalCard.

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

Что делает: Секция с кейсами в виде компактной карточечной сетки и переходом на список кейсов.

Как использовать: Используй, когда кейсы нужны как слой доказательств или быстрый вход в реальные проекты.

Что делает: Стандартная оболочка страниц списков: метка, заголовок, подпись пагинации и список карточек.

Как использовать: Используй на страницах списков и пагинации, чтобы не собирать секцию результатов вручную.

Что делает: Заголовок страниц тегов: название тега, вводный текст, действие назад и чипы.

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

Что делает: Главный переиспользуемый CTA для обзорных и черновых страниц: метка, заголовок, текст, основное и второе действие.

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

Что делает: Канонический финальный блок для детальных страниц: авторский CTA в стандартной обёртке без ручного финального блока на каждом маршруте.

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

Что делает: Общая CTA-секция для контентных, теговых и детальных страниц с поддержкой форматированного текста и двух действий.

Как использовать: Используй в списках, тегах и детальных страницах, когда нужен не авторский CTA, а более спокойный навигационный следующий шаг.

Что делает: Компактный блок доказательств и результатов на две или три карточки поверх базовых блоков.

Как использовать: Используй там, где нужен быстрый слой доказательств без полноценного кейса.

Что делает: Консервативный FAQ на стандартных details/summary без клиентского JS.

Как использовать: Используй для коротких частых вопросов в черновых и сервисных секциях.

Что делает: Первый экран кейса: контекст, заголовок, действия и при необходимости ссылка на исходную статью.

Как использовать: Используй как входной слой детальной страницы кейса, а не как декоративный первый экран.

Что делает: Каноническая смысловая секция внутри кейса: метка, заголовок, вводный текст и свободный слот под содержимое.

Как использовать: Используй для повествовательного слоя кейсов вместо ручной обёртки секции.

Что делает: Малые блоки для метрик, фактов и кратких тезисов внутри кейсовых секций.

Как использовать: Используй, когда кейсу нужно объяснять прогресс, контекст и выводы небольшими атомарными блоками.

Что делает: Завершающий блок с переходом в соседние кейсы и возвратом на общий список кейсов.

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

Что делает: Общий заголовок для статей, блога и базы знаний: h1, лид, метаданные, чипы и опциональный связанный блок.

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