WEEBSKY CODE PLACE

#1 PADDING

Ultimate-PADding-Size

				
					u-pad-s

				
					u-pad-m

				
					u-pad-l

Ultimate-PADding-TopBottom-Size

				
					u-pad-s

				
					u-pad-m

				
					u-pad-l

Ultimate-PADding-Top or Bottom-Size

				
					u-pad-t-s

				
					u-pad-t-m

				
					u-pad-t-l

				
					u-pad-b-s

				
					u-pad-b-m

				
					u-pad-b-l

#2 BUTTON

Button-COLLORS

				
					btn-accent

				
					btn-accent-2

				
					btn-light

				
					btn-dark

				
					btn-outline-dark

				
					btn-outline-light

				
					btn-outline-accent

Button-COLLORS PILL

				
					btn-accent btn-pill

				
					btn-accent-2 btn-pill

				
					btn-light btn-pill

				
					btn-dark btn-pill

				
					btn-outline-dark btn-pill

				
					btn-outline-light btn-pill

				
					btn-outline-accent btn-pill

Button-COLLORS SQUARE

				
					btn-accent btn-square

				
					btn-accent-2 btn-square

				
					btn-light btn-square

				
					btn-dark btn-square

				
					btn-outline-dark btn-square

				
					btn-outline-light btn-square

				
					btn-outline-accent btn-square

Button-COLLORS SOFT

				
					btn-accent btn-soft

				
					btn-accent-2 btn-soft

				
					btn-light btn-soft

				
					btn-dark btn-soft

				
					btn-outline-dark btn-soft

				
					btn-outline-light btn-soft

				
					btn-outline-accent btn-soft

Button-SHAPES

				
					btn-square

				
					btn-soft

				
					btn-pill

#2 EFFECTS

SHADOWS

				
					shadow-1

				
					shadow-2

				
					shadow-3

				
					shadow-3

HOVER

				
					hover-lift

GLASS

				
					glass-1

				
					glass-2

				
					glass-3

				
					glass-4

				
					glass-5

				
					glass-6

RADIUS

				
					hover-lift

RAFRENT — Utility Classes

Szybka ściąga klas CSS. Kliknij „Kopiuj” i wklej klasę bezpośrednio do Elementora.

Responsive Radius

radius-s

Mały radius.
Około 10px mobile → 16px desktop.
Drobne karty, zdjęcia, wewnętrzne boxy.

radius-m

Średni radius.
Około 14px mobile → 26px desktop.
Standardowe karty i kontenery.

radius-l

Duży radius.
Około 18px mobile → 36px desktop.
Duże karty, FAQ, sekcje ofertowe.

radius-xl

Największy standardowy radius.
Około 22px mobile → 46px desktop.
Duże wrappery i miękkie sekcje.

radius-pill

Pełna kapsuła.
Badge, tagi, małe CTA i elementy typu pill.

radius-nested

Zewnętrzny radius dla nested layoutu.
Automatycznie uwzględnia radius-l + responsywny u-pad-s.

Desktopowa skala radiusów dąży do 16 → 26 → 36 → 46. Na mobile wartości automatycznie maleją.

Max Width

max-w-s

Max 480px.
Formularze, krótkie komunikaty, wąskie boxy.

max-w-m

Max 720px.
FAQ, formularze, bloki tekstowe.

max-w-l

Max 960px.
Szersze treści i większe kontenery.

max-w-xl

Max 1200px.
Duże sekcje i wrappery.

max-w-text

Max 68ch.
Dłuższe teksty i opisy bez kilometrowych linii.

Typography

text-balance

Do headingów.
Ładniej rozkłada nagłówek pomiędzy linie.

text-pretty

Do tekstów.
Poprawia naturalne łamanie akapitów.

Line Clamp

line-1

Maksymalnie 1 linia tekstu.

line-2

Maksymalnie 2 linie tekstu.

line-3

Maksymalnie 3 linie. Idealne do listingów.

Images

img-cover

Wypełnia cały obszar zdjęciem.
Może przycinać kadr.

img-contain

Pokazuje całe zdjęcie bez przycinania.

Image Ratios

ratio-square

1:1

ratio-4-3

4:3. Uniwersalny format zdjęć sprzętu.

ratio-3-2

3:2. Klasyczny format fotograficzny.

ratio-16-9

16:9. Bannery, video, szerokie zdjęcia.

ratio-portrait

4:5. Pionowe karty i fotografie.

Overflow

overflow-hidden

Ukrywa wszystko wychodzące poza obrys.
Przydatne do radiusów i zoomu zdjęć.

overflow-visible

Pozwala elementom wychodzić poza kontener.

Hover Effects

hover-lift

Lekko unosi element po najechaniu.

hover-scale

Delikatnie powiększa cały element.

hover-image

Zoomuje zdjęcie znajdujące się wewnątrz elementu.

hover-glow

Dodaje subtelny pomarańczowy glow RAFRENT.

FAQ

faq-rr

Gotowy preset RAFRENT dla Accordion / Nested Accordion.
Radius, odstępy, border, hover i orange active state.

Gotowe składaki

radius-l shadow-1 hover-lift

Standardowa karta
Duży radius + subtelny cień + lekkie podniesienie.

ratio-4-3 img-cover radius-l hover-image

Zdjęcie sprzętu
Stała proporcja + crop + radius + zoom hover.

line-3 text-pretty

Opis produktu
Maksymalnie trzy linie i ładniejsze łamanie tekstu.

text-balance

Nagłówek
Automatyczne balansowanie linii.

radius-l overflow-hidden shadow-1 hover-lift

Miękka karta
Gotowy zestaw pod typową kartę ofertową.

u-pad-s radius-nested

Nested wrapper
Zewnętrzny kontener pod wewnętrzny element z radius-l.