Как выбрать мини-экскаватор для своих работ
Какие размеры и рабочие параметры проверить для траншей, благоустройства и тесной площадки. Что включить в запрос продавцу.
Читать материалЕдиные элементы интерфейса: цвета, типографика, поля, кнопки и иконки.
Компоненты используют общие CSS-переменные.
Основной текст
--color-textБрендовый акцент
--color-accentОсновные действия
--color-accent-strongПоверхность панели
--color-surfaceДополнительный текст
--color-mutedГраница
--color-borderОсновное действие выделено цветом. Вторая кнопка поддерживает его. Кнопки в примерах показывают внешний вид; каталог открывается по ссылке.
Основное действие
Открыть каталогВторичное действие
Ненавязчивое действие
Компактный размер
Недоступное действие
Кнопка с иконкой
У каждого поля есть видимая подпись. Состояния ошибки и недоступности не зависят только от цвета. Список поддерживает поиск и клавиатуру.
Текстовое поле
Поиск
Выбор из списка
Недоступное поле
Сообщение об ошибке
Чекбокс
Заголовок карточки
Основной текст
Выберите поставщиков одного класса техники и сравните условия.
Пояснение
Источник и дата приводятся рядом со сведениями.
Метки
SVG находятся в проекте и загружаются с этого сайта. Иконка дополняет подпись; у кнопки без текста есть доступное имя.
search
chevron-down
check
x
plus
arrow-right
arrow-up-right
sliders-horizontal
rotate-ccw
columns-3
map-pin
shield-check
cookie
settings-2
info
building-2
menu
trash-2
book-open
clipboard-check
circle-check
circle-alert
chevron-right
Какие размеры и рабочие параметры проверить для траншей, благоустройства и тесной площадки. Что включить в запрос продавцу.
Читать материалМасса, комплектация, рабочая зона и перевозка: как выбрать группу машин для сравнения и не переплатить за ненужный размер.
Читать материалРеальный компонент каталога с опубликованными сведениями.
sunward-actio.ru
| Элемент | Общий принцип |
|---|---|
| Кнопки и поля | Высота 48 px, единые скругления и состояние фокуса. |
| Иконки | Локальные SVG Lucide, единый размер и толщина линий. |
| Карточки | Одинаковые заголовки, метки, отступы и блок действий. |
| Таблицы | Семантические заголовки и прокрутка внутри контейнера. |