---
id: pattern.page.catalog
status: stable
version: 1.0.0
owner: AI CJM
evidence: https://aicjm.ru/edu/cases/
---

# Catalog page pattern

## Назначение и evidence

Каталог помогает сравнить однотипные сущности и открыть детальную страницу.
Production evidence: `/edu/cases/` даёт каталог кейсов; `/edu/teachers/` расширяет
семейство фильтрами по задаче и роли.

## Композиция

`header → compact hero/title + intro → optional filters/result count → result grid →
empty state или pagination/load-more → contextual CTA → footer`.
Карточки имеют одинаковую анатомию; важный признак занимает одинаковое место.

## Компоненты

Stable registry IDs: `site-header`, `primary-nav`, `filter-bar`, `card`, `people`,
`article-content`, `button`, `site-footer`.
Выбирается ровно одно семейство result card.

## Токены

Exact token IDs: `surface.page`, `surface.card`, `surface.subtle`, `text.primary`,
`text.secondary`, `border.default`, `layout.container-max`, `layout.gutter-desktop`,
`layout.gutter-tablet`, `layout.gutter-mobile`, `component.filter.background`,
`component.filter.text`, `component.filter.active-background`,
`component.filter.active-text`, `component.filter.active-indicator`,
`component.filter.border`, `component.filter.radius`, `component.filter.minimum-height`,
`component.card.background`, `component.card.text`, `component.card.border`,
`component.card.border-width`, `component.card.radius`, `component.card.padding-desktop`,
`component.card.padding-mobile`, `focus.ring`. Raw grid gaps, card borders и active
colors запрещены.

## Адаптивность и доступность

Grid переходит `multi-column → two-column → one-column` по фактическому излому.
Фильтры доступны клавиатурой, сообщают selected семантикой и текстом,
обновление results анонсируется ненавязчиво. Фокус не сбрасывается.

## Контент

Карточка отвечает: кто/что, какая задача, какой проверяемый признак, куда ведёт
ссылка. Фильтр имеет понятную метку; empty state объясняет, как изменить запрос.
Кейсовые цифры, фото и логотипы требуют source.

## Разрешено и запрещено

**Разрешено:** сравнимые карточки, явный selected filter, количество результатов.

**Запрещено:** masonry со случайной иерархией, скрытые filters, цвет как единственный
selected cue, выдуманные badges.

## Acceptance criteria

- result type и card anatomy едины;
- filter URL/state восстанавливаются, empty/loading/error описаны;
- keyboard, screen-reader announcement, 375/768/1024/1440 и content provenance проверены.

## V2 exact composition

Pattern ID: `pattern.page.catalog`. Complete visual reference:
`/brandbook/web/examples/catalog/`.

Required sequence:

1. `section.hero.editorial`
2. `section.catalog.results`
3. `section.case.showcase`
4. `section.proof.strip`
5. `section.method.process`
6. `section.content.related`
7. `section.lead.form`

Shared shell: exactly one stable `site-header` and one stable `site-footer`.
Heading: one H1; accent may wrap one semantic phrase in
`aicjm-headline__accent`. Every following section owns one H2.

## V2 responsive contract

Desktop preserves the declared grid and evidence adjacency. Mobile uses one
semantic reading column, preserves every required section and action, and
permits local horizontal scrolling only for explicit filter/navigation rails.
Page-level horizontal overflow is prohibited.

## V2 state and content contract

Filters expose selected and result status. Forms expose validation, loading,
success and error through the shared lead flow. Empty states explain the query
and a recovery action. Every metric, logo, portrait, case and quotation keeps
its source. Placeholder claims remain visibly `[уточнить]` and never ship as proof.

## V2 acceptance

- one H1, valid H2/H3 hierarchy and named landmarks;
- one primary action per semantic stage;
- all components and sections resolve to stable registry IDs;
- 1440, 1024, 768 and 375 px pass without content loss or page overflow;
- keyboard, focus, reduced motion, links, assets and source labels pass QA.