Design System · Активность

Карточки активности

Все типы карточек и живая сетка для подбора раскладки на главной

Страница для верстки и контента: здесь те же классы и скрипты, что в секции на главной. Меняйте шрифт и тему в панели справа, сужайте окно — сетка пересчитается. Подписи в заголовках карточек — подсказки, в проде их убрать.

Как пользоваться

Сначала выберите тип (stack, horizontal, compact, decor), затем data-mp-cells (1–4) и порядок li в списке. Карточки с data-mp-extra не влияют на высоту списка до кнопки «Показать все». Подробности — в docs/mini-projects-cards.md.

Типы карточек

Слева пример карточки с текстом, справа название типа и пояснение по классам.

Ширина в клетках

Атрибут data-mp-cells на li.mini-projects-grid__item задаёт желаемую ширину от 1 до 4 клеток. Скрипт не даст карточке быть шире текущего ряда.

Для адаптивной ширины используйте data-mp-cells-sm (при 4 клетках в ряду, ≥ 880 px) и data-mp-cells-xs (при 2 клетках, ≥ 520 px). Скрипт выбирает значение по текущему числу клеток в ряду.

Пример: data-mp-cells="3" data-mp-cells-sm="2" — карточка занимает 3 клетки на широком экране, 2 на среднем, 1 на узком.

123456

≥ 1180 px — 6 клеток

3

3

2

2

2

1

2

3

4

2

1234

≥ 880 px — 4 клетки

3

1

2

2

1

2

2

4

12

≥ 520 px — 2 клетки

1

1

2

2

1

1

Ширина списка	Клеток в ряду
≥ 1180px	6
≥ 880px	4
≥ 520px	2
уже	1 (вся строка)

На шести клетках пара 3 + 3 или тройка 2 + 2 + 2 обычно смотрится ровнее случайного набора. Декор (mp-card--decor) заполняет пустоты в сетке.