Svi blokovi na jednom mjestu
Ova stranica koristi hero na vrhu i svih osam tipova blokova — kao referenca pri sastavljanju stranica u CMS-u. Obrišite je u pravom projektu.
Blok: tekst
Ovo je richtext blok — običan Markdown koji se renderuje u proznu sekciju. Podržava naslove, podebljano, kurziv, linkove i liste:
- prva stavka
- druga stavka
- treća stavka
Kompaktni hero (sadržajna širina)
Isti hero blok, ali sa isključenom „punom širinom” — sužava se na širinu sadržaja i renderuje kao H2 (jer nije prvi na stranici).
Blok: kartice sa slikom
Druga fotografija
Sve kartice u redu dijele isti odnos stranica, bez obzira na dimenzije fajla.
Logotip (vektor)
SVG se uklapa u isti okvir — nikad se ne kadrira ni razvlači. Ovako se pravi red logotipa partnera.
Blok: podaci (brojevi)
300+
završenih projekata
12
godina iskustva
24/7
podrška — podatak ne mora biti broj, a ikona nije obavezna
Vodoravni podaci
150+
zadovoljnih klijenata u regionu
5
godina prosječne saradnje
Podaci na tamnoj traci
4
grada
98%
zadovoljnih klijenata
48h
prosječno vrijeme odgovora
Blok: novosti (blog)
Blok: tim
Ana Petrović
Kratka biografija — zamijenite je stvarnim opisom. Ana vodi tim i brine o tome da svaki projekat ispuni očekivanja klijenta.
Marko Jovanović
Ovaj profil nema fotografiju ni društvene mreže — pokazuje da su ta polja opciona (prikazuje se tinta-placeholder umjesto slike). Zamijenite tekst stvarnom biografijom.
Blok: kontejner (grid-2, alt pozadina)
Naslov sa prefiksom
Kontejner raspoređuje ugniježdene blokove u grid (ovdje grid-2), a pozadina „alt” ih blago izdvaja.
Blok: sekcija (grupisanje) + razdvajač
Sekcija samo grupiše (pozadina + značenje) — ne primjenjuje raspored. Za vertikalni razmak koristi se blok razdvajač (prazan razmak ili linija). Tekst i citat se automatski preboje na svijetlo (kontekstualne CSS varijable).
Citat na tamnoj pozadini — automatski tematizovan.
Blok: stack raspored (jedna kolona)
Stack je raspored kontejnera sa jednom kolonom — slaže blokove vertikalno sa doslednim razmakom (grid gutter). Raspored (dakle i razmak) je uvijek eksplicitan izbor.
Razdvajač i ovdje dodaje eksplicitnu liniju ili razmak — pola, normalno ili duplo.
Šta kažu klijenti
Izvanredna usluga od početka do kraja. Sve preporuke!
Profesionalno, brzo i tačno onako kako smo se dogovorili.
Blok: mediji (slike + video)
Blok: naslov (centriran)
Blok citat izdvaja jednu snažnu rečenicu ili preporuku.
Blok: reference (kartice stranica)
Blok: zajednički blok (ponovna upotreba)
Jednom napisano, svuda upotrijebljeno
Ova traka živi u kolekciji Blokovi — uređuje se na jednom mjestu, a blok „zajednički blok” je ubacuje na svaku stranicu koja je koristi. Promijeni je ovdje i mijenja se svuda.
Blok: paneli (harmonika)
Radi li bez JavaScripta?
Radi. Harmonika je nativni <details> element — otvara se i zatvara bez ijedne linije skripte, pa radi i dok se stranica još učitava, i kod posjetioca kojem skripta nije prošla.
Nalazi li pretraga stranice (Ctrl+F) tekst u zatvorenom panelu?
Nalazi — i sam otvori panel u kojem je tekst. Zato je harmonika podrazumijevani prikaz: sadržaj je stvarno na stranici, i za čitaoca i za pretraživač. Tabovi to ne mogu, jer je neaktivan panel sakriven.
Ovaj panel je „samo jedan otvoren“
Otvaranje jednog panela ovdje zatvara ostale (exclusive). Podrazumijevano je isključeno — panel koji se sam zatvori ispod prsta zna da iznenadi.
Odakle traka u boji?
Nije svojstvo panela — paneli stoje unutar kontejnera, a kontejner nosi pozadinu. Isti raspored, sa karticama unutar taba, vidi se u primjeru ispod.
Blok: paneli (tabovi)
Šta su tabovi
Tabovi su nadogradnja iste harmonike, a ne drugi blok. I ovdje je u HTML-u <details>; skripta ga pretvori u tablistu tek kad je blok dovoljno širok. Suzite prozor i ovaj blok se vraća u harmoniku — što je ono u šta su tabovi ionako morali da se pretvore na telefonu.
Panel drži blokove
Ovo je najdublji dozvoljeni raspored: traka u boji → tabovi → kontejner sa mrežom kartica. Panel nije polje za tekst — drži blokove, kao i svaka druga stranica.
Kartica u panelu
Kartica se ne razlikuje ni po čemu od kartice na stranici — isti blok, isti stil.
Mreža u panelu
Raspored bira kontejner, kao i svugdje: panel samo drži ono što ste u njega stavili.
Tastatura
Tablista je jedno mjesto u redoslijedu tabulatora; strelice lijevo/desno biraju tab, Home i End skaču na krajeve. To je WAI-ARIA obrazac za tabove — i jedini razlog zbog kojeg im uopšte treba skripta.
Blok poziva na akciju vodi posjetioca ka sljedećem koraku.
Zatraži ponuduBlok: kontakt forma
Isti kontakt blok kao na naslovnoj — pošalji poruku putem WhatsApp-a.