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

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

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

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

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

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

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

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

mp-card--stack + mp-card--link

Stack со ссылкой

  • веб-сайт

Небольшой скрипт: черновики текстов из ключевых слов, без внешних API.

Stack со ссылкой. Превью на всю ширину, текст снизу. Для внешней ссылки: mp-card--link и mp-card__ext в заголовке (как в блоке опыта).

mp-card--stack без ссылки

Stack без ссылки

  • заметка

Связка баз и rollup для недельного обзора, только для личного пользования.

Stack без ссылки. Тот же вид. Обёртка div или article, без mp-card--link.

mp-card--horizontal + mp-card--link

Horizontal со ссылкой

  • приложение

Локальный таймер с короткими звуками и блокировкой лишних вкладок.

Horizontal со ссылкой. Миниатюра слева, текст справа. На узком экране карточка складывается в столбик.

mp-card--horizontal без ссылки

Horizontal без ссылки

  • шаблон

Статический сайт с расписанием и формой заявки на отдельном сервисе.

Horizontal без ссылки. Тот же расклад, карточка не ведёт на внешний URL.

mp-card--compact + mp-card--link

Compact со ссылкой

  • скрипт

Префиксы, нумерация и dry-run перед записью файлов на диск.

Compact со ссылкой. Только текст, без mp-card__media. В сетке часто с data-mp-cells="1".

mp-card--compact без ссылки

Compact без ссылки

  • документ

Markdown-список проверок перед релизом мелких правок в интерфейсе.

Compact без ссылки. Короткая заметка или чеклист без внешней ссылки.

mp-card--decor

Декоративная ячейка. Заглушка в сетке, без проекта и ссылки. Внутри span.mp-card__decor-pattern.

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

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

Ряд из 6 клеток (широкий экран)

3
3
2
2
2
1
2
3
Цифра в блоке = значение data-mp-cells. Карточка занимает столько клеток подряд в одном ряду.
Ширина списка Клеток в ряду
≥ 1180px 6
≥ 880px 4
≥ 520px 2
уже 1 (вся строка)

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

Живая сетка masonry

Демо блока «Активность» с главной: здесь все типы карточек в одной живой сетке. В подписях у каждой — тип раскладки и data-mp-cells. Меняйте ширину окна и шрифт в панели темы, смотрите, как сетка перестраивается, и переносите удачный порядок на главную.

  1. [2] stack · ссылка

    • веб-сайт

    Базовая пара в ряду из шести клеток.

  2. [2] stack

    • заметка

    Stack без внешней ссылки.

  3. [2] horizontal

    • утилита

    Horizontal на две клетки, без ссылки.

  4. [2] compact

    • шаблон

    Текстовая карточка на две клетки.

  5. [1] compact · ссылка

    • cli

    Узкая колонка со ссылкой.

  6. [1] compact

    • документ

    Compact на одну клетку.

  8. [3] stack · ссылка

    • приложение

    Половина шестиклеточной строки. Длиннее описание, чтобы проверить перенос и высоту после смены шрифта.

  9. [3] horizontal · ссылка

    • плагин

    Широкий horizontal: превью и текст в одной полосе.

  10. [3] horizontal

    • виджет

    Horizontal на три клетки, без ссылки.