Dokumentacja komponentów UI

Alert Banner

components/_alert-banner.scss

Default, validation, error, important. Rozmiary lg/sm. Warianty simplified, red, interactive.

Breadcrumb

components/_breadcrumb.scss

Nawigacja okruszkowa. Wariant domyślny z rozwijaniem ścieżki i wariant powrót.

Buttons

components/_buttons.scss

Primary, secondary, positive, negative. Rozmiary sm/md/lg. Stany default, disabled.

Cards

components/_cards.scss

Bazowa karta i feature card.

Card Full

components/_card-full.scss

Pełnoszerokowa karta promocyjna. Warianty image i video. Responsive: centered mobile → left-aligned desktop.

Checkbox

components/_checkbox.scss

Stany: default, disabled, error, selected, blocked.

Dropdown Profile

components/_dropdown-profile.scss

Panel profilu po kliknięciu "Moje konto". Karta punktów WIN, menu nawigacyjne, wylogowanie.

Feature Cards

components/_feature-cards.scss

Karty produktowe: image, video, info, packshot. Flip animation, like button, warianty kolorów.

Hero Slider

components/_hero-slider.scss

Fullscreen hero slider z tłem image/video, animowanym contentem, fade transitions i pagerem.

Home Card

components/_home-card.scss

Karta z tłem image/video. Warianty image i video. Grid 3 kart na stronie głównej.

Like Button

components/_like-btn.scss

Przycisk polubienia z animacją pulse. Warianty dark/light. Temowanie przez .theme-*. Persystencja w localStorage.

Navbar

components/_navbar.scss

Sticky navbar z wariantami positive/negative. Scroll behavior (negative → positive po 30vh).

Play Button

components/_play-button.scss

Okrągły przycisk play do wideo. Rozmiary lg/sm. Warianty positive, negative.

Product Card

components/_product-card.scss

Karta produktu z hover animation. Wariant z badge "Nowość".

Product Filter

components/_product-filter.scss

Filtry produktów: chipy z ikoną, aktywne tagi, mobile modal. Desktop i responsive.

Progress Counter

components/_progress-counter.scss

Licznik postępu (np. 0/6). Kontekst: vouchery, odebrane nagrody.

Radio Input

components/_radio-input.scss

Stany: default, disabled, error, selected, blocked.

Slider History

components/_slider-history.scss

Slider z osią czasu historii marki (1954–2026). Paginacja lat (desktop), kropkowa (mobile).

Text Input

components/_text-input.scss

Date, email, password, search, textarea. Stany disabled, locked, error.

Typography

base/_typography.scss

Nagłówki H1–H6, paragrafy, elementy inline, rodziny fontów i grubości.

Voucher Card

components/_voucher-card.scss

Default, new, disabled, disabled-special. Hover z animacją.