Каждый элемент Единая библиотека для Morlix CMS, Account Center, License Center, SEO Center, Theme Factory и будущих продуктов. Мы собираем здесь варианты, состояния и примеры, а затем утверждаем их по одному.
113 HTML-элементов
20 Групп компонентов
22 Типа input
FA Только Font Awesome
MORLIX / 01
Цвета, стекло и токены Опорные значения получены из существующего CSS установщика. Это кандидат на общесистемный стандарт.
01 / 20 Фирменная палитра Deep navy #08102a
Navy #0c1a42
Ice accent #5b92ff
Action #0d6efd
Text #111827
Success #198754
Danger #dc3545
Surface #f4f9ff
Subtle #475569
White #ffffff
Info #174ea6
Warning #9a6700
+ <div class="mx-palette"><div class="mx-color"><span class="swatch" style="background:#08102a"></span><strong>Deep navy</strong><code>#08102a</code></div><div class="mx-color"><span class="swatch" style="background:#0c1a42"></span><strong>Navy</strong><code>#0c1a42</code></div><div class="mx-color"><span class="swatch" style="background:#5b92ff"></span><strong>Ice accent</strong><code>#5b92ff</code></div><div class="mx-color"><span class="swatch" style="background:#0d6efd"></span><strong>Action</strong><code>#0d6efd</code></div><div class="mx-color"><span class="swatch" style="background:#111827"></span><strong>Text</strong><code>#111827</code></div><div class="mx-color"><span class="swatch" style="background:#198754"></span><strong>Success</strong><code>#198754</code></div><div class="mx-color"><span class="swatch" style="background:#dc3545"></span><strong>Danger</strong><code>#dc3545</code></div><div class="mx-color"><span class="swatch" style="background:#f4f9ff"></span><strong>Surface</strong><code>#f4f9ff</code></div><div class="mx-color"><span class="swatch" style="background:#475569"></span><strong>Subtle</strong><code>#475569</code></div><div class="mx-color"><span class="swatch" style="background:#ffffff"></span><strong>White</strong><code>#ffffff</code></div><div class="mx-color"><span class="swatch" style="background:#174ea6"></span><strong>Info</strong><code>#174ea6</code></div><div class="mx-color"><span class="swatch" style="background:#9a6700"></span><strong>Warning</strong><code>#9a6700</code></div></div>Стеклянные поверхности Glass / primary Прозрачность, свет и размытие.
Glass / secondary Вложенный контент.
+ <div class="mx-grid-2"><div class="mx-card mx-card--raised"><h4>Glass / primary</h4><p>Прозрачность, свет и размытие.</p></div><div class="mx-card mx-card--outline"><h4>Glass / secondary</h4><p>Вложенный контент.</p></div></div>Скругления и размеры + <div class="mx-wrap"><span class="mx-badge mx-badge--square">4px</span><span class="mx-badge">999px</span><button class="mx-btn mx-btn--ghost mx-btn--square">Square</button><button class="mx-btn mx-btn--ghost">11px</button><button class="mx-btn mx-btn--ghost mx-btn--pill">Pill</button></div>MORLIX / 02
Типографика Заголовки, основной текст, моноширинные фрагменты, подписи и цитаты.
02 / 20 Заголовки H1–H6 Заголовок H1
Заголовок H2
Заголовок H3
Заголовок H4
Заголовок H5
Заголовок H6
+ <div class="mx-stack" style="gap:5px"><div style="font-size:29px;font-weight:650">Заголовок H1</div><div style="font-size:25px;font-weight:650">Заголовок H2</div><div style="font-size:20px;font-weight:650">Заголовок H3</div><div style="font-size:17px;font-weight:650">Заголовок H4</div><div style="font-size:14px;font-weight:650">Заголовок H5</div><div style="font-size:12px;font-weight:650">Заголовок H6</div></div>Текст и вес Основной увеличенный текст 17px
Стандартный текст интерфейса 14px
Второстепенный текст 12px
Микроподписи 11px
Bold / 700 Emphasis / italic + <div class="mx-stack"><div class="mx-txt-lg">Основной увеличенный текст 17px</div><div>Стандартный текст интерфейса 14px</div><div class="mx-txt-sm">Второстепенный текст 12px</div><div class="mx-txt-xs">Микроподписи 11px</div><strong>Bold / 700</strong><em>Emphasis / italic</em></div>Код и цитаты Клавиши ⌘ + K · --mx-accent Чёткая и последовательная система интерфейсов. const product = "Morlix CMS"; + <div class="mx-stack"><span>Клавиши <kbd>⌘</kbd> + <kbd>K</kbd> · <code>--mx-accent</code></span><blockquote class="mx-quote">Чёткая и последовательная система интерфейсов.</blockquote><pre class="mx-code">const product = "Morlix CMS";</pre></div>MORLIX / 04
Ссылки и переходы Текстовые, подчёркнутые, с иконками и внешние ссылки — отдельные стили.
04 / 20 Стили ссылок + <div class="mx-wrap"><a href="#links" class="mx-link">Основная</a><a href="#links" class="mx-link mx-link--under">Подчёркнутая</a><a href="#links" class="mx-link mx-link--subtle">Второстепенная</a><a href="#links" class="mx-link mx-link--muted">Приглушённая</a><span class="mx-link mx-link--disabled" aria-disabled="true">Недоступная</span></div>Со стрелками и внешние + <div class="mx-wrap"><a href="#links" class="mx-link mx-link-arrow">Читать подробнее <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a><a href="https://morlix.ru/" target="_blank" rel="noopener noreferrer" class="mx-link">morlix.ru <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></a><a href="#links" class="mx-btn mx-btn--secondary">Ссылка-кнопка <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a></div>MORLIX / 05
Иконки Font Awesome Единственный набор UI-иконок: Font Awesome Free 6.7.2 с CDN. Никаких Lucide, Material Icons или встроенных SVG-иконок.
05 / 20 Библиотека иконок fa-house
fa-gear
fa-user
fa-bars
fa-magnifying-glass
fa-folder
fa-file-code
fa-cloud-arrow-up
fa-arrow-right
fa-circle-check
fa-circle-exclamation
fa-triangle-exclamation
fa-bell
fa-chart-line
fa-lock
fa-link
fa-wand-magic-sparkles
fa-globe
fa-database
fa-circle-info
fa-code
fa-chevron-down
fa-chevron-right
fa-plus
fa-trash
fa-pen
fa-copy
fa-eye
fa-eye-slash
fa-check
fa-xmark
fa-download
fa-filter
fa-sliders
fa-shield-halved
fa-right-from-bracket
fa-calendar
fa-envelope
fa-clock
fa-server
fa-mobile-screen
fa-desktop
fa-star
fa-play
fa-tag
fa-list
fa-table
fa-layer-group
fa-arrow-up-right-from-square
fa-rotate
+ <div class="mx-icon-grid"><div class="mx-icon-tile"><i class="fa-solid fa-house" aria-hidden="true"></i><code>fa-house</code></div><div class="mx-icon-tile"><i class="fa-solid fa-gear" aria-hidden="true"></i><code>fa-gear</code></div><div class="mx-icon-tile"><i class="fa-solid fa-user" aria-hidden="true"></i><code>fa-user</code></div><div class="mx-icon-tile"><i class="fa-solid fa-bars" aria-hidden="true"></i><code>fa-bars</code></div><div class="mx-icon-tile"><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i><code>fa-magnifying-glass</code></div><div class="mx-icon-tile"><i class="fa-solid fa-folder" aria-hidden="true"></i><code>fa-folder</code></div><div class="mx-icon-tile"><i class="fa-solid fa-file-code" aria-hidden="true"></i><code>fa-file-code</code></div><div class="mx-icon-tile"><i class="fa-solid fa-cloud-arrow-up" aria-hidden="true"></i><code>fa-cloud-arrow-up</code></div><div class="mx-icon-tile"><i class="fa-solid fa-arrow-right" aria-hidden="true"></i><code>fa-arrow-right</code></div><div class="mx-icon-tile"><i class="fa-solid fa-circle-check" aria-hidden="true"></i><code>fa-circle-check</code></div><div class="mx-icon-tile"><i class="fa-solid fa-circle-exclamation" aria-hidden="true"></i><code>fa-circle-exclamation</code></div><div class="mx-icon-tile"><i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i><code>fa-triangle-exclamation</code></div><div class="mx-icon-tile"><i class="fa-solid fa-bell" aria-hidden="true"></i><code>fa-bell</code></div><div class="mx-icon-tile"><i class="fa-solid fa-chart-line" aria-hidden="true"></i><code>fa-chart-line</code></div><div class="mx-icon-tile"><i class="fa-solid fa-lock" aria-hidden="true"></i><code>fa-lock</code></div><div class="mx-icon-tile"><i class="fa-solid fa-link" aria-hidden="true"></i><code>fa-link</code></div><div class="mx-icon-tile"><i class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i><code>fa-wand-magic-sparkles</code></div><div class="mx-icon-tile"><i class="fa-solid fa-globe" aria-hidden="true"></i><code>fa-globe</code></div><div class="mx-icon-tile"><i class="fa-solid fa-database" aria-hidden="true"></i><code>fa-database</code></div><div class="mx-icon-tile"><i class="fa-solid fa-circle-info" aria-hidden="true"></i><code>fa-circle-info</code></div><div class="mx-icon-tile"><i class="fa-solid fa-code" aria-hidden="true"></i><code>fa-code</code></div><div class="mx-icon-tile"><i class="fa-solid fa-chevron-down" aria-hidden="true"></i><code>fa-chevron-down</code></div><div class="mx-icon-tile"><i class="fa-solid fa-chevron-right" aria-hidden="true"></i><code>fa-chevron-right</code></div><div class="mx-icon-tile"><i class="fa-solid fa-plus" aria-hidden="true"></i><code>fa-plus</code></div><div class="mx-icon-tile"><i class="fa-solid fa-trash" aria-hidden="true"></i><code>fa-trash</code></div><div class="mx-icon-tile"><i class="fa-solid fa-pen" aria-hidden="true"></i><code>fa-pen</code></div><div class="mx-icon-tile"><i class="fa-solid fa-copy" aria-hidden="true"></i><code>fa-copy</code></div><div class="mx-icon-tile"><i class="fa-solid fa-eye" aria-hidden="true"></i><code>fa-eye</code></div><div class="mx-icon-tile"><i class="fa-solid fa-eye-slash" aria-hidden="true"></i><code>fa-eye-slash</code></div><div class="mx-icon-tile"><i class="fa-solid fa-check" aria-hidden="true"></i><code>fa-check</code></div><div class="mx-icon-tile"><i class="fa-solid fa-xmark" aria-hidden="true"></i><code>fa-xmark</code></div><div class="mx-icon-tile"><i class="fa-solid fa-download" aria-hidden="true"></i><code>fa-download</code></div><div class="mx-icon-tile"><i class="fa-solid fa-filter" aria-hidden="true"></i><code>fa-filter</code></div><div class="mx-icon-tile"><i class="fa-solid fa-sliders" aria-hidden="true"></i><code>fa-sliders</code></div><div class="mx-icon-tile"><i class="fa-solid fa-shield-halved" aria-hidden="true"></i><code>fa-shield-halved</code></div><div class="mx-icon-tile"><i class="fa-solid fa-right-from-bracket" aria-hidden="true"></i><code>fa-right-from-bracket</code></div><div class="mx-icon-tile"><i class="fa-solid fa-calendar" aria-hidden="true"></i><code>fa-calendar</code></div><div class="mx-icon-tile"><i class="fa-solid fa-envelope" aria-hidden="true"></i><code>fa-envelope</code></div><div class="mx-icon-tile"><i class="fa-solid fa-clock" aria-hidden="true"></i><code>fa-clock</code></div><div class="mx-icon-tile"><i class="fa-solid fa-server" aria-hidden="true"></i><code>fa-server</code></div><div class="mx-icon-tile"><i class="fa-solid fa-mobile-screen" aria-hidden="true"></i><code>fa-mobile-screen</code></div><div class="mx-icon-tile"><i class="fa-solid fa-desktop" aria-hidden="true"></i><code>fa-desktop</code></div><div class="mx-icon-tile"><i class="fa-solid fa-star" aria-hidden="true"></i><code>fa-star</code></div><div class="mx-icon-tile"><i class="fa-solid fa-play" aria-hidden="true"></i><code>fa-play</code></div><div class="mx-icon-tile"><i class="fa-solid fa-tag" aria-hidden="true"></i><code>fa-tag</code></div><div class="mx-icon-tile"><i class="fa-solid fa-list" aria-hidden="true"></i><code>fa-list</code></div><div class="mx-icon-tile"><i class="fa-solid fa-table" aria-hidden="true"></i><code>fa-table</code></div><div class="mx-icon-tile"><i class="fa-solid fa-layer-group" aria-hidden="true"></i><code>fa-layer-group</code></div><div class="mx-icon-tile"><i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i><code>fa-arrow-up-right-from-square</code></div><div class="mx-icon-tile"><i class="fa-solid fa-rotate" aria-hidden="true"></i><code>fa-rotate</code></div></div>Размеры иконок + <div class="mx-wrap" style="gap:20px"><span style="font-size:12px"><i class="fa-solid fa-star" aria-hidden="true"></i> 12px</span><span style="font-size:16px"><i class="fa-solid fa-star" aria-hidden="true"></i> 16px</span><span style="font-size:24px"><i class="fa-solid fa-star" aria-hidden="true"></i> 24px</span><span style="font-size:32px"><i class="fa-solid fa-star" aria-hidden="true"></i> 32px</span></div>MORLIX / 07
Выпадающие списки и меню Native select, optgroup, кастомное меню действий и многострочный выбор.
07 / 20 Меню действий (JS) + <div class="mx-dropdown"><button class="mx-btn mx-btn--secondary" aria-expanded="false" aria-haspopup="true" data-dropdown>Действия <i class="fa-solid fa-chevron-down" aria-hidden="true"></i></button><div class="mx-dropdown-menu" role="menu"><button role="menuitem" data-toast="Редактировать"><i class="fa-solid fa-pen" aria-hidden="true"></i> Изменить</button><button role="menuitem" data-toast="Копировать"><i class="fa-solid fa-copy" aria-hidden="true"></i> Дублировать</button><hr><button role="menuitem" data-toast="Удаление только демонстрационное"><i class="fa-solid fa-trash" aria-hidden="true"></i> Удалить</button></div></div>Native select + группы Категория CMS SEO Center Theme Factory License Center
+ <label class="mx-label" for="catSelect">Категория</label><select id="catSelect" class="mx-select"><optgroup label="Продукты"><option>CMS</option><option>SEO Center</option></optgroup><optgroup label="Инструменты"><option>Theme Factory</option><option>License Center</option></optgroup></select>Размеры dropdown Малый — 34px Средний — 44px Большой — 54px
+ <div class="mx-stack"><select class="mx-select mx-select--sm" aria-label="Малый select"><option>Малый — 34px</option></select><select class="mx-select" aria-label="Средний select"><option>Средний — 44px</option></select><select class="mx-select mx-select--lg" aria-label="Большой select"><option>Большой — 54px</option></select></div>Множественный выбор Социальные сети (Ctrl/Cmd для нескольких) Telegram VK Bluesky Mastodon
+ <label class="mx-label" for="selectMultiple">Социальные сети (Ctrl/Cmd для нескольких)</label><select class="mx-select" id="selectMultiple" multiple size="4" style="height:auto"><option>Telegram</option><option>VK</option><option>Bluesky</option><option>Mastodon</option></select>MORLIX / 08
Навигация и положение Хлебные крошки, вкладки, сегменты, страницы и поисковый блок.
08 / 20 Хлебные крошки + <nav class="mx-breadcrumb" aria-label="Навигационная цепочка"><a href="#navigation">Главная</a><i class="fa-solid fa-chevron-right" aria-hidden="true"></i><a href="#navigation">Продукты</a><i class="fa-solid fa-chevron-right" aria-hidden="true"></i><span aria-current="page">Настройки</span></nav>Вкладки с содержимым Общие Безопасность Интеграции
Основные параметры выбранного раздела.
+ <div data-tabs><div class="mx-tabs" role="tablist" aria-label="Настройки"><button class="mx-tab" role="tab" aria-selected="true" data-tab="a">Общие</button><button class="mx-tab" role="tab" aria-selected="false" data-tab="b">Безопасность</button><button class="mx-tab" role="tab" aria-selected="false" data-tab="c">Интеграции</button></div><div class="mx-card" style="margin-top:12px" data-tab-panel>Основные параметры выбранного раздела.</div></div>Сегментированный переключатель + <div class="mx-group" data-segments><button class="mx-segment is-active" aria-pressed="true">День</button><button class="mx-segment" aria-pressed="false">Неделя</button><button class="mx-segment" aria-pressed="false">Месяц</button></div>Пагинация
+ <nav class="mx-pagination" aria-label="Пример пагинации"><button aria-label="Предыдущая страница" data-page-prev><i class="fa-solid fa-chevron-left" aria-hidden="true"></i></button><button aria-current="page" data-page="1">1</button><button data-page="2">2</button><button data-page="3">3</button><button aria-label="Следующая страница" data-page-next><i class="fa-solid fa-chevron-right" aria-hidden="true"></i></button></nav>MORLIX / 09
Текстовые поля и состояния Размеры, валидация, запрещённый ввод, подсказки, иконки и группы.
09 / 20 Размеры инпутов + <div class="mx-stack"><label class="mx-field"><span class="mx-label">Малое поле 34px</span><input class="mx-control mx-control--sm" placeholder="Small"></label><label class="mx-field"><span class="mx-label">Среднее поле 44px</span><input class="mx-control" placeholder="Medium"></label><label class="mx-field"><span class="mx-label">Большое поле 54px</span><input class="mx-control mx-control--lg" placeholder="Large"></label></div>Состояния + <div class="mx-stack"><label><span class="mx-label">Обычное</span><input class="mx-control" placeholder="Текст"></label><label><span class="mx-label">С ошибкой</span><input class="mx-control" value="wrong@email" aria-invalid="true"><span class="mx-field-error">Некорректный адрес</span></label><label><span class="mx-label">Успешное</span><input class="mx-control is-valid" value="hello@example.test"></label><label><span class="mx-label">Недоступно</span><input class="mx-control" value="Disabled" disabled></label></div>Поле с иконкой + <label class="mx-label" for="searchExample">Поиск</label><div class="mx-field-icon"><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i><input id="searchExample" class="mx-control" type="search" placeholder="Найти проект..."></div>Группировка полей + <label class="mx-label" for="domainExample">Домен</label><div class="mx-input-group"><span class="mx-addon">https://</span><input id="domainExample" class="mx-control" value="morlix.ru"><span class="mx-addon">.ru</span></div><div class="mx-field-hint">Подсказка и описание под полем.</div>Многострочный ввод Описание проекта
+ <label class="mx-label" for="bioExample">Описание проекта</label><textarea id="bioExample" class="mx-textarea" placeholder="Введите описание..."></textarea>MORLIX / 11
Чекбоксы, радио, переключатели Нативные элементы управления, поддержка клавиатуры и читаемые состояния.
11 / 20 MORLIX / 13
Таблицы и наборы данных Обычная, полосатая, сортируемая, адаптивная таблицы с корректными thead, tbody и tfoot.
13 / 20 Базовая таблица + <div class="mx-table-scroll"><table class="mx-table"><caption>Подключённые продукты</caption><thead><tr><th scope="col">Продукт</th><th scope="col">Версия</th><th scope="col">Статус</th></tr></thead><tbody><tr><td>CMS</td><td>Beta</td><td><span class="mx-badge mx-badge--success">Активен</span></td></tr><tr><td>SEO Center</td><td>—</td><td><span class="mx-badge mx-badge--warning">План</span></td></tr></tbody></table></div>Полосатая таблица + <div class="mx-table-scroll"><table class="mx-table mx-table--striped"><thead><tr><th>Период</th><th>События</th></tr></thead><tbody><tr><td>Пн</td><td>24</td></tr><tr><td>Вт</td><td>38</td></tr><tr><td>Ср</td><td>31</td></tr><tr><td>Чт</td><td>43</td></tr></tbody></table></div>Сортируемая таблица + <div class="mx-table-scroll"><table class="mx-table" data-sort-table><thead><tr><th><button type="button" class="mx-sort-btn" data-sort-col="0">Продукт <i class="fa-solid fa-sort" aria-hidden="true"></i></button></th><th><button type="button" class="mx-sort-btn" data-sort-col="1">Сайты <i class="fa-solid fa-sort" aria-hidden="true"></i></button></th></tr></thead><tbody><tr><td>CMS</td><td>42</td></tr><tr><td>Theme Factory</td><td>11</td></tr><tr><td>SEO Center</td><td>8</td></tr></tbody></table></div>Footer и объединённые ячейки + <div class="mx-table-scroll"><table class="mx-table"><colgroup><col style="width:60%"><col></colgroup><thead><tr><th>Метрика</th><th>Значение</th></tr></thead><tbody><tr><td>Сайты</td><td>42</td></tr><tr><td>Темы</td><td>12</td></tr></tbody><tfoot><tr><th>Всего</th><th>54</th></tr></tfoot></table></div>MORLIX / 14
Карточки, группы и показатели Нейтральные поверхности, карточки контента, KPI, профили и пустые состояния.
14 / 20 Карточки разных типов Обычная Простая поверхность
Приподнятая Дополнительная глубина
+ <div class="mx-grid-3"><div class="mx-card"><h4>Обычная</h4><p>Простая поверхность</p></div><div class="mx-card mx-card--outline"><h4>Контурная</h4><p>Лёгкий акцент</p></div><div class="mx-card mx-card--raised"><h4>Приподнятая</h4><p>Дополнительная глубина</p></div></div>Показатели KPI 24.6K Просмотры
98.2% Доступность
+ <div class="mx-grid-2"><div class="mx-card mx-stat"><strong>24.6K</strong><small>Просмотры</small></div><div class="mx-card mx-stat"><strong>98.2%</strong><small>Доступность</small></div></div>Аватары и группы + <div class="mx-wrap"><span class="mx-avatar mx-avatar--sm">A</span><span class="mx-avatar">B</span><span class="mx-avatar mx-avatar--lg">C</span><div class="mx-avatar-group"><span class="mx-avatar">M</span><span class="mx-avatar">S</span><span class="mx-avatar">+</span></div></div>Пустое состояние
Пока нет проектов Добавьте первый проект, чтобы увидеть его здесь.
+ <div style="text-align:center;padding:25px 5px"><div style="font-size:31px;color:#3576cf"><i class="fa-solid fa-folder-open" aria-hidden="true"></i></div><strong>Пока нет проектов</strong><p>Добавьте первый проект, чтобы увидеть его здесь.</p><button class="mx-btn mx-btn--primary mx-btn--sm" data-toast="Новый проект"><i class="fa-solid fa-plus" aria-hidden="true"></i> Создать</button></div>MORLIX / 15
Статусы и уведомления Информационные, успешные, предупреждающие и критические состояния.
15 / 20 Статусы Ожидает Контур
+ <div class="mx-wrap"><span class="mx-badge"><i class="fa-solid fa-circle-info" aria-hidden="true"></i> Информация</span><span class="mx-badge mx-badge--success"><i class="fa-solid fa-check" aria-hidden="true"></i> Готово</span><span class="mx-badge mx-badge--warning"><i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i> Внимание</span><span class="mx-badge mx-badge--danger"><i class="fa-solid fa-xmark" aria-hidden="true"></i> Ошибка</span><span class="mx-badge mx-badge--neutral">Ожидает</span><span class="mx-badge mx-badge--outline">Контур</span></div>Alerts / системные сообщения Информация Уведомление о состоянии системы.
Успешно Изменения сохранены.
Проверьте данные Некоторые настройки требуют внимания.
Ошибка Не удалось выполнить действие.
+ <div class="mx-stack"><div class="mx-alert"><i class="fa-solid fa-circle-info" aria-hidden="true"></i><div><strong>Информация</strong><small>Уведомление о состоянии системы.</small></div></div><div class="mx-alert mx-alert--success"><i class="fa-solid fa-circle-check" aria-hidden="true"></i><div><strong>Успешно</strong><small>Изменения сохранены.</small></div></div><div class="mx-alert mx-alert--warning"><i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i><div><strong>Проверьте данные</strong><small>Некоторые настройки требуют внимания.</small></div></div><div class="mx-alert mx-alert--danger"><i class="fa-solid fa-circle-xmark" aria-hidden="true"></i><div><strong>Ошибка</strong><small>Не удалось выполнить действие.</small></div></div></div>Toast-уведомления
+ <div class="mx-wrap"><button class="mx-btn mx-btn--secondary" data-toast="Данные сохранены"><i class="fa-solid fa-check" aria-hidden="true"></i> Показать toast</button><button class="mx-btn mx-btn--ghost" data-toast="Новая запись создана"><i class="fa-solid fa-bell" aria-hidden="true"></i> Ещё уведомление</button></div>MORLIX / 16
Прогресс, рейтинги и индикаторы Прогресс, шкалы, загрузчики, спиннеры и системные значения.
16 / 20 Индикаторы выполнения + <div class="mx-stack"><div><span class="mx-label">Процесс 65%</span><div class="mx-progress"><span style="width:65%"></span></div></div><div><span class="mx-label">Завершено 100%</span><div class="mx-progress mx-progress--success"><span style="width:100%"></span></div></div></div>Нативные progress и meter + <div class="mx-stack"><div><span class="mx-label">progress</span><progress class="mx-native-progress" max="100" value="72">72%</progress></div><div><span class="mx-label">meter</span><meter class="mx-native-meter" min="0" max="100" low="20" high="70" optimum="100" value="83">83%</meter></div></div>Спиннеры и skeleton + <div class="mx-wrap"><span style="color:#0d6efd;font-size:23px"><i class="fa-solid fa-spinner fa-spin" aria-hidden="true"></i></span><span style="color:#0d6efd;font-size:24px"><i class="fa-solid fa-circle-notch fa-spin" aria-hidden="true"></i></span><span class="mx-badge">Подключение...</span></div><div class="mx-stack" style="margin-top:16px"><span class="mx-skeleton" style="width:100%"></span><span class="mx-skeleton" style="width:73%"></span><span class="mx-skeleton" style="width:45%"></span></div>Рейтинг + <div class="mx-wrap" style="color:#cf9233"><i class="fa-solid fa-star" aria-hidden="true"></i><i class="fa-solid fa-star" aria-hidden="true"></i><i class="fa-solid fa-star" aria-hidden="true"></i><i class="fa-solid fa-star" aria-hidden="true"></i><i class="fa-regular fa-star" aria-hidden="true"></i> <strong style="color:#405e80">4/5</strong></div>MORLIX / 17
Модальные окна, popover и подсказки Нативный dialog, popover API, всплывающие сообщения и tooltip.
17 / 20 Dialog — подтверждение
+ <button class="mx-btn mx-btn--primary" data-open-dialog="confirmDialog"><i class="fa-solid fa-window-maximize" aria-hidden="true"></i> Открыть окно</button>Dialog — форма
+ <button class="mx-btn mx-btn--secondary" data-open-dialog="formDialog"><i class="fa-solid fa-pen" aria-hidden="true"></i> Редактировать</button>Popover API Всплывающая панель Нативный HTML Popover API. Зависит от браузера.
Закрыть + <button class="mx-btn mx-btn--secondary" popovertarget="samplePopover"><i class="fa-solid fa-circle-info" aria-hidden="true"></i> Открыть popover</button><div id="samplePopover" popover style="padding:18px;border:1px solid #bcd9f5;border-radius:14px;color:#203a56;background:#f0f7ff;max-width:300px;box-shadow:0 18px 45px #0003"><strong>Всплывающая панель</strong><p style="font-size:12px;margin:8px 0">Нативный HTML Popover API. Зависит от браузера.</p><button class="mx-btn mx-btn--primary mx-btn--sm" popovertarget="samplePopover" popovertargetaction="hide">Закрыть</button></div>Tooltip Наведите курсор или сфокусируйте кнопку.
+ <div class="mx-wrap"><span class="mx-tooltip" data-tooltip="Описание действия"><button class="mx-btn mx-btn--secondary mx-btn--icon" aria-label="Подсказка"><i class="fa-solid fa-circle-question" aria-hidden="true"></i></button></span><span class="mx-caption">Наведите курсор или сфокусируйте кнопку.</span></div>MORLIX / 18
Списки, details и аккордеоны Наборы пунктов, FAQ, описательные списки и вложенные группы.
18 / 20 Список объектов Обновлено + <ul class="mx-list"><li><i class="fa-solid fa-file-code" aria-hidden="true"></i> Главная страница <span class="mx-badge" style="margin-left:auto">Обновлено</span></li><li><i class="fa-solid fa-file-code" aria-hidden="true"></i> Блог</li><li><i class="fa-solid fa-file-code" aria-hidden="true"></i> SEO настройки</li></ul>HTML-списки + <div class="mx-grid-3"><div><strong>ul</strong><ul><li>Первый</li><li>Второй</li></ul></div><div><strong>ol</strong><ol><li>Первый</li><li>Второй</li></ol></div><div><strong>dl</strong><dl><dt><b>Версия</b></dt><dd>1.0.0</dd><dt><b>Статус</b></dt><dd>Beta</dd></dl></div></div>Аккордеон details Что такое Morlix UI? Единая визуальная система продуктов.
Можно ли настроить тему? В следующих версиях запланированы дополнительные темы и варианты.
Нужен ли JavaScript? Не для всех элементов: details работает нативно.
+ <div class="mx-accordion"><details open><summary>Что такое Morlix UI?</summary><p>Единая визуальная система продуктов.</p></details><details><summary>Можно ли настроить тему?</summary><p>В следующих версиях запланированы дополнительные темы и варианты.</p></details><details><summary>Нужен ли JavaScript?</summary><p>Не для всех элементов: details работает нативно.</p></details></div>MORLIX / 20
Дополнительные интерфейсные паттерны Элементы, которые часто требуются в CMS и сервисных панелях.
20 / 20 Timeline Заявка отправлена 01 ноября, 10:30
Проверка завершена 01 ноября, 10:32
Ожидаем публикацию Следующий этап
+ <div class="mx-timeline"><div class="mx-timeline-item"><strong>Заявка отправлена</strong><small>01 ноября, 10:30</small></div><div class="mx-timeline-item"><strong>Проверка завершена</strong><small>01 ноября, 10:32</small></div><div class="mx-timeline-item"><strong>Ожидаем публикацию</strong><small>Следующий этап</small></div></div>Копировать значение + <label class="mx-label" for="copyValue">Ключ установки (демо)</label><div class="mx-wrap"><input id="copyValue" class="mx-control" style="flex:1;min-width:130px" value="MORLIX-DEMO-KEY" readonly><button class="mx-btn mx-btn--secondary" data-copy-target="copyValue" aria-label="Копировать"><i class="fa-solid fa-copy" aria-hidden="true"></i></button></div>Поиск, фильтр и команды + <div class="mx-wrap"><div class="mx-search" style="min-width:160px" role="search"><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i><input class="mx-control" type="search" placeholder="Название проекта"></div><button class="mx-btn mx-btn--secondary" data-toast="Фильтр"><i class="fa-solid fa-filter" aria-hidden="true"></i> Фильтр</button><button class="mx-btn mx-btn--secondary mx-btn--icon" data-toast="Сортировка" aria-label="Сортировка"><i class="fa-solid fa-arrow-down-wide-short" aria-hidden="true"></i></button></div>Заглушки и пустые данные + <div class="mx-card"><div class="mx-wrap"><span class="mx-avatar" style="background:#d5e5f5"></span><div style="flex:1"><span class="mx-skeleton" style="width:55%"></span><span class="mx-skeleton" style="width:85%;margin-top:8px"></span></div></div></div>Совпадений нет. Попробуйте другой запрос.
