Интерфейсные решения

Компоненты интерфейсов

Библиотека frontend-компонентов: шапки, меню, карточки, формы, кнопки и таблицы. Компоненты показаны живыми — их можно посмотреть в работе, а не только на скриншоте.

Информационная таблица

Таблицы

предпросмотр компонента

Сравнение вариантов исполнения
Параметр	Базовый	Расширенный
Адаптивность	Да	Да
Компоненты	Базовые	Полный набор
Срок	Короче	Дольше

На узких экранах таблица прокручивается внутри своего контейнера и не ломает страницу.

Таблица в контейнере с горизонтальной прокруткой: не ломает страницу на узких экранах.

Показать HTML

<section class="bg-paper p-5">
    <div class="mx-auto max-w-3xl">
        <div class="overflow-x-auto rounded-lg border border-line-soft bg-card">
            <table class="w-full border-collapse text-sm">
                <caption class="sr-only">Сравнение вариантов исполнения</caption>
                <thead>
                    <tr class="border-b border-line bg-sand text-left">
                        <th scope="col" class="px-4 py-3 font-medium text-ink">Параметр</th>
                        <th scope="col" class="px-4 py-3 font-medium text-ink">Базовый</th>
                        <th scope="col" class="px-4 py-3 font-medium text-ink">Расширенный</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="border-b border-line-soft">
                        <th scope="row" class="px-4 py-3 text-left font-normal text-muted">Адаптивность</th>
                        <td class="px-4 py-3 text-ink">Да</td>
                        <td class="px-4 py-3 text-ink">Да</td>
                    </tr>
                    <tr class="border-b border-line-soft">
                        <th scope="row" class="px-4 py-3 text-left font-normal text-muted">Компоненты</th>
                        <td class="px-4 py-3 text-ink">Базовые</td>
                        <td class="px-4 py-3 text-ink">Полный набор</td>
                    </tr>
                    <tr>
                        <th scope="row" class="px-4 py-3 text-left font-normal text-muted">Срок</th>
                        <td class="px-4 py-3 text-ink">Короче</td>
                        <td class="px-4 py-3 text-ink">Дольше</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <p class="hint mt-2">На узких экранах таблица прокручивается внутри своего контейнера и не ломает страницу.</p>
    </div>
</section>

Сетка брендов

Таблицы

предпросмотр компонента

Bosch
LG
Samsung
Indesit
Electrolux
Whirlpool
Atlant
Beko

Сетка на границах-разделителях: линии не дублируются, ряды выравниваются автоматически.

Сетка названий брендов на линиях-разделителях: линии не дублируются, ряды выравниваются автоматически.

Показать HTML

<section class="bg-paper p-5">
    <div class="mx-auto max-w-4xl">
        <ul class="grid grid-cols-2 gap-px overflow-hidden rounded-lg border border-line-soft bg-line-soft sm:grid-cols-3 lg:grid-cols-4">
            <li class="flex items-center justify-center bg-card px-4 py-6 text-sm text-muted">Bosch</li>
            <li class="flex items-center justify-center bg-card px-4 py-6 text-sm text-muted">LG</li>
            <li class="flex items-center justify-center bg-card px-4 py-6 text-sm text-muted">Samsung</li>
            <li class="flex items-center justify-center bg-card px-4 py-6 text-sm text-muted">Indesit</li>
            <li class="flex items-center justify-center bg-card px-4 py-6 text-sm text-muted">Electrolux</li>
            <li class="flex items-center justify-center bg-card px-4 py-6 text-sm text-muted">Whirlpool</li>
            <li class="flex items-center justify-center bg-card px-4 py-6 text-sm text-muted">Atlant</li>
            <li class="flex items-center justify-center bg-card px-4 py-6 text-sm text-muted">Beko</li>
        </ul>
        <p class="hint mt-3">Сетка на границах-разделителях: линии не дублируются, ряды выравниваются автоматически.</p>
    </div>
</section>

Связь

Нужен свой компонент?

Опишите элемент интерфейса — соберу его отдельно и покажу в работе.

Обсудить проект Посмотреть услуги