schema: ai-cjm-section-contract/v2
id: section.case.showcase
version: 2.0.0
status: stable
owner: AI CJM Design
title: Case showcase
purpose: Показывает отобранные кейсы с фильтром, доказательствами и переходом в полную историю.
use_when:
- Страница требует секцию Case showcase как самостоятельный смысловой этап.
composition:
- order: 1
  component: section-heading
  required: true
- order: 2
  component: filter-bar
  required: true
- order: 3
  component: case-card
  required: false
- order: 4
  component: pagination
  required: false
content:
  hierarchy:
  - intro
  - filters
  - cases
  - continuation
  required:
  - Один смысловой результат секции.
  - Проверяемые факты и понятное следующее действие.
  constraints:
  - Секция не дублирует соседний смысловой этап.
  - Все доказательства сохраняют source и locator.
layout:
  desktop: Container grid follows stable layout and spacing tokens.
  mobile: One semantic reading column; optional controls wrap or scroll locally.
  alignment: Text begins on the canonical content axis; evidence may use the adjacent grid track.
responsive:
  reading_order: Heading, context, primary content, evidence, action.
  rules:
  - Preserve the same semantic order from wide to narrow viewports.
  - Collapse grids without hiding required components or evidence.
  - Prevent page-level horizontal overflow; only explicit control rails may scroll locally.
accessibility:
  landmark: Use a named section when the heading is meaningful in the page outline.
  heading: One h2 for the section; nested cards start at h3.
  keyboard: Interactive components retain their native keyboard contracts and focus.ring.
  motion: Reduced motion keeps all content and state visible.
states:
  default: Complete content and evidence.
  loading: Owned by data-driven catalog/form patterns only.
  empty: Explain the result and provide recovery where the section owns a query.
  error: Keep prior valid content and expose a text recovery action.
tokens:
- layout.container-max
- layout.gutter-desktop
- layout.gutter-mobile
- layout.section-space-min
- layout.section-space-max
- surface.page
- text.primary
- text.secondary
- border.default
do:
- Keep one primary message and one primary action per section.
- Use the registered components in the declared order.
dont:
- Do not invent a local header, footer, grid or color theme.
- Do not repeat the same CTA three times inside one section.
visual_example: /brandbook/web/sections/#case-showcase
acceptance:
- Section has one h2 and a valid document outline.
- Desktop and mobile preserve content, evidence and action.
- All component IDs resolve in the stable registry.