Типографика

4 компонента

Небольшой служебный раздел из четырёх компонентов. Заголовок секции используют многие блоки каталога; счётчик кадров, ячейка значения с подписью для скринридеров и подпись к демо закрывают мелкие задачи оформления.

В готовых сайтах

Посмотрите, как элементы этого раздела работают вместе с другими секциями.

  • Портфолио фотографа

    Сайт портретного и свадебного фотографа: работы с фильтром по жанрам, как проходит съёмка, обо мне, отзывы, цены и запись на звонок. Всё нарисовано от руки на бумажном фоне.

  • Кофейня-пекарня

    Сайт кофейни-пекарни, который живёт по часам печи: шапка с живым «открыто / откроемся через», первый экран с таймером печи и лентой партий, полка с перетаскиванием и остатками, шкала крепости кофе с наполняющимся стаканом, конструктор коробки к утру, scroll-история «36 часов до буханки» с ночью и утром, люди с записками, перфокарта со штампами, bento-галерея, отзывы на чеках, карта с очередью по часам, хлебный будильник и подвал с полосой дня. Светлая тема: молоко, корка и мак, Playfair Display и Caveat.

  • API и dev-tool

    Сайт API геокодирования «Геокод» — красивый терминал: тёмный фон, фосфорный акцент, сетка-точки, моно-шрифт: первый экран, где запрос печатается, а JSON приходит с задержкой «42 ms» и переключается между curl / JS / Python / Go, песочница с точкой на карте, эндпоинты в bento с микродемо, калькулятор цены с логарифмическим ползунком и лестницей, статус-панель регионов со спарклайнами, сравнение с конкурентами с раскрытием, changelog с командами установки и тикающими счётчиками, кто использует, отзывы разработчиков, «ключ за 30 секунд» и подвал с лампочкой. Inter Tight и JetBrains Mono.

Что добавить дальше

Эти секции идут следом в готовых сайтах VibeUI.