1. Section Heading (webstroke/section-heading)

Wariant 1 — lewy, akcent sage, komplet pól

Domyślne wyrównanie do lewej, poziom H2. Wypełnione wszystkie trzy pola: eyebrow, nagłówek i lead. Akcent sage koloruje tylko kreskę nad eyebrow.

Wariant 2 — wyśrodkowany, akcent gold, poziom H3

Wyrównanie do środka (align: center) — kreska akcentu i lead też są centrowane. Akcent gold.

Wariant 3 — akcent navy, bez leadu

Nagłówek z eyebrow, ale bez akapitu wprowadzającego. Akcent navy — stosowany w sekcjach trychologicznych.

Wariant 4 — sam tytuł, poziom H4

Minimalna konfiguracja: tylko nagłówek, poziom obniżony do H4 (kontrolka „Heading level”). Bez eyebrow i bez leadu kreska akcentu się nie pojawia.

2. Image Placeholder (webstroke/image-placeholder)

Wariant 1 — placeholder, ramka editorial, dekor, 4:5

Bez wybranego obrazu blok renderuje placeholder z etykietą. Ramka editorial (przesunięte tło + kreska), włączony decor, proporcja 4:5, akcent gold.

Wariant 2 — placeholder, kwadrat 1:1, akcent sage

Ta sama ramka editorial, ale proporcja kwadratowa i akcent sage; bez dekoru narożnego.

Wariant 3 — ramka flat, 16:9, własna etykieta

Ramka flat (bez przesunięcia tła) i własny tekst etykiety placeholdera zamiast domyślnego.

Wariant 4 — realny obraz z biblioteki, 16:9

Po wybraniu obrazu blok renderuje wp_get_attachment_image() — srcset, lazy-loading i wymiary pochodzą z rdzenia WP. Proporcję nadal wymusza blok.

Wariant 5 — realny obraz, ramka editorial + dekor, 3:4

Ten sam obraz w ramce editorial z dekorem — wersja używana w sekcjach „o gabinecie”.

3. Split Block (webstroke/split-block)

Wariant 1 — split, obraz po lewej (domyślny)

Układ dwukolumnowy: obraz po lewej, tekst po prawej. Body to RichText wieloakapitowy, akcent gold koloruje kreskę przy eyebrow.

Wariant 2 — split odwrócony (reverse), bez obrazu

Przełącznik reverse zamienia kolumny miejscami (obraz ląduje po prawej). Bez wybranego obrazu kolumna pokazuje placeholder z etykietą — tak jak w bloku Image Placeholder.

Wariant 3 — split, akcent navy, proporcja 1:1

Wariant trychologiczny: akcent navy i kwadratowa proporcja obrazu zamiast domyślnej 4:5. Bez eyebrow.

Wariant 4 — mutacja „quote”

Zmiana atrybutu variant na quote przełącza blok w tryb cytatu: znika układ dwukolumnowy, pojawia się wyróżniony cytat z podpisem autora.

4. Trust Bar (webstroke/trust-bar)

Wariant 1 — akcent gold, 4 pozycje (domyślny)

Pasek zaufania na całą szerokość (align: full) z cytatem i repeaterem czterech pozycji (kicker / tytuł / detal).

Wariant 2 — akcent sage, 3 pozycje i własny cytat

Repeater przyjmuje dowolną liczbę pozycji — tu trzy. Zmieniony cytat i akcent sage (kolor kresek separujących kolumny).

5. Treatment Card (webstroke/treatment-card)

Wariant 1 — karta z linkiem (renderowana jako <a>)

Ustawiony adres URL sprawia, że cała karta jest klikalna — blok renderuje się jako element <a> ze strzałką i stanem hover.

Wariant 2 — akcent navy, inna treść

Ten sam układ w wersji trychologicznej: akcent navy koloruje strzałkę i kreskę.

Wariant 3 — z numerem porządkowym

Przełącznik showIndex pokazuje numer karty — używany w listach zabiegów.

Wariant 4 — bez linku (renderowana jako <div>)

Pusty adres URL: blok renderuje <div> zamiast <a> — karta przestaje być klikalna i traci stan hover (strzałka pozostaje elementem dekoracyjnym).

6. CTA Contact (webstroke/cta-contact)

Wariant 1 — „full”, akcent gold (domyślny)

Pełna sekcja kontaktowa ze zdjęciem tła i przyciskami akcji. Numer telefonu, e-mail i etykiety pochodzą z opcji motywu (ACF), nie z pól bloku.

Wariant 2 — „full”, akcent sage, inne zdjęcie

Ta sama mutacja z innym akcentem i innym obrazem — zmienia się kolor obramowania i przycisku pomocniczego.

Wariant 3 — „full”, akcent navy, własny podtytuł

Wersja dla sekcji trychologicznych: własny nagłówek i podtytuł, akcent navy.

Wariant 4 — mutacja „bar”

Atrybut variant = bar: kompaktowy pasek bez zdjęcia, do wstawiania pomiędzy sekcjami treści. Dane kontaktowe nadal z opcji motywu.

7. Expert Section (webstroke/expert-section)

Wariant 1 — akcent gold, bez zdjęcia (placeholder), z badge CRGT

Sekcja eksperta z bio, repeaterem kompetencji i CTA. Bez wybranego zdjęcia kolumna pokazuje placeholder. Badge CRGT bierze treść z opcji motywu.

Wariant 2 — akcent sage, portret z biblioteki

Ten sam blok z prawdziwym portretem. Akcent sage koloruje checkboxy przy liście kompetencji.

Wariant 3 — akcent navy, bez badge, skrócona lista

Wyłączony przełącznik showBadge (znika plakietka CRGT), inna osoba i krótsza lista kompetencji — układ dla podstrony zespołu.

8. Problem To Treatment (webstroke/problem-to-treatment)

Wariant 1 — akcent sage, wiersze bez linków (domyślny)

Tabela „problem → zabieg”. Bez adresów URL wiersze renderują się jako <div> — są statyczne, bez stanu hover.

Wariant 2 — akcent navy, wiersze z linkami

Każdy wiersz repeatera ma własny adres URL, więc renderuje się jako link ze strzałką. Akcent navy.

Wariant 3 — akcent gold, dwa wiersze

Repeater przyjmuje dowolną liczbę wierszy — tu skrócony do dwóch, z linkami do podstron zabiegów.

9. Empty State (webstroke/empty-state)

Wariant 1 — ikona „images”, bez CTA (domyślny)

Stan pusty dla sekcji, która nie ma jeszcze treści. Bez etykiety CTA przycisk się nie renderuje.

Wariant 2 — ikona „image”, CTA otwierany w nowej karcie

Link zewnętrzny z zaznaczoną opcją „otwórz w nowej karcie” — w HTML pojawia się target="_blank" i rel="noopener noreferrer".

Wariant 3 — ikona „quote”, sekcja opinii

Zmieniona ikona i treść — ten sam blok obsługuje pustą galerię, puste opinie i pusty cennik.

Wariant 4 — bez ikony

Wartość none dla ikony: zostaje sam nagłówek, tekst i CTA — wersja używana w cenniku.

10. Simple Hero (webstroke/simple-hero)

Wariant 1 — akcent neutral, obraz 1:1, z CTA

Hero podstron: eyebrow, tytuł, claim i przycisk, obok kolumna obrazu w proporcji 1:1. Poziom nagłówka ustawiony na H3 (na tej stronie H1 jest już zajęty).

Wariant 2 — akcent sage, bez obrazu i bez CTA

Bez wybranego obrazu kolumna renderuje placeholder z etykietą; brak etykiety CTA usuwa przycisk.

Wariant 3 — akcent navy, obraz 4:5 (domyślny)

Domyślna proporcja obrazu 4:5 i akcent navy; CTA prowadzi do podstrony „O nas”.

Wariant 4 — sam tytuł

Minimalna konfiguracja: tytuł bez eyebrow, claimu i CTA — nagłówek prostej podstrony.

11. Dual Path Hero (webstroke/dual-path-hero)

Wariant 1 — zdjęcie w tle (parallax), dwie ścieżki

Hero strony głównej na całą szerokość. Tło przewija się z efektem parallax (jedyny front-JS obok Before/After, wyłączany przy prefers-reduced-motion). Karty ścieżek mają własne ikony i akcenty; pierwsza jest linkiem, druga nie.

Wariant 2 — bez zdjęcia (gradient), trzy ścieżki

Puste imageId przełącza tło na gradientowy fallback. Repeater nie jest ograniczony do dwóch pozycji — tu trzy karty z ikonami droplet, scan-face i heart oraz jednym CTA.

12. Before / After (webstroke/before-after)

Wariant 1 — para zdjęć, domyślne etykiety, start 50%

Suwak porównania przeciągany myszą, palcem i strzałkami klawiatury (role="slider"). Bez JS działa jako statyczne porównanie w pozycji startowej.

Wariant 2 — akcent navy, własne etykiety, start 25%

Zmienione etykiety warstw oraz pozycja startowa suwaka (startPosition = 25). Akcent koloruje wyłącznie obrys fokusa uchwytu.

Wariant 3 — stan pusty (brak pary zdjęć)

Gdy brakuje któregokolwiek z dwóch obrazów, blok renderuje stan pusty z własną etykietą zamiast zepsutego suwaka.

13. FAQ (webstroke/faq)

Wariant 1 — akcent gold, JSON-LD włączony (domyślny)

Akordeon na natywnych <details>/<summary> — zero front-JS, pozycje wykluczają się wzajemnie. Włączony przełącznik addSchema dokłada dane strukturalne FAQPage.

Wariant 2 — akcent sage, dwie pozycje

Ten sam blok z krótszą listą i akcentem sage (kolor chevronu). Dane strukturalne nadal włączone.

Wariant 3 — akcent navy, JSON-LD wyłączony, formatowanie w odpowiedzi

Wyłączony addSchema (żeby nie dublować danych strukturalnych, gdy na stronie jest kilka FAQ) oraz odpowiedzi z pogrubieniami — RichText dopuszcza inline HTML.