Компонент · рівень 3

Блок контактів

Тіло вузла 8.3. Єдина сторінка родини, у якої немає колонки прози взагалі: замість неї аркуш із двох колонок коротких відповідей і форма.

рівень 3design/system/components/contacts-block.css92 рядки13 селекторів1 сірий екран0 кольорових поки що

Анатомія

📞Телефон+380 ** *** 45 67Пн-Пт 9:00-18:00

✉️Поштаhello@stack.uaВідповідаємо протягом дня

💬

МесенджериТой самий номер

TelegramViberWhatsApp

карта

Коли вживати

Тільки на вузлі 8.3. Це оголошений варіант шаблону A, а не блок, який можна поставити будь-де
Оболонка форми - це .info-card з info-page.css: та сама волосина, радіус і паддинг, зміряні до того, як по них потяглись
Поля - системні .fld + .field

Обмеження

Єдине місце родини, що НЕ бере міру читання. Решта тіл обмежені --container-text, бо це проза; тут дві колонки коротких відповідей, і обмеження лишило б другу колонку висіти
.cnt-msg - не чип. design/kit/chip.html оголошує чип фільтром або сегментом: це те, що натискають, щоб звузити список. Назва месенджера ні те, ні інше, і в розмітці це span, а не контрол
Гліф лишається гліфом. uivChrome() навмисно не заходить у прозу <main>, а UIV_EMOJI має рядок лише для 8 із 21 знака цих шести сторінок - вісім лінійних іконок поруч із тринадцятьма кольоровими емодзі в одному списку читаються гірше за будь-який чистий варіант

Стани

Власних станів немає. Усе, що відповідає курсору й клавіатурі, належить полю, кнопці й посиланню
РУХ: свого немає - див. вище

Холостий контроль

Сторінка звіряє себе з файлом: 9 власних класів.

Токени

Прочитані з contacts-block.css: 7 семантичних ролей і 12 примітивів. Список виводить node tools/roles.mjs contacts-block з самого файла, тож він не може розійтися з ним.

Семантичні ролі (7)	Примітиви (12)
`--bg-media` `--bg-page` `--line-hair` `--line-media` `--text-onmedia` `--text-primary` `--text-secondary`	`--fs-12` `--fs-16` `--fw-bold` `--lh-airy` `--radius-12` `--radius-4` `--size-20` `--space-12` `--space-16` `--space-2` `--space-4` `--space-8`