Layout záhlaví sekce

Šablona 11-section-layout — záhlaví speciální sekce (section-title + perex). Používá se typicky na úvodní stránce; zde pro kontrolu na obecné stránce.

Běžný odstavec pod sekčním záhlavím — kontrola mezer a pozadí třídy section.

Tlačítka (C2A)

Šablona call-to-action — velké primární tlačítko:

Nezávazná poptávka Zpět nahoru (běžná velikost)

Tlačítko v běžném odstavci: Kontakt — ověření inline vs. blokového chování.

Tabulky

Orámovaná tabulka (šablona / styl table table-bordered):

Ukázková datová tabulka — provozní doby
den v týdnu dopoledne odpoledne
Pondělí 8.00 – 12.00 13.00 – 17.00
Úterý 8.00 – 12.00 13.00 – 17.00
Středa dle domluvy
Čtvrtek 8.00 – 12.00 13.00 – 17.00
Pátek 8.00 – 12.00 —

Tabulka se střídáním řádků (table-striped):

služba orientační rozsah poznámka
Čištění krytiny 1–2 dny dle plochy
Nátěr / nástřik 1–3 dny včetně schnutí
Impregnace 1 den preventivní ochrana

Speciální bloky a stavy

Citace (blockquote) — typicky s uvozovkami a světlejší sazbou. „Kvalitní nátěr vydrží roky, pokud předtím správně připravíte podklad.“

Zvýrazněný blok (text-highlighted)

Podbarvený blok na celou šířku s ikonou. Uvnitř může být nadpis i odstavec s odkazem.

Extra zvýrazněný blok

Varianta text-highlighted--extra — silnější vizuální důraz.

50 %, vlevo

Obtékaný zprava na větších displejích (text-highlighted--floated-left).

Text vedle obtékaného bloku vlevo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Další odstavec pro delší obtékání: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

50 %, vpravo

Obtékaný zleva (text-highlighted--floated-right).

Text vedle obtékaného bloku vpravo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

Ještě jeden odstavec, aby bylo vidět obtékání až do konce. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.

Blok s extra odsazením

Obal content-pad — na mobilu spodní mezera, od sm výš větší padding. Hodí se u sloupců vedle sebe i pro vzdušnější jedno-sloupcový obsah.

ALERT primary — důležitá hláška v primární barvě.

ALERT secondary / red — varianta z editoru (alert-red).

ALERT primary-light — světlejší varianta (pokud je ve FE napojená).

Chybová zpráva (error) — typicky u formulářů / validace.

Seznamy

Nečíslovaný seznam (výchozí odrážky editoru):

  • Čištění taškových a šindelových střech
  • Ochranné nátěry eternitu a plechu
  • Lokální klempířské opravy
    • vložena podpoložka první
    • vložena podpoložka druhá
  • Práce z plošiny

Číslovaný seznam:

  1. Prohlídka a návrh postupu
  2. Příprava a čištění povrchu
  3. Aplikace nátěru / impregnace
  4. Kontrola a předání

Checklist vlevo (šablona WSW):

  • Položka checklistu zarovnaná vlevo
  • Druhá položka s delším textem pro ověření zalamování řádku vedle fajfky
  • Třetí položka

Checklist na střed (šablona WSW):

  • Centrovaná položka jedna
  • Centrovaná položka dvě — delší text
  • Centrovaná položka tři

Dlouhý text a inline formátování

První odstavec s běžným tokem textu. Renovace a nátěry střešních krytin prodlužují životnost střechy a zlepšují vzhled domu. Věta obsahuje tučné písmo, kurzívu, podtržení, přeškrtnutí a kombinaci tučné kurzívy.

Druhý odstavec potvrzuje mezeru mezi odstavci. Odkaz běžný: Kontakt. Odkaz označený jako externí: example.com. E-mailový odkaz: info@example.com.

Třetí odstavec — velikosti písma (inline): extra small, small, base / md, large, extra large. Dále element SMALL, klávesa Ctrl+S a citace inline dle dokumentace CMS.

Čtvrtý odstavec — sémantické barvy odstavců (celý odstavec níže) a ukázka badge štítků v textu: orange black grey red yellow green blue brown white.

Pátý odstavec — barevné zvýraznění textu (třídy z editoru; část může být ve FE zatím bez CSS mapování): základní, černá, brand red, brand yellow, šedá.

Odstavec text-muted — méně důležitý text.

Odstavec text-primary — primární barva.

Odstavec text-secondary — doplňková barva.

Odstavec text-info.

Odstavec text-success (O.K.).

Odstavec text-danger (ERROR).

Odstavec text-warning (WARNING).

Nadpisy a perex (section-title)

Perex pod nadpisem sekce — třída lead. Měl by být výraznější než běžný odstavec a vizuálně vázat se na nadpis výše.

Nadpis první úrovně (H1)

Odstavec hned pod H1. V nadpisu může být i tučný nebo kurzívní akcent (u H1/H2 se barva mění podle stylů tématu).

Nadpis druhé úrovně (H2)

Odstavec pod H2. Delší souvětí ověří řádkování a mezery mezi bloky: renovace střechy vyžaduje pečlivou přípravu povrchu i správnou volbu materiálu.

Nadpis třetí úrovně (H3)

Odstavec pod H3 — globálně sekundární barva (mimo specifické bloky jako theme-split).

Nadpis čtvrté úrovně (H4)

Odstavec pod H4.

Nadpis páté úrovně (H5)

Odstavec pod H5.

Nadpis šesté úrovně (H6)

Odstavec pod H6.

Display 1

Display 2

Display 3

Display 4

Display třídy zvětšují nadpis nad běžnou hierarchii H1–H6 (Bootstrap).

Tato stránka slouží k vizuální kontrole typografie a WSW formátování na obecné (ne-homepage) šabloně. Jednotlivé obsahové bloky níže pokrývají varianty, které jde v editoru naklikat — bez HP-specifických šablon (theme-split, vizitka).

Bloky mají kotvy v URL (např. #nadpisy). Po úpravách stylů obnovte stránku a projděte sekce shora dolů.