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

Что делает: Базовая обёртка секции: surface, gradient, split-layout и единый внешний ритм страницы.

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

Что делает: Канонический heading-pattern: kicker, title, text и compact action slot.

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

Что делает: Минимальная responsive-сетка 2→3 колонки для explanatory cards и feature-блоков.

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

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

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

Что делает: Готовая оболочка для списка материалов: head + action + поток HorizontalCard.

Как использовать: Используй там, где нужен готовый контентный list-shell без ручной сборки header/list/empty state.

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

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

Что делает: Стандартный shell для list pages: kicker + title + pagination label + card list.

Как использовать: Используй на list/pagination страницах, чтобы не собирать result-section руками.

Что делает: Header для tag pages: титул тега, вводный текст, back action и chips.

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

Что делает: Главный reusable CTA для обзорных и preview-страниц: kicker, title, text, primary/secondary action.

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

Что делает: Канонический footer-pattern для detail pages: author CTA в стандартной обёртке без ручного финального блока на каждом маршруте.

Как использовать: Используй, когда article/blog/knowledge/service detail должен заканчиваться единым contact-footer, а не одноразовым хвостом.

Что делает: Shared CTA section для content/tag/detail страниц с поддержкой rich text и двух действий.

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

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

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

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

Как использовать: Используй для коротких частых вопросов в preview/service-like sections.

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

Как использовать: Используй как entry layer для case detail page, а не как декоративный hero.

Что делает: Канонический смысловой section внутри кейса: eyebrow, title, intro и свободный слот под содержимое.

Как использовать: Используй для narrative-слоя case pages вместо ручного section-wrapper.

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

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

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

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

Что делает: Shared header для статей, блога и базы знаний: h1, standfirst, meta line, chips и optional related block.

Как использовать: Используй для text/detail pages вместо отдельного hero на каждый тип материала.