Camel2.0 — Dokumentacja komponentów UI

2 #Components Components

2.1 #Components.Accordion Accordion

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Rozwijane sekcje FAQ. Gładka animacja max-height, rotacja ikony chevron. JS: src/js/modules/accordion.js. Requires data-accordion on container. Deep-link: strona.html#id-itemu → scroll + auto-open.

Example
Strona winston.pl jest przeznaczona wyłącznie dla osób pełnoletnich (18+). Podczas rejestracji weryfikujemy wiek za pomocą bankowości elektronicznej.
Hasło zresetujesz w ustawieniach profilu. Możesz to zrobić również na stronie logowania – kliknij „Nie pamiętasz hasła?" i podaj swój adres e-mail.
W każdej chwili możesz zmienić swoje dane osobowe. Aby to zrobić, ponownie zweryfikuj swoją tożsamość poprzez bankowość elektroniczną lub w razie potrzeby skontaktuj się z nami.
Markup: accordion.html 
<div style="max-width: 1260px; margin: 0 auto; padding: 40px 0;">
  <div class="accordion" data-accordion>
    <div class="accordion__item">
      <button class="accordion__header" type="button">
        <span class="accordion__title">Kto może korzystać ze&nbsp;strony?</span>
        <svg class="accordion__icon" xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 31 31" fill="none">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M4.00863 20.2932C3.62384 20.6851 3.62337 21.321 4.00757 21.7136C4.38568 22.0999 4.99545 22.1065 5.38147 21.733L5.39997 21.7146L15.5144 11.4124L25.5992 21.6939C25.9777 22.0798 26.5874 22.0858 26.9731 21.7119L26.9916 21.6935C27.3698 21.3074 27.3757 20.6853 27.0092 20.292L26.9911 20.2731L16.2108 9.28225C15.8325 8.89664 15.2233 8.89038 14.8376 9.26357L14.8191 9.28192L4.00863 20.2932Z" fill="currentColor"/>
        </svg>
      </button>
      <div class="accordion__body">
        <div class="accordion__content">
          Strona <strong>winston.pl</strong> jest przeznaczona wyłącznie dla osób pełnoletnich (18+). Podczas rejestracji weryfikujemy wiek za&nbsp;pomocą bankowości elektronicznej.
        </div>
      </div>
    </div>
    <div class="accordion__item">
      <button class="accordion__header" type="button">
        <span class="accordion__title">Jak mogę zmienić hasło?</span>
        <svg class="accordion__icon" xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 31 31" fill="none">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M4.00863 20.2932C3.62384 20.6851 3.62337 21.321 4.00757 21.7136C4.38568 22.0999 4.99545 22.1065 5.38147 21.733L5.39997 21.7146L15.5144 11.4124L25.5992 21.6939C25.9777 22.0798 26.5874 22.0858 26.9731 21.7119L26.9916 21.6935C27.3698 21.3074 27.3757 20.6853 27.0092 20.292L26.9911 20.2731L16.2108 9.28225C15.8325 8.89664 15.2233 8.89038 14.8376 9.26357L14.8191 9.28192L4.00863 20.2932Z" fill="currentColor"/>
        </svg>
      </button>
      <div class="accordion__body">
        <div class="accordion__content">
          Hasło zresetujesz w&nbsp;<a href="#">ustawieniach profilu</a>. Możesz to&nbsp;zrobić również na&nbsp;stronie logowania – kliknij „<strong>Nie pamiętasz hasła?</strong>" i&nbsp;podaj swój adres e-mail.
        </div>
      </div>
    </div>
    <div class="accordion__item">
      <button class="accordion__header" type="button">
        <span class="accordion__title">Jak mogę zaktualizować dane w&nbsp;profilu?</span>
        <svg class="accordion__icon" xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 31 31" fill="none">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M4.00863 20.2932C3.62384 20.6851 3.62337 21.321 4.00757 21.7136C4.38568 22.0999 4.99545 22.1065 5.38147 21.733L5.39997 21.7146L15.5144 11.4124L25.5992 21.6939C25.9777 22.0798 26.5874 22.0858 26.9731 21.7119L26.9916 21.6935C27.3698 21.3074 27.3757 20.6853 27.0092 20.292L26.9911 20.2731L16.2108 9.28225C15.8325 8.89664 15.2233 8.89038 14.8376 9.26357L14.8191 9.28192L4.00863 20.2932Z" fill="currentColor"/>
        </svg>
      </button>
      <div class="accordion__body">
        <div class="accordion__content">
          W&nbsp;każdej chwili możesz zmienić swoje dane osobowe. Aby to&nbsp;zrobić, ponownie zweryfikuj swoją tożsamość poprzez bankowość elektroniczną lub w&nbsp;razie potrzeby skontaktuj się z&nbsp;nami.
        </div>
      </div>
    </div>
  </div>
</div>
Source: src/scss/components/_accordion.scss, line 1

2.1.1 #Components.Accordion.Single Accordion — Tryb single

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Dodaj data-accordion-single na kontenerze — tylko jeden otwarty na raz.

Example
Konto usuniesz w ustawieniach profilu. Pamiętaj: usunięcie konta jest nieodwracalne. Stracisz dostęp do serwisu, zgromadzonych punktów i nagród.
Nie. Każde konto jest przypisane do danych osobowych konkretnego użytkownika.
Markup: accordion--single.html 
<div style="max-width: 1260px; margin: 0 auto; padding: 40px 0;">
  <div class="accordion" data-accordion data-accordion-single>
    <div class="accordion__item">
      <button class="accordion__header" type="button">
        <span class="accordion__title">Jak usunąć konto?</span>
        <svg class="accordion__icon" xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 31 31" fill="none">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M4.00863 20.2932C3.62384 20.6851 3.62337 21.321 4.00757 21.7136C4.38568 22.0999 4.99545 22.1065 5.38147 21.733L5.39997 21.7146L15.5144 11.4124L25.5992 21.6939C25.9777 22.0798 26.5874 22.0858 26.9731 21.7119L26.9916 21.6935C27.3698 21.3074 27.3757 20.6853 27.0092 20.292L26.9911 20.2731L16.2108 9.28225C15.8325 8.89664 15.2233 8.89038 14.8376 9.26357L14.8191 9.28192L4.00863 20.2932Z" fill="currentColor"/>
        </svg>
      </button>
      <div class="accordion__body">
        <div class="accordion__content">
          Konto usuniesz w&nbsp;<a href="#">ustawieniach profilu</a>. <strong>Pamiętaj: usunięcie konta jest nieodwracalne</strong>. Stracisz dostęp do&nbsp;serwisu, zgromadzonych punktów i&nbsp;nagród.
        </div>
      </div>
    </div>
    <div class="accordion__item">
      <button class="accordion__header" type="button">
        <span class="accordion__title">Czy mogę mieć więcej niż jedno konto?</span>
        <svg class="accordion__icon" xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 31 31" fill="none">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M4.00863 20.2932C3.62384 20.6851 3.62337 21.321 4.00757 21.7136C4.38568 22.0999 4.99545 22.1065 5.38147 21.733L5.39997 21.7146L15.5144 11.4124L25.5992 21.6939C25.9777 22.0798 26.5874 22.0858 26.9731 21.7119L26.9916 21.6935C27.3698 21.3074 27.3757 20.6853 27.0092 20.292L26.9911 20.2731L16.2108 9.28225C15.8325 8.89664 15.2233 8.89038 14.8376 9.26357L14.8191 9.28192L4.00863 20.2932Z" fill="currentColor"/>
        </svg>
      </button>
      <div class="accordion__body">
        <div class="accordion__content">
          Nie. Każde konto jest przypisane do&nbsp;danych osobowych konkretnego użytkownika.
        </div>
      </div>
    </div>
  </div>
</div>
Source: src/scss/components/_accordion.scss, line 11

2.2 #Components.AlertBanner Alert Banner

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Pasek powiadomień z ikoną, treścią, przyciskami CTA i opcjonalnym zamknięciem. Obsługuje warianty typu (kolor tła), rozmiar (sm), layout (simplified, link, popover) oraz stany (animacja show/dismiss, static). JS: src/js/modules/alert-banner.js.

Examples
Default styling

Tytuł powiadomienia

Treść komunikatu z informacją dla użytkownika.

.alert-banner--default
Domyślny (szary: #e6e6e2)

Tytuł powiadomienia

Treść komunikatu z informacją dla użytkownika.

.alert-banner--validation
Walidacja (#f5f5f5)

Tytuł powiadomienia

Treść komunikatu z informacją dla użytkownika.

.alert-banner--error
Błąd (#fcd9e2)

Tytuł powiadomienia

Treść komunikatu z informacją dla użytkownika.

.alert-banner--important
Ważne (#f6e6d8)

Tytuł powiadomienia

Treść komunikatu z informacją dla użytkownika.

.alert-banner--light
Jasny (#fbfbfb)

Tytuł powiadomienia

Treść komunikatu z informacją dla użytkownika.

.alert-banner--sm
Mniejszy rozmiar (padding 16px, tekst 14px)

Tytuł powiadomienia

Treść komunikatu z informacją dla użytkownika.

.alert-banner--simplified
Layout uproszczony (tekst inline, ikona na końcu)

Tytuł powiadomienia

Treść komunikatu z informacją dla użytkownika.

.alert-banner--red
Czerwone CTA (dla wariantu error)

Tytuł powiadomienia

Treść komunikatu z informacją dla użytkownika.

.alert-banner--static
Stale widoczny (bez animacji)

Tytuł powiadomienia

Treść komunikatu z informacją dla użytkownika.

.alert-banner--link
Z linkiem i strzałką po prawej

Tytuł powiadomienia

Treść komunikatu z informacją dla użytkownika.

Markup: alert-banner.html 
<!-- Alert Banner: Default (static) -->
<div class="alert-banner alert-banner--default alert-banner--static [modifier class]" style="margin-bottom: 16px;">
  <span class="alert-banner__icon"></span>
  <div class="alert-banner__content">
    <p class="alert-banner__title">Tytuł powiadomienia</p>
    <p class="alert-banner__text">Treść komunikatu z informacją dla użytkownika.</p>
    <div class="alert-banner__actions">
      <button class="alert-banner__btn-primary">Akcja główna</button>
      <button class="alert-banner__btn-secondary">Anuluj</button>
    </div>
  </div>
  <button class="alert-banner__close" aria-label="Zamknij"></button>
</div>
Source: src/scss/components/_alert-banner.scss, line 1

2.3 #Components.Breadcrumb Breadcrumb

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Nawigacja okruszkowa. Wariant .breadcrumb--back przełącza na tryb „wstecz" (jeden link zwrotny). Stan .breadcrumb--expanded rozwija skróconą ścieżkę.

Examples
Default styling
.breadcrumb--back
Tryb nawigacji powrót
.breadcrumb--expanded
Rozwinięta ścieżka (wieloelementowa)
Markup: breadcrumb.html 
<!-- Breadcrumb: Default -->
<nav class="breadcrumb [modifier class]">
  <a class="breadcrumb__link" href="#">Strona główna</a>
  <span class="breadcrumb__separator">/</span>
  <a class="breadcrumb__link" href="#">Produkty</a>
  <span class="breadcrumb__separator">/</span>
  <span class="breadcrumb__current">Winston Classic</span>
</nav>
Source: src/scss/components/_breadcrumb.scss, line 1

2.4 #Components.Buttons Buttons

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Przyciski akcji w systemie Camel. Pięć wariantów kolorystycznych, trzy rozmiary (sm/md/lg). Full-width poniżej breakpoint-lg. Działają na <button> i <a>.

Examples
Default styling

Positive

Negative

.btn-primary
Primary (niebieskie tło Camel Blue, biały tekst)

Positive

Negative

.btn-positive
Pozytywny (białe tło, ciemny tekst)

Positive

Negative

.btn-negative
Negatywny (żółte tło Camel Yellow, ciemny tekst)

Positive

Negative

.btn-secondary-positive
Outline pozytywny (border brand, przezroczyste tło)

Positive

Negative

.btn-secondary-negative
Outline negatywny (border biały — na ciemne tło)

Positive

Negative

:disabled
Stan wyłączony (szary, cursor not-allowed)

Positive

Negative

Markup: buttons.html 
<div style="display: flex; flex-direction: column; gap: 24px;">
  <div>
    <h4 style="margin-bottom: 12px; color: #666; font-size: 13px;">Positive</h4>
    <div style="display: flex; gap: 12px; flex-wrap: wrap;">
      <button class="btn btn-positive [modifier class]">Button</button>
    </div>
  </div>
  <div style="background-color: #0f172a; padding: 20px; border-radius: 8px;">
    <h4 style="margin-bottom: 12px; color: #999; font-size: 13px;">Negative</h4>
    <div style="display: flex; gap: 12px; flex-wrap: wrap;">
      <button class="btn btn-negative [modifier class]">Button</button>
    </div>
  </div>
</div>
Source: src/scss/components/_buttons.scss, line 1

2.4.1 #Components.Buttons.Sizes Buttons — Rozmiary

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Trzy rozmiary: small (32px min-height), medium (domyślny), large (50px min-height).

Example

Positive — Rozmiary

Negative — Rozmiary

Secondary Positive — Rozmiary

Secondary Negative — Rozmiary

Markup: buttons--sizes.html 
<div style="display: flex; flex-direction: column; gap: 24px;">
  <div>
    <h4 style="margin-bottom: 12px; color: #666; font-size: 13px;">Positive — Rozmiary</h4>
    <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
      <button class="btn btn-positive btn-sm">Small</button>
      <button class="btn btn-positive">Medium (default)</button>
      <button class="btn btn-positive btn-lg">Large</button>
    </div>
  </div>
  <div style="background-color: #0f172a; padding: 20px; border-radius: 8px;">
    <h4 style="margin-bottom: 12px; color: #999; font-size: 13px;">Negative — Rozmiary</h4>
    <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
      <button class="btn btn-negative btn-sm">Small</button>
      <button class="btn btn-negative">Medium (default)</button>
      <button class="btn btn-negative btn-lg">Large</button>
    </div>
  </div>
  <div>
    <h4 style="margin-bottom: 12px; color: #666; font-size: 13px;">Secondary Positive — Rozmiary</h4>
    <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
      <button class="btn btn-secondary-positive btn-sm">Small</button>
      <button class="btn btn-secondary-positive">Medium</button>
      <button class="btn btn-secondary-positive btn-lg">Large</button>
    </div>
  </div>
  <div style="background-color: #0f172a; padding: 20px; border-radius: 8px;">
    <h4 style="margin-bottom: 12px; color: #999; font-size: 13px;">Secondary Negative — Rozmiary</h4>
    <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
      <button class="btn btn-secondary-negative btn-sm">Small</button>
      <button class="btn btn-secondary-negative">Medium</button>
      <button class="btn btn-secondary-negative btn-lg">Large</button>
    </div>
  </div>
</div>
Source: src/scss/components/_buttons.scss, line 18

2.4.2 #Components.Buttons.States Buttons — Stany i linki

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Stan disabled, oraz użycie jako element <a>.

Example

Positive — Stany

Negative — Stany

Secondary Positive — Stany

Secondary Negative — Stany

Jako linki (<a>)

Markup: buttons--states.html 
<div style="display: flex; flex-direction: column; gap: 24px;">
  <div>
    <h4 style="margin-bottom: 12px; color: #666; font-size: 13px;">Positive — Stany</h4>
    <div style="display: flex; gap: 12px; flex-wrap: wrap;">
      <button class="btn btn-positive">Default</button>
      <button class="btn btn-positive" disabled>Disabled</button>
    </div>
  </div>
  <div style="background-color: #0f172a; padding: 20px; border-radius: 8px;">
    <h4 style="margin-bottom: 12px; color: #999; font-size: 13px;">Negative — Stany</h4>
    <div style="display: flex; gap: 12px; flex-wrap: wrap;">
      <button class="btn btn-negative">Default</button>
      <button class="btn btn-negative" disabled>Disabled</button>
    </div>
  </div>
  <div>
    <h4 style="margin-bottom: 12px; color: #666; font-size: 13px;">Secondary Positive — Stany</h4>
    <div style="display: flex; gap: 12px; flex-wrap: wrap;">
      <button class="btn btn-secondary-positive">Default</button>
      <button class="btn btn-secondary-positive" disabled>Disabled</button>
    </div>
  </div>
  <div style="background-color: #0f172a; padding: 20px; border-radius: 8px;">
    <h4 style="margin-bottom: 12px; color: #999; font-size: 13px;">Secondary Negative — Stany</h4>
    <div style="display: flex; gap: 12px; flex-wrap: wrap;">
      <button class="btn btn-secondary-negative">Default</button>
      <button class="btn btn-secondary-negative" disabled>Disabled</button>
    </div>
  </div>
  <div>
    <h4 style="margin-bottom: 12px; color: #666; font-size: 13px;">Jako linki (&lt;a&gt;)</h4>
    <div style="display: flex; gap: 12px; flex-wrap: wrap;">
      <a href="#" class="btn btn-positive">Positive Link</a>
      <a href="#" class="btn btn-secondary-positive">Secondary Link</a>
    </div>
  </div>
</div>
Source: src/scss/components/_buttons.scss, line 28

2.5 #Components.CardFull Card Full

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Full-width karta promocyjna z tłem (image/video), overlay gradient, tytuł + opis + CTA. Warianty: --video, --game. Hover: zoom na obrazie (desktop).

Examples
Default styling

Komponent card-full wymaga pełnego layoutu z obrazami/wideo. Podgląd w kontekście strony: nowosci.html

.card-full--game
Wariant growy — dwie kolumny, hover reveal CTA

Komponent card-full wymaga pełnego layoutu z obrazami/wideo. Podgląd w kontekście strony: nowosci.html

Markup: card-full.html 
<p style="color:#999; font-style:italic; padding: 20px;">Komponent card-full wymaga pełnego layoutu z obrazami/wideo. Podgląd w kontekście strony: <a href="../nowosci.html">nowosci.html</a></p>
Source: src/scss/components/_card-full.scss, line 1

2.6 #Components.Cards Cards

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Bazowa karta z obrazem, tytułem i opisem. Border-radius, hover shadow + translateY.

Example

Card Title

Opis karty z przykładowym tekstem.

Card Title 2

Kolejna karta w gridzie.

Markup: cards.html 
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; max-width: 900px;">
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Card Title</h4>
      <p class="card-text">Opis karty z przykładowym tekstem.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Card Title 2</h4>
      <p class="card-text">Kolejna karta w gridzie.</p>
    </div>
  </div>
</div>
Source: src/scss/components/_cards.scss, line 1

2.7 #Components.Checkbox Checkbox

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Niestandardowy checkbox z ukrytym natywnym inputem i wizualnym indicatorem. CSS-only checkmark (pseudo-element). Stany: checked, disabled, error, blocked, focus.

Examples
Default styling
.checkbox--error
Border czerwony (walidacja)
.checkbox--blocked
Zablokowany (szary, checked, nie do odznaczenia)
Markup: checkbox.html 
<div style="display: flex; gap: 24px; flex-wrap: wrap;">
  <!-- Default -->
  <label class="checkbox">
    <input type="checkbox" class="checkbox__control" />
    <span class="checkbox__indicator"></span>
    <span class="checkbox__label">Default</span>
  </label>

  <!-- Disabled -->
  <label class="checkbox">
    <input type="checkbox" class="checkbox__control" disabled />
    <span class="checkbox__indicator"></span>
    <span class="checkbox__label">Disabled</span>
  </label>

  <!-- Error -->
  <label class="checkbox checkbox--error">
    <input type="checkbox" class="checkbox__control" />
    <span class="checkbox__indicator"></span>
    <span class="checkbox__label">Error</span>
  </label>

  <!-- Selected -->
  <label class="checkbox">
    <input type="checkbox" class="checkbox__control" checked />
    <span class="checkbox__indicator"></span>
    <span class="checkbox__label">Selected</span>
  </label>

  <!-- Blocked -->
  <label class="checkbox checkbox--blocked">
    <input type="checkbox" class="checkbox__control" checked />
    <span class="checkbox__indicator"></span>
    <span class="checkbox__label">Blocked</span>
  </label>

  <!-- Focus -->
  <label class="checkbox">
    <input type="checkbox" class="checkbox__control" />
    <span class="checkbox__indicator"></span>
    <span class="checkbox__label">Focus (Tab)</span>
  </label>
</div>
Source: src/scss/components/_checkbox.scss, line 1

2.7.1 #Components.Checkbox.Group Checkbox — Grupa

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Przykład użycia wielu checkboxów w formularzu.

Example
Markup: checkbox--group.html 
<div style="display: flex; flex-direction: column; align-items: flex-start; gap: 12px;">
  <label class="checkbox">
    <input type="checkbox" class="checkbox__control" checked />
    <span class="checkbox__indicator"></span>
    <span class="checkbox__label">Regulamin serwisu</span>
  </label>
  <label class="checkbox">
    <input type="checkbox" class="checkbox__control" />
    <span class="checkbox__indicator"></span>
    <span class="checkbox__label">Newsletter</span>
  </label>
  <label class="checkbox">
    <input type="checkbox" class="checkbox__control" />
    <span class="checkbox__indicator"></span>
    <span class="checkbox__label">Powiadomienia SMS</span>
  </label>
</div>
Source: src/scss/components/_checkbox.scss, line 13

2.8 #Components.CodeInput Code Input

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

CTA sekcja "Wprowadź kod z paczki" z tłem (image), overlay gradient, tytuł + opis + formularz (text-input + button).

Example

Komponent code-input wymaga pełnego layoutu z tłem. Podgląd: win-club-dodawaj-kody.html

Markup: code-input.html 
<p style="color:#999; font-style:italic; padding: 20px;">Komponent code-input wymaga pełnego layoutu z tłem. Podgląd: <a href="../win-club-dodawaj-kody.html">win-club-dodawaj-kody.html</a></p>
Source: src/scss/components/_code-input.scss, line 1

2.9 #Components.Configurator Configurator

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Multi-step quiz dopasowania produktu. 3 kroki: Format → Smak → Zdjęcia, loader (spinner), wynik z rekomendacją. JS: src/js/modules/configurator.js. Zawiera progress bar, tile grid (3- i 4-kolumnowy), checkboxy na kafelkach, counter (Wybrano: 0/3), loader ze spinnerem i krok wynikowy z CTA.

Example

Komponent interaktywny z wieloma krokami. Podgląd na żywo: dopasuj-produkt.html

Markup: configurator.html 
<!-- Configurator: Informacja -->
<p style="color:#666;font-size:14px;">
  Komponent interaktywny z wieloma krokami. 
  Podgląd na żywo: <a href="/dopasuj-produkt.html" target="_blank">dopasuj-produkt.html</a>
</p>
Source: src/scss/components/_configurator.scss, line 1

2.10 #Components.Dialog Dialog

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Okno modalne (formularz edycji) z backdrop, przyciskiem zamknięcia (X), treścią formularza (body) i przyciskami akcji (submit). Trigger: data-dialog-open="dialog-xyz". JS: src/js/modules/dialog.js. Stany: .is-active, .is-dismissing. Scroll lock: .dialog-open na body.

Example
Markup: dialog.html 
<!-- Dialog: statyczny podgląd (bez backdrop) -->
<div style="position:relative; background:#f5f5f1; padding:20px; border-radius:8px; max-width:400px;">
  <div class="dialog" style="position:relative; transform:none; opacity:1; max-width:100%;">
    <button class="dialog__close" aria-label="Zamknij"></button>
    <div class="dialog__body">
      <label class="text-input__label">Imię</label>
      <div class="text-input__body">
        <input class="text-input__field" value="Jan" placeholder="Wpisz imię" />
      </div>
    </div>
    <div class="dialog__actions">
      <button class="btn btn-positive">Zapisz</button>
    </div>
  </div>
</div>
Source: src/scss/components/_dialog.scss, line 1

2.11 #Components.DropdownProfile Dropdown Profile

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Panel profilu użytkownika rozwijany z navbara. Zawiera nagłówek z tytułem, kartę punktów (wartość + obrazek + data wygaśnięcia + CTA), menu linków i przycisk wylogowania. Animacja stagger (slideIn). Responsywne skalowanie na desktop < 2xl. JS: trigger .navbar__profile-toggle, stan .is-open.

Example
Mój profil
1250 PUNKTY

Ważne do: 31.12.2026

Zobacz szczegóły
Moje dane Historia zamówień
Markup: dropdown-profile.html 
<!-- Dropdown Profile: statyczny podgląd -->
<div style="position:relative; max-width:320px; background:#f5f5f1; border-radius:8px; padding:20px;">
  <div class="dropdown-profile__header" style="opacity:1; width:100%;">
    <div class="dropdown-profile__spacer"></div>
    <span class="dropdown-profile__title">Mój profil</span>
    <button class="dropdown-profile__close">✕</button>
  </div>
  <div class="dropdown-profile__card" style="opacity:1; width:100%;">
    <div class="dropdown-profile__points-row">
      <div class="dropdown-profile__points-info">
        <span class="dropdown-profile__points-value">1250</span>
        <span class="dropdown-profile__points-label">PUNKTY</span>
      </div>
    </div>
    <div class="dropdown-profile__divider"></div>
    <p class="dropdown-profile__expiry">Ważne do: <strong>31.12.2026</strong></p>
    <a href="#" class="dropdown-profile__card-cta">Zobacz szczegóły</a>
  </div>
  <div class="dropdown-profile__menu" style="opacity:1; width:100%;">
    <a href="#" class="dropdown-profile__menu-item">Moje dane</a>
    <a href="#" class="dropdown-profile__menu-item">Historia zamówień</a>
  </div>
  <button class="dropdown-profile__logout" style="opacity:1;">
    Wyloguj się
  </button>
</div>
Source: src/scss/components/_dropdown-profile.scss, line 1

2.12 #Components.EarningPointItem Earning Point Item

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Element grida "Dodatkowe sposoby zdobywania punktów". Ikona + separator + body (tytuł + punkty + opis). Grid: .earning-point-grid — 1 kolumna mobile, 2 kolumny desktop.

Example
Konkursy 50–200 Win

Bierz udział w konkursach i zdobywaj dodatkowe punkty Win.

Markup: earning-point-item.html 
<div class="earning-point-grid" style="max-width: 900px;">
  <div class="earning-point-item">
    <div class="earning-point-item__icon">
      <img src="assets/images/app-icon-winston.png" alt="" style="width:45px; height:45px; background:#eee; border-radius:8px;">
    </div>
    <div class="earning-point-item__separator"></div>
    <div class="earning-point-item__body">
      <div class="earning-point-item__header">
        <span class="earning-point-item__title">Konkursy</span>
        <span class="earning-point-item__points">50–200 Win</span>
      </div>
      <p class="earning-point-item__desc">Bierz udział w konkursach i zdobywaj dodatkowe punkty Win.</p>
    </div>
  </div>
</div>
Source: src/scss/components/_earning-point-item.scss, line 1

2.13 #Components.FeatureCards Feature Cards

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Karty na stronach produktowych. 6 typów: image, video, info (SVG+tekst), packshot-title, packshot, image-title. Obsługa flip-card (3D), animacje reveal (slide-in), slow pan & zoom tła, like-button, vertical text. CSS custom properties: --fc-accent-color, --fc-text-color.

Examples
Default styling

Złożony komponent z 6 typami kart. Podgląd na żywo: product-legend-blue.html

Info Card
z ikoną SVG i tekstem

Packshot Card

.feature-card--image
Karta ze zdjęciem w tle

Złożony komponent z 6 typami kart. Podgląd na żywo: product-legend-blue.html

Info Card
z ikoną SVG i tekstem

Packshot Card

.feature-card--video
Karta z wideo w tle

Złożony komponent z 6 typami kart. Podgląd na żywo: product-legend-blue.html

Info Card
z ikoną SVG i tekstem

Packshot Card

.feature-card--info
Karta info (ikona SVG + tekst)

Złożony komponent z 6 typami kart. Podgląd na żywo: product-legend-blue.html

Info Card
z ikoną SVG i tekstem

Packshot Card

.feature-card--packshot-title
Packshot z tytułem na tle

Złożony komponent z 6 typami kart. Podgląd na żywo: product-legend-blue.html

Info Card
z ikoną SVG i tekstem

Packshot Card

.feature-card--packshot
Packshot na białym tle

Złożony komponent z 6 typami kart. Podgląd na żywo: product-legend-blue.html

Info Card
z ikoną SVG i tekstem

Packshot Card

.feature-card--image-title
Zdjęcie z tytułem

Złożony komponent z 6 typami kart. Podgląd na żywo: product-legend-blue.html

Info Card
z ikoną SVG i tekstem

Packshot Card

.feature-card--flippable
Karta obracalna (flip 3D)

Złożony komponent z 6 typami kart. Podgląd na żywo: product-legend-blue.html

Info Card
z ikoną SVG i tekstem

Packshot Card

.feature-card--dark-bg
Ciemne tło (produkty black)

Złożony komponent z 6 typami kart. Podgląd na żywo: product-legend-blue.html

Info Card
z ikoną SVG i tekstem

Packshot Card

.feature-card--accent-bg
Kolor akcentu jako tło

Złożony komponent z 6 typami kart. Podgląd na żywo: product-legend-blue.html

Info Card
z ikoną SVG i tekstem

Packshot Card

.feature-card--content-top
Treść u góry

Złożony komponent z 6 typami kart. Podgląd na żywo: product-legend-blue.html

Info Card
z ikoną SVG i tekstem

Packshot Card

.feature-card--content-bottom
Treść na dole

Złożony komponent z 6 typami kart. Podgląd na żywo: product-legend-blue.html

Info Card
z ikoną SVG i tekstem

Packshot Card

Markup: feature-cards.html 
<!-- Feature Cards: Informacja -->
<p style="color:#666;font-size:14px;">
  Złożony komponent z 6 typami kart. Podgląd na żywo: 
  <a href="/product-legend-blue.html" target="_blank">product-legend-blue.html</a>
</p>
<div style="display:flex; gap:16px; flex-wrap:wrap;">
  <!-- Info Card -->
  <div class="feature-card feature-card--info" style="width:200px; aspect-ratio:165/262; border:1px solid rgba(0,0,0,0.08); --fc-accent-color:#1c51a0; --fc-text-color:#333;">
    <p class="feature-card__text">Info Card<br>z ikoną SVG i tekstem</p>
  </div>
  <!-- Packshot Card -->
  <div class="feature-card feature-card--packshot" style="width:200px; aspect-ratio:165/262;">
    <p style="color:#999;font-size:12px;text-align:center;">Packshot Card</p>
  </div>
</div>
Source: src/scss/components/_feature-cards.scss, line 1

2.14 #Components.FormSelect Form Select

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Custom dropdown select stylizowany jak text-input. Ukryty natywny <select> (accessibility + form submit), widoczny trigger, rozwijana lista opcji. JS: src/js/modules/form-select.js.

Examples
Default styling
Wybierz z listy
.form-select--open
Stan otwarty (dropdown widoczny, chevron obrócony)
Wybierz z listy
.form-select--disabled
Stan wyłączony (opacity 0.2, cursor not-allowed)
Wybierz z listy
.form-select--error
Stan błędu (border 2px solid error)
Wybierz z listy
Markup: form-select.html 
<!-- Form Select: Default -->
<div class="form-select [modifier class]" style="max-width:400px;">
  <label class="form-select__label">Kategoria</label>
  <div class="form-select__wrapper">
    <div class="form-select__trigger" tabindex="0">
      <span class="form-select__value">Wybierz z listy</span>
      <span class="form-select__arrow"></span>
    </div>
  </div>
</div>
Source: src/scss/components/_form-select.scss, line 1

2.15 #Components.HeroSlider Hero Slider

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Fullscreen slider na stronę główną z image/video backgrounds, animowanym contentem (stagger slide-down) i page indicators. JS: src/js/modules/hero-slider.js. Stany slajdu: .is-active, .is-animated. Pager: .is-active na item.

Example

Komponent fullscreen – podgląd na żywo na stronie głównej: index.html

Markup: hero-slider.html 
<!-- Hero Slider: Informacja -->
<p style="color:#666;font-size:14px;">
  Komponent fullscreen – podgląd na żywo na stronie głównej: 
  <a href="/index.html" target="_blank">index.html</a>
</p>
Source: src/scss/components/_hero-slider.scss, line 1

2.16 #Components.HomeCard Home Card

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Karta z tłem (image/video), overlay gradient, tytuł + tekst + CTA. Grid: .home-cards__grid — 1 kolumna mobile, row desktop. Hover (desktop): CTA wjeżdża, tekst przesuwa się w górę, image zoom.

Example

Komponent home-card wymaga obrazów/wideo tła. Podgląd: home.html

Markup: home-card.html 
<p style="color:#999; font-style:italic; padding: 20px;">Komponent home-card wymaga obrazów/wideo tła. Podgląd: <a href="../home.html">home.html</a></p>
Source: src/scss/components/_home-card.scss, line 1

2.17 #Components.Icon Icon

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Ikony SVG renderowane przez sprite (<use>). Kolor dziedziczy currentColor.

Examples
Default styling

Rozmiary: sm (15px) → default (20px) → lg (24px) → xl (38px)

.icon--sm
Small 15×15px

Rozmiary: sm (15px) → default (20px) → lg (24px) → xl (38px)

.icon--lg
Large 24×24px

Rozmiary: sm (15px) → default (20px) → lg (24px) → xl (38px)

.icon--xl
Extra large 38×38px

Rozmiary: sm (15px) → default (20px) → lg (24px) → xl (38px)

Markup: icon.html 
<div style="display: flex; gap: 24px; align-items: center;">
  <svg class="icon icon--sm" style="color: #1c51a0;"><use href="assets/images/sprite.svg#heart"></use></svg>
  <svg class="icon" style="color: #1c51a0;"><use href="assets/images/sprite.svg#heart"></use></svg>
  <svg class="icon icon--lg" style="color: #1c51a0;"><use href="assets/images/sprite.svg#heart"></use></svg>
  <svg class="icon icon--xl" style="color: #1c51a0;"><use href="assets/images/sprite.svg#heart"></use></svg>
</div>
<p style="margin-top:12px; font-size:13px; color:#999;">Rozmiary: sm (15px) → default (20px) → lg (24px) → xl (38px)</p>
Source: src/scss/components/_icon.scss, line 1

2.18 #Components.LikeButton Like Button

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Przycisk "serduszko" z licznikiem polubień. Animacja pulse po kliknięciu. Kolor themowany przez --like-btn-color CSS custom property.

Examples
Default styling
.like-btn--light
Wariant na jasne tło (kolor brandu zamiast białego)
Markup: like-btn.html 
<div style="display: flex; gap: 40px; align-items: flex-end;">
  <div style="position: relative; width: 80px; height: 80px; background: #0f172a; border-radius: 8px;">
    <button class="like-btn" data-likes="303" style="position: absolute; bottom: 8px; right: 8px;">
      <svg xmlns="http://www.w3.org/2000/svg" width="33" height="31" viewBox="0 0 33 31" fill="none"><path d="M16.5 30L2.4 16.7C-1 13.3-0.6 7.6 3.3 4.7C7 2 11.8 3 14.5 5.5L16.5 7.5L18.5 5.5C21.2 3 26 2 29.7 4.7C33.6 7.6 34 13.3 30.6 16.7L16.5 30Z" stroke="currentColor" stroke-width="2"/></svg>
      <span class="like-btn__count">303</span>
    </button>
  </div>
  <div style="position: relative; width: 80px; height: 80px; background: #f5f5f1; border-radius: 8px;">
    <button class="like-btn like-btn--light" data-likes="42" style="position: absolute; bottom: 8px; right: 8px;">
      <svg xmlns="http://www.w3.org/2000/svg" width="33" height="31" viewBox="0 0 33 31" fill="none"><path d="M16.5 30L2.4 16.7C-1 13.3-0.6 7.6 3.3 4.7C7 2 11.8 3 14.5 5.5L16.5 7.5L18.5 5.5C21.2 3 26 2 29.7 4.7C33.6 7.6 34 13.3 30.6 16.7L16.5 30Z" stroke="currentColor" stroke-width="2"/></svg>
      <span class="like-btn__count">42</span>
    </button>
  </div>
</div>
Source: src/scss/components/_like-btn.scss, line 1

2.19 #Components.MemoryGame Memory Game

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Plansza gry memory z gradient blue background, stats bar (czas + ruchy), siatką 4×4 kart z animacją flip i shake. JS: src/js/modules/memory-game.js. BEM: .memory-board__*.

Example

Komponent interaktywny (gra). Podgląd: gra-memory.html

Markup: memory-game.html 
<!-- Memory Game: Informacja -->
<p style="color:#666;font-size:14px;">
  Komponent interaktywny (gra). Podgląd: 
  <a href="/gra-memory.html" target="_blank">gra-memory.html</a>
</p>
Source: src/scss/components/_memory-game.scss, line 1

2.20 #Components.Modal Modal

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Okno modalne z backdrop, grafiką (opcjonalną), tytułem, tekstem, wartością i przyciskami (confirm/cancel). Wariant modal--points z dużą liczbą

  • labelem. JS: Modal.show({...}). Stany: .is-active, .is-dismissing. Desktop: two-column layout (grafika + body). Scroll lock: .modal-open.
Example

Czy na pewno chcesz odebrać ten voucher?

Z Twojego konta zostanie pobrane:

500 punktów

Markup: modal.html 
<!-- Modal: statyczny podgląd (bez backdrop) -->
<div style="position:relative; background:#f5f5f1; padding:20px; border-radius:8px; max-width:500px;">
  <div class="modal" style="position:relative; transform:none; opacity:1; max-width:100%; border-radius:8px;">
    <button class="modal__close" aria-label="Zamknij"></button>
    <div class="modal__body" style="order:1;">
      <h2 class="modal__title">Czy na pewno chcesz odebrać ten voucher?</h2>
      <div class="modal__separator"></div>
      <p class="modal__text">Z Twojego konta zostanie pobrane:</p>
      <p class="modal__value">500 punktów</p>
      <div class="modal__actions">
        <button class="btn btn-primary">Odbierz</button>
        <button class="btn btn-secondary-positive">Anuluj</button>
      </div>
    </div>
  </div>
</div>

<button class="btn btn-primary"
  onclick="Modal.show({ image: '../assets/images/vouchers/voucher-decathlon.jpg', title: 'Czy na pewno chcesz odebrać ten voucher?', text: 'Z Twojego konta zostanie pobrane:', value: '500 punktów', confirmLabel: 'Odbierz', cancelLabel: 'Anuluj', onConfirm: function() { Toast.show({ title: 'Sukces!', text: 'Voucher odebrany.' }); } })">
  Otwórz Modal (pełny)
</button>

<button class="btn btn-primary"
  onclick="Modal.show({ image: '../assets/images/vouchers/voucher-decathlon.jpg', title: 'Gratulacje!', text: 'Twój voucher został aktywowany.', confirmLabel: 'OK' })">
  Otwórz Modal (1 button)
</button>

<button class="btn btn-primary"
  onclick="Modal.show({ title: 'Czy na pewno?', text: 'Tej operacji nie można cofnąć.', confirmLabel: 'Potwierdź', cancelLabel: 'Anuluj' })">
  Otwórz Modal (bez grafiki)
</button>

<button class="btn btn-primary"
  onclick="Modal.show({ variant: 'points', image: '../assets/images/own-it-card-big.jpg', pointsNumber: '235', pointsLabel: 'Punktów', text: 'Jan, kod został wprowadzony poprawnie!', value: '+ 15 PUNKTÓW', confirmLabel: 'Zamknij' })">
  Kod poprawny
</button>

<button class="btn btn-primary"
  onclick="Modal.show({ variant: 'points', image: '../assets/images/own-it-card-big.jpg', pointsNumber: '235', pointsLabel: 'Punktów', text: '&lt;strong&gt;Brawo!&lt;/strong&gt;<br/> Dodatkowe punkty wpadły na Twoje konto!', value: '+ 10 PUNKTÓW', confirmLabel: 'Zamknij' })">
  Brawo (dodatkowe)
</button>

<button class="btn btn-primary"
  onclick="Modal.show({ variant: 'points', image: '../assets/images/own-it-card-big.jpg', pointsNumber: '335', pointsLabel: 'Punktów', text: '&lt;strong&gt;Gratulacje!&lt;/strong&gt;<br/><br/> Twój znajomy pomyślnie zarejestrował się z&amp;nbsp;linku polecającego, otrzymujesz punkty lojalnościowe:', value: '+ 100 PUNKTÓW', confirmLabel: 'Wyślij kolejne zaproszenie', cancelLabel: 'Zamknij' })">
  Zaproszenie
</button>

<button class="btn btn-primary"
  onclick="Modal.show({ image: '../assets/images/vouchers/voucher-decathlon.jpg', title: 'Gratulacje, voucher jest Twój!', text: 'Nagroda została wysłana na Twoją skrzynkę e-mail.', confirmLabel: 'Zobacz voucher' })">
  Gratulacje
</button>

<button class="btn btn-primary"
  onclick="Modal.show({ image: '../assets/images/vouchers/voucher-decathlon.jpg', title: 'Wykorzystałeś swój limit miesięczny', text: 'Pamiętaj, że możesz wymienić punkty na &lt;strong&gt;1 voucher w&nbsp;ciągu miesiąca&lt;/strong&gt;.', confirmLabel: 'Zamknij' })">
  Limit miesięczny
</button>

<button class="btn btn-primary"
  onclick="Modal.show({ image: '../assets/images/vouchers/voucher-decathlon.jpg', title: 'Wykorzystałeś swój limit roczny', text: 'Pamiętaj, że możesz odebrać do &lt;strong&gt;6 voucherów w&nbsp;ciągu roku&lt;/strong&gt;.', confirmLabel: 'Zamknij' })">
  Limit roczny
</button>

<button class="btn btn-primary"
  onclick="Modal.show({ image: '../assets/images/vouchers/voucher-decathlon.jpg', title: 'Nie masz wystarczającej ilości punktów', text: 'Rejestruj kody z&nbsp;paczek i&nbsp;zdobądź punkty, aby odebrać ten voucher.', confirmLabel: 'Dodaj nowy kod', cancelLabel: 'Anuluj' })">
  Brak punktów
</button>
Source: src/scss/components/_modal.scss, line 1

2.21 #Components.ModelViewer Model Viewer

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sekcja 3D model viewer z kontenerami, hotspotami i kontrolkami. Wymaga biblioteki model-viewer. Placeholder image fallback.

Example

Komponent model-viewer wymaga biblioteki 3D. Podgląd: strony produktowe.

Markup: model-viewer.html 
<p style="color:#999; font-style:italic; padding: 20px;">Komponent model-viewer wymaga biblioteki 3D. Podgląd: strony produktowe.</p>
Source: src/scss/components/_model-viewer.scss, line 1

2.22 #Components.Navbar Navbar

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Główna nawigacja – sticky header z logo, linkami, dropdowns, points badge, profile toggle. Domyślne tło: Camel Yellow. Wariant .navbar--negative (przezroczyste tło, biały tekst na ciemnym hero). Stan .navbar--scrolled (JS, po 30% vh – slide-in z position:fixed). Mobile overlay: .mobile-nav z animacją stagger. Desktop megamenu. JS: src/js/modules/navbar.js.

Examples
Default styling

Złożony komponent (sticky header + mobile overlay + megamenu). Widoczny na każdej podstronie. Podgląd: index.html

.navbar--negative
Przezroczyste tło, biały tekst (na ciemnym hero)

Złożony komponent (sticky header + mobile overlay + megamenu). Widoczny na każdej podstronie. Podgląd: index.html

Markup: navbar.html 
<!-- Navbar: Informacja -->
<p style="color:#666;font-size:14px;">
  Złożony komponent (sticky header + mobile overlay + megamenu).
  Widoczny na każdej podstronie. Podgląd: 
  <a href="/index.html" target="_blank">index.html</a>
</p>
Source: src/scss/components/_navbar.scss, line 1

2.23 #Components.Onboarding Onboarding

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Wieloekranowy modal onboardingowy (fullscreen mobile / panel desktop). Background crossfade, gradient overlay, close button, kroki z opisami, kartami info, SVG animated text, progress bar, CTA. JS: Onboarding.show(). Stany: .is-active, .is-dismissing. Scroll lock: .onboarding-open.

Example

Komponent interaktywny (wieloekranowy wizard). Triggered via JS: Onboarding.show().

Markup: onboarding.html 
<!-- Onboarding: Informacja -->
<p style="color:#666;font-size:14px;">
  Komponent interaktywny (wieloekranowy wizard). 
  Triggered via JS: <code>Onboarding.show()</code>.
</p>
Source: src/scss/components/_onboarding.scss, line 1

2.24 #Components.PlayButton Play Button

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Okrągły przycisk play z ikoną chevron. Biały circle, brand icon. Dwa rozmiary: domyślny (40px), .play-btn-sm (30px).

Examples
Default styling
.play-btn-sm
Mniejszy (30px)
:disabled
Wyłączony (50% opacity)
Markup: play-button.html 
<div style="display: flex; gap: 24px; align-items: center; background: #0f172a; padding: 30px; border-radius: 8px;">
  <button class="play-btn" aria-label="Play video"></button>
  <button class="play-btn play-btn-sm" aria-label="Play video small"></button>
  <button class="play-btn" disabled aria-label="Play disabled"></button>
</div>
Source: src/scss/components/_play-button.scss, line 1

2.25 #Components.ProductCard Product Card

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Karta produktowa z packshotem (absolute), nazwą, opisem i CTA. Hover (desktop): packshot zoom out, button fade-in. Kolory per produkt: --red, --green, --pink.

Examples
Default styling

Komponent product-card wymaga packshotów produktowych. Podgląd: products.html

.product-card--new
Z badge "Nowość"

Komponent product-card wymaga packshotów produktowych. Podgląd: products.html

.product-card--red
Kolor czerwony

Komponent product-card wymaga packshotów produktowych. Podgląd: products.html

.product-card--green
Kolor zielony

Komponent product-card wymaga packshotów produktowych. Podgląd: products.html

.product-card--pink
Kolor różowy

Komponent product-card wymaga packshotów produktowych. Podgląd: products.html

Markup: product-card.html 
<p style="color:#999; font-style:italic; padding: 20px;">Komponent product-card wymaga packshotów produktowych. Podgląd: <a href="../products.html">products.html</a></p>
Source: src/scss/components/_product-card.scss, line 1

2.26 #Components.ProductFilter Product Filter

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Filtrowanie produktów: desktop – chip grid w grupach; mobile – przycisk trigger z badge, aktywne tagi, modal z listą chipów. JS: src/js/modules/product-filter.js.

Example

Komponent filtrowania z chipami, tagami i modalem mobile. Podgląd: swiat-zapachow.html

Markup: product-filter.html 
<!-- Product Filter: Informacja -->
<p style="color:#666;font-size:14px;">
  Komponent filtrowania z chipami, tagami i modalem mobile.
  Podgląd: <a href="/swiat-zapachow.html" target="_blank">swiat-zapachow.html</a>
</p>
Source: src/scss/components/_product-filter.scss, line 1

2.27 #Components.ProductNav Product Nav

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Carousel nawigacji produktowej z miniaturkami packshotów. Strzałki prev/next, scrollable items.

Example

Komponent product-nav wymaga packshotów. Podgląd: products.html

Markup: product-nav.html 
<p style="color:#999; font-style:italic; padding: 20px;">Komponent product-nav wymaga packshotów. Podgląd: <a href="../products.html">products.html</a></p>
Source: src/scss/components/_product-nav.scss, line 1

2.28 #Components.ProfilPointsCard Profil Points Card

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Karta punktów profilowych z opisem, monetą i licznikiem (wartość + separator + info). Wariant: .profil-card--points. Używany na: moj-profil, zdobyte-punkty.

Example

Komponent profil-points-card wymaga kontekstu profilu. Podgląd: moj-profil.html

Markup: profil-points-card.html 
<p style="color:#999; font-style:italic; padding: 20px;">Komponent profil-points-card wymaga kontekstu profilu. Podgląd: <a href="../moj-profil.html">moj-profil.html</a></p>
Source: src/scss/components/_profil-points-card.scss, line 1

2.29 #Components.ProgressBar Progress Bar

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Pasek postępu z animacją fill, tytułem, podtytułem i opisem. JS: src/js/modules/progress-bar.js — viewport animation, auto-text.

Examples
Default styling

Postęp odblokowania nagrody

3 / 6 odebranych voucherów

Odbierz 6 voucherów, aby odblokować nagrodę specjalną.

Nagroda specjalna odblokowana!

6 / 6 odebranych voucherów

Gratulacje!

.progress-bar--success
Wariant sukcesu (złote tło, pomarańczowy fill, burst + iskierki)

Postęp odblokowania nagrody

3 / 6 odebranych voucherów

Odbierz 6 voucherów, aby odblokować nagrodę specjalną.

Nagroda specjalna odblokowana!

6 / 6 odebranych voucherów

Gratulacje!

.progress-bar--animated
Animacja width (dodawana przez JS)

Postęp odblokowania nagrody

3 / 6 odebranych voucherów

Odbierz 6 voucherów, aby odblokować nagrodę specjalną.

Nagroda specjalna odblokowana!

6 / 6 odebranych voucherów

Gratulacje!

Markup: progress-bar.html 
<div style="display: flex; flex-direction: column; gap: 24px; max-width: 600px;">
  <div class="progress-bar progress-bar--animated" style="--progress: 50%;">
    <p class="progress-bar__title">Postęp odblokowania nagrody</p>
    <p class="progress-bar__subtitle">3 / 6 odebranych voucherów</p>
    <div class="progress-bar__track">
      <div class="progress-bar__fill" style="width: 50%;"></div>
    </div>
    <p class="progress-bar__desc">Odbierz 6 voucherów, aby odblokować nagrodę specjalną.</p>
  </div>
  <div class="progress-bar progress-bar--success progress-bar--animated" style="--progress: 100%;">
    <p class="progress-bar__title">Nagroda specjalna odblokowana!</p>
    <p class="progress-bar__subtitle">6 / 6 odebranych voucherów</p>
    <div class="progress-bar__track">
      <div class="progress-bar__fill" style="width: 100%;"></div>
    </div>
    <p class="progress-bar__desc">Gratulacje!</p>
  </div>
</div>
Source: src/scss/components/_progress-bar.scss, line 1

2.30 #Components.ProgressCounter Progress Counter

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Licznik postępu z etykietą i wartością (np. "0/6"). Używany na: vouchers, odebrane-nagrody.

Example
Odebrane vouchery
3/6
Nagroda specjalna
0/1
Markup: progress-counter.html 
<div class="progress-counter">
  <div class="progress-counter__row">
    <span class="progress-counter__label">Odebrane vouchery</span>
    <div class="progress-counter__value"><span>3/6</span></div>
  </div>
  <div class="progress-counter__row">
    <span class="progress-counter__label">Nagroda specjalna</span>
    <div class="progress-counter__value"><span>0/1</span></div>
  </div>
</div>
Source: src/scss/components/_progress-counter.scss, line 1

2.31 #Components.RadioInput Radio Input

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Niestandardowy radio z ukrytym natywnym inputem i okrągłym indicatorem. Stany: checked, disabled, error, blocked, focus.

Examples
Default styling
.radio-input--error
Border czerwony (walidacja)
.radio-input--blocked
Zablokowany (szary, wybrany, nie do odhaczenia)
Markup: radio-input.html 
<div style="display: flex; gap: 24px; flex-wrap: wrap;">
  <label class="radio-input">
    <input type="radio" class="radio-input__control" name="demo" />
    <span class="radio-input__indicator"></span>
    <span class="radio-input__label">Default</span>
  </label>
  <label class="radio-input">
    <input type="radio" class="radio-input__control" name="demo" checked />
    <span class="radio-input__indicator"></span>
    <span class="radio-input__label">Selected</span>
  </label>
  <label class="radio-input">
    <input type="radio" class="radio-input__control" name="demo2" disabled />
    <span class="radio-input__indicator"></span>
    <span class="radio-input__label">Disabled</span>
  </label>
  <label class="radio-input radio-input--error">
    <input type="radio" class="radio-input__control" name="demo3" />
    <span class="radio-input__indicator"></span>
    <span class="radio-input__label">Error</span>
  </label>
  <label class="radio-input radio-input--blocked">
    <input type="radio" class="radio-input__control" name="demo4" checked />
    <span class="radio-input__indicator"></span>
    <span class="radio-input__label">Blocked</span>
  </label>
</div>
Source: src/scss/components/_radio-input.scss, line 1

2.32 #Components.ReferralLink Referral Link

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

CTA sekcja "Twój link polecający" z tłem (image), overlay gradient, odznaki nagród, tytuł + opis + formularz (text-input + button).

Example

Komponent referral-link wymaga obrazów tła i badge. Podgląd: win-club-polecaj-znajomym.html

Markup: referral-link.html 
<p style="color:#999; font-style:italic; padding: 20px;">Komponent referral-link wymaga obrazów tła i badge. Podgląd: <a href="../win-club-polecaj-znajomym.html">win-club-polecaj-znajomym.html</a></p>
Source: src/scss/components/_referral-link.scss, line 1

2.33 #Components.SliderHistory Slider History

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Slider historii z osią czasu lat, zdjęciami i opisami. Desktop: paginacja lat (tabs) + slide (zdjęcie z gradient overlay i tekstem). Mobile: kolumna (data + opis nad zdjęciem), kropkowa paginacja, strzałki nawigacji. JS: src/js/modules/slider-history.js.

Example

Komponent interaktywny – slider historii marki. Podgląd: historia-winston.html

Markup: slider-history.html 
<!-- Slider History: Informacja -->
<p style="color:#666;font-size:14px;">
  Komponent interaktywny – slider historii marki.
  Podgląd: <a href="/historia-winston.html" target="_blank">historia-winston.html</a>
</p>
Source: src/scss/components/_slider-history.scss, line 1

2.34 #Components.TextInput Text Input

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Pole tekstowe z label, helper text, ikony (left/right). Stany: empty, disabled, locked, locked-edit, error. Wariant textarea.

Examples
Default styling
Pole jest wymagane
.text-input--disabled
Wyłączony (20% opacity)
Pole jest wymagane
.text-input--locked
Read-only (szare tło, brak bordera)
Pole jest wymagane
.text-input--locked-edit
Locked + link "Edytuj"
Pole jest wymagane
.text-input--error
Czerwony border + helper text
Pole jest wymagane
Markup: text-input.html 
<div style="display: flex; flex-direction: column; gap: 24px; max-width: 460px;">
  <div class="text-input">
    <label class="text-input__label">Default</label>
    <div class="text-input__body">
      <input class="text-input__field" placeholder="Wpisz tekst..." />
    </div>
  </div>
  <div class="text-input text-input--error">
    <label class="text-input__label">Error</label>
    <div class="text-input__body">
      <input class="text-input__field" value="Błędna wartość" />
    </div>
    <div class="text-input__helper">
      <span class="text-input__helper-text">Pole jest wymagane</span>
    </div>
  </div>
  <div class="text-input text-input--disabled">
    <label class="text-input__label">Disabled</label>
    <div class="text-input__body">
      <input class="text-input__field" value="Wyłączony" disabled />
    </div>
  </div>
  <div class="text-input text-input--locked">
    <label class="text-input__label">Locked</label>
    <div class="text-input__body">
      <input class="text-input__field" value="jan.kowalski@email.com" readonly />
    </div>
  </div>
</div>
Source: src/scss/components/_text-input.scss, line 1

2.35 #Components.Toast Toast

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Powiadomienie fixed na dole ekranu (mobile) / prawy dół (desktop). JS: Toast.show({ title, text, duration }). Animacja slide-in/out.

Example

+2 Punkty Win

Brawo! Zdobywasz 2 Punkty Win!

Markup: toast.html 
<div style="position: relative; height: 120px; background: #f5f5f1; border-radius: 8px; overflow: hidden;">
  <div class="toast" style="position: absolute; display: block; pointer-events: auto; bottom: 12px; left: 10px; right: 10px; transform: none;">
    <div class="toast__inner">
      <span class="toast__icon"></span>
      <div class="toast__content">
        <p class="toast__title">+2 Punkty Win</p>
        <p class="toast__text">Brawo! Zdobywasz <strong>2 Punkty Win</strong>!</p>
      </div>
    </div>
  </div>
</div>
Source: src/scss/components/_toast.scss, line 1

2.36 #Components.Tutorial Tutorial

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Guided tour (samouczek). Backdrop + spotlight na element docelowy + dialog (intro / step / centered). Strzałki nawigacji, counter „1/3", CTA na ostatnim kroku. JS: Tutorial.start({…}).

Example

Komponent interaktywny – guided tour z podświetleniem elementów. JS: Tutorial.start({…}).

Markup: tutorial.html 
<!-- Tutorial: Informacja -->
<p style="color:#666;font-size:14px;">
  Komponent interaktywny – guided tour z podświetleniem elementów.
  JS: <code>Tutorial.start({…})</code>.
</p>
Source: src/scss/components/_tutorial.scss, line 1

2.37 #Components.VoucherCard Voucher Card

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Karta vouchera z obrazkiem, tytułem, punktami i CTA. Hover (desktop): bg ciemnieje, tytuł zmniejsza się, btn fade-in. Mobile: CTA zawsze widoczny, stała pozycja.

Examples
Default styling

Komponent voucher-card wymaga obrazków voucherów. Podgląd: vouchers.html

.voucher-card--disabled
Szary, brak interakcji, overlay na obrazie

Komponent voucher-card wymaga obrazków voucherów. Podgląd: vouchers.html

.voucher-card--disabled-special
Z badge "NIEDOSTĘPNY" i ikoną kłódki

Komponent voucher-card wymaga obrazków voucherów. Podgląd: vouchers.html

Markup: voucher-card.html 
<p style="color:#999; font-style:italic; padding: 20px;">Komponent voucher-card wymaga obrazków voucherów. Podgląd: <a href="../vouchers.html">vouchers.html</a></p>
Source: src/scss/components/_voucher-card.scss, line 1