Перейти до основного вмісту

Нова версія

iPets — вітрина компонентів

Статичний UI shell і багаторазова система компонентів: основи, форми, навігація, іконки, картки, стани, медіа та календар.

Демо станів шапки

Детерміновані локальні перемикачі презентаційних станів Header v2: справжніх сервісів авторизації, кошика чи сповіщень у статичній вітрині немає.

Останній пошуковий запит: ще немає

Це інтерактивний фільтр витрини. Оберіть категорію або “Показати все”.

Основи

Кнопки — варіанти

Кнопки — розміри та іконки

Кнопки — стани

Іконкові кнопки

Бейджі

НейтральнийБрендУспіхУвагаПомилкаДовідка

Аватари

Підказки

Додати товар до обраногоПорівняння відкриється у кошику

Форми

Текстові поля

Надішлемо підтвердження замовлення.

Вкажіть номер у форматі +380.

Наприклад, зручний час дзвінка.

Вибір і перемикачі

Харків тимчасово недоступний.

Спосіб доставки

Обов’язково для замовлення.

Сповіщення про статус замовлення

Push і електронна пошта.

Компактний вигляд списків
Вимкнений перемикач

Навігація

Хлібні крихти

Вкладки (вкладений приклад)

Стрілки вліво/вправо переходять між вкладками по колу, Home і End — до першої та останньої. Активна вкладка єдина у порядку фокуса.

Сухі та вологі корми для котів і собак.

Пагінація

Оболонка застосунку

  • Посилання «Перейти до основного вмісту» — перший елемент у порядку фокуса.
  • Від 1024 пікселів бічна панель постійна; вужче — висувна з пасткою фокуса, Escape закриває і повертає фокус кнопці меню.
  • Кнопка меню в шапці пов’язана з панеллю через aria-controls і aria-expanded.

Іконки

Розміри

Закритий набір токенів xs–xl через CSS-властивість; літеральна утиліта, як-от size-10, свідомо сильніша за проп.

xssmmdlgxlsize-10

Колір через currentColor

Пропа кольору немає: іконка успадковує text-* класи контейнера або власний літеральний клас.

успадкований колір тексту

Семантика

декоративна (aria-hidden)інформативна (role="img" + назва)

Повний реєстр — 89 канонічних імен

  • paw
  • plus
  • sparkle
  • sparkle-ai
  • heart
  • heart-plus
  • search
  • pin
  • check
  • chevron-right
  • chevron-left
  • chevron-down
  • download
  • upload
  • user
  • chat
  • bookmark
  • lock
  • warning
  • cart
  • idea
  • star
  • truck
  • info
  • arrow-right
  • copy
  • card-plus
  • send
  • eye
  • phone
  • compare
  • edit
  • grid-cats
  • grid-dots
  • dots-v
  • dots-h
  • bell
  • book
  • shield
  • close
  • menu
  • globe
  • sun
  • moon
  • home
  • box
  • wallet
  • users
  • chart
  • tag
  • ticket
  • megaphone
  • stethoscope
  • cap
  • calendar
  • briefcase
  • sparkles
  • gear
  • doc
  • trash
  • settings
  • logout
  • clock
  • repeat
  • monitor
  • storefront
  • plus-circle
  • circles
  • camera
  • clip
  • ban
  • star-filled
  • bone
  • pill
  • scissors
  • bowl
  • bag
  • play
  • coin
  • eye-off
  • flag
  • thumb
  • route
  • flask
  • trophy
  • pause
  • candle
  • gift
  • bookmark-filled

Історичний псевдонім med-card обʼєднано з card-plus без втрати зворотного відображення.

Картки

Товари — сітка

Товари — список (той самий компонент)

Категорії

Послуги та події

Статті

Таблиця даних — CRM-приклад «Клієнти»

Справжня семантична таблиця (caption, thead, scope) зі звичним CRM-виглядом: компактна шапка, розділені рядки, скелет завантаження і порожній стан. На вузьких екранах прокручується сам контейнер, а не сторінка.

Клієнти компанії — демо-таблиця
КлієнтКонтактСтатусЗамовленняДії
Лапка та ХвістОлена Коваль+380 67 111 22 33Активний24
ЗооДім ПодільськийТарас Мельник+380 50 444 55 66Очікує7
Крила і Пір’яІрина Шевчук+380 63 777 88 99Активний31
Акваріум-студія «Ріф»Максим Бондар+380 96 222 33 44Пауза2
Притулок «Тепла лапа»Софія Гнатюк+380 73 555 66 77Активний12

Банер і геро-блок

−20% на перше замовлення

Зареєструйтеся та отримайте знижку на корми і аксесуари.

Разом із притулками

Частина кожного замовлення допомагає тваринам знайти дім.

Стани

Повідомлення

Успіх: Замовлення оформлено

Номер 48213 вже передано на комплектацію.

Довідка: Графік на свята

24 серпня магазини працюють до 18:00.

Увага: Залишилося мало товару

На складі менше пʼяти упаковок обраного корму.

Помилка: Оплату не підтверджено

Банк відхилив транзакцію. Спробуйте іншу картку.

Завантаження

Недоступні та помилкові стани

Адреса неповна: бракує домену.

Порожні стани

У кошику поки порожньо

Додайте товари з каталогу — вони зʼявляться тут.

Нічого не знайдено

Спробуйте змінити фільтри.

Сповіщень немає

Стани зображень

UiImage має рівно три стани — ready, missing, error — і скидає помилку при зміні джерела. Фолбек зібраний із токенів без нових зображень.

  • ready
  • missing
  • error (керована подія)
  • focal 0.5 / 0.85

Накладки та підтвердження

Модальне вікно тримає фокус усередині, Escape і клік по тлу закривають його, фокус повертається кнопці-відкривачу. Підтвердження — композиція над модалкою: рівно один результат на цикл. Остання відповідь: поки немає

Toast-сповіщення

Черга обмежена пʼятьма, найстаріші витісняються. Наведення чи фокус ставлять таймер на паузу; хрестик закриває одразу. Warning та error оголошуються асертивно.

Медіа

37 зображень скопійовано байт-у-байт з approved legacy main у branch-local /showcase/reference/. Нових зображень у цій задачі не створювалося.

Товари — 8

  • Корм для котів
    Корм для котівproducts/c9.webp
  • Іграшка для кота
    Іграшка для котаproducts/c51.webp
  • Лежанка
    Лежанкаproducts/c235.webp
  • Шлейка
    Шлейкаproducts/c265.webp
  • Наповнювач
    Наповнювачproducts/c286.webp
  • Вітаміни
    Вітаміниproducts/c290.webp
  • Фільтр для акваріума
    Фільтр для акваріумаproducts/c355.webp
  • Переноска
    Переноскаproducts/c360.webp

Категорії — 9

  • Каталог товарів
    Каталог товарівcategories/goods-catalog.webp
  • Для котів
    Для котівcategories/cat-products.webp
  • Для собак
    Для собакcategories/dog-products.webp
  • Акваріумістика
    Акваріумістикаcategories/aquarium.webp
  • Гризуни та тхори
    Гризуни та тхориcategories/rodents-ferrets.webp
  • Для птахів
    Для птахівcategories/bird-products.webp
  • Для рептилій
    Для рептилійcategories/reptile-products.webp
  • Ветаптека
    Ветаптекаcategories/vet-meds.webp
  • Цифрові товари
    Цифрові товариcategories/digital-goods.webp

Послуги — 4

  • Грумінг
    Грумінгservices/c133s1.webp
  • Чистка зубів
    Чистка зубівservices/c133s6.webp
  • Ветогляд
    Ветоглядservices/c133s11.webp
  • Вакцинація
    Вакцинаціяservices/c133s13.webp

Події — 3

  • Воркшоп із грумінгу
    Воркшоп із грумінгуevents/grooming-workshop.webp
  • Прогулянка парком
    Прогулянка паркомevents/mariinsky-walk.webp
  • День відкритих дверей
    День відкритих дверейevents/store-open-day.webp

Статті — 5

  • Акваріум
    Акваріумarticles/aqua.webp
  • Коти
    Котиarticles/cats.webp
  • Собаки
    Собакиarticles/dogs.webp
  • Сервіси
    Сервісиarticles/services.webp
  • Ветеринарія
    Ветеринаріяarticles/vet.webp

Банери — 4

  • Банер 1
    Банер 1banners/b1.webp
  • Банер 2
    Банер 2banners/b2.webp
  • Банер 3
    Банер 3banners/b3.webp
  • Банер 4
    Банер 4banners/b4.webp

Геро — 4

  • Геро 1
    Геро 1heroes/h1.webp
  • Геро 2
    Геро 2heroes/h2.webp
  • Геро 3
    Геро 3heroes/h3.webp
  • Геро 4
    Геро 4heroes/h4.webp

Календар

CRM-календар — серпень 2026

Місяць, тиждень і день над одним набором подій. Перемикання подань — справжні вкладки зі стрілками; дати й події поки не інтерактивні, бо чесної дії для них у цьому зрізі немає. Колір категорії — лише декор, текст завжди видимий.

Серпень 2026
ПнВтСрЧтПтСбНд
  • 09:30 Прийом партії кормів
  • 10:00 Вакцинація — Барсик
  • 14:30 Грумінг — Луна
  • 16:00 Огляд після щеплення — Барсик
  • 09:00 Доставка корму — ЗооДім
  • 11:00 Стрижка — Річі

Стани календаря