Knihovna bloků
Každý blok má vlastní stránku se všemi variantami vzorových dat a s JSON, ze kterého se vykresluje — to je datový kontrakt pro CMS. Sdílené prvky (tlačítko…) jsou v přehledu Komponenty.
-
Rozcestník témat
archive-signpost · light
Světlý box přes celý kontejner, uvnitř vycentrovaný titulek „Témata“ a pod ním zalamovací řádka tagů. Tag je obyčejný odkaz na filtrovaný výpis — blok sám nefiltruje. Klíč items[].active je odvozený stav (v CMS ho určí aktuální URL), ne obsah; vykreslí se jako aria-current="page" a žlutá výplň. Položka „Vše“ je běžná položka v datech. Týž blok stojí na výpisu Aktualit i na detailu článku, liší se jen mezerami sekce.
-
Text článku
article-content · full
Obsah detailu článku jako pole typovaných částí (content[]): html = volný text z editoru, image = fotka s popiskem, gallery = fotogalerie s lightboxem. Části se dají zamíchat v libovolném pořadí a v libovolném počtu. Blok nemá hlavičku sekce, badge, tlačítko ani drobečky — nadpisy jsou obsah z editoru a začínají h2 (h1 stránky je v article-header, editor h1 psát nesmí). Vzhled textu (nadpisy, odstavce, seznamy, tabulky) drží core/wysiwyg.css, blok řeší jen šířku sloupce 923, mezery mezi částmi, fotku s popiskem a galerii. Popisek fotky (caption) je prostý text, ne HTML — u části image se vypíše pod fotkou, u fotky v galerii jen v lightboxu. Volitelný image.ratio (např. 923 / 400) určuje poměr rámu fotky; width a height musí zůstat skutečné rozměry souboru. Část bez povinného klíče (html, image.src, photos[].src) se přeskočí, blok bez jediné platné části se nevykreslí vůbec. Sada fotek na výšku si u části gallery řekne o vlastní poměr hlavní fotky (ratio, např. "4 / 5") a klíčem size: "narrow" o užší rám 600 px místo 780.
-
Hlavička článku
article-header · light
Hlavička detailu článku — téma s linkou, titulek Display 53 s tučným akcentem, perex, datum s dobou čtení a velká fotka. Vše vycentrované, text v míře 925, fotka 1168. Blok nemá hlavičku sekce (žádný badge, žádné H2 sekce), žádné tlačítko ani drobečky. Titulek je HTML (<strong> = akcent), perex prostý text. Výchozí tag je h1 — na detailu článku je to hlavní nadpis; klíčem tag: "h2" jde snížit tam, kde h1 už na stránce je. Bez title se blok nevykreslí; bez fotky se vykreslí jen text. Datum i doba čtení jsou text, ne výpočet; datetime musí být strojový tvar (2026-03-12). Klíč settings.spacing_bottom: "none" patří k variantě s fotkou — ta v grafice sedí na spodní hraně bloku; bez fotky nechte spodní mezeru výchozí. Klíče topic, topicUrl, date, datetime, readingTime jsou schválně stejné jako v kartách článků na výpisu — je to týž článek viděný z druhé strany.
-
Výhody
benefits · light
Tmavá sekce s řadou výhod — žlutý kruh s ikonou, titulek a krátký text, sloupce oddělené svislou linkou. Bez hlavičky sekce a bez CTA. Ve Figmě se rám jmenuje „icons“. Počet položek je volný, doporučené 3–5. Klíč columns: 3 drží na XL tři sloupce místo pěti (skupina se zúží a vycentruje), columns: 4 čtyři přes celou šířku kontejneru, klíč icons: "large" přepne plátno glyfu na 48 pro ikony kreslené v této velikosti. Pozadí počítá s tmavým (podle grafiky) nebo světlým; žlutá varianta je jen obranně ošetřená, v grafice není.
-
Srovnávací tabulka
comparison-table · full
Tmavá sekce s fotkou na 10 % krytí, vycentrovanou hlavičkou a tabulkou vlastnost × 2–3 standardy; zvýrazněný sloupec leží na skle, fajfka / křížek místo textu.
-
Kontaktní CTA
contact-cta · light
Světlý box přes celou šířku obsahu: titulek, odstavec, telefon a e-mail ve žlutých čtvercích a CTA na sjednání schůzky. Kontakty se berou z globálního nastavení webu (_data/site.json → contact), blok jen vybírá klíčem `contacts`, které z nich vypsat. CTA míří na kotvu #schuzka, kterou globální anchors.ts otevře jako off-canvas formulář — klíč `modal` se tu nepoužívá. Sekce má poloviční svislé mezery (46 px), protože obsah nese box; pozadí je bílé. Varianta `title-above` (Postup při koupi) vytáhne titulek nad box a přidá volitelné jméno specialisty nad kontakty, které jsou pak pod sebou místo vedle sebe — přepíná ji klíč `titlePosition`. Klíč `person` je buď prosté jméno, nebo objekt { name, photo }: s fotkou (Vzorkovna) přibude vedle kontaktů portrét, který přesahuje nad horní hranu boxu. Fotku, jméno, kontakty i CTA vykresluje sdílená komponenta contact-person.
-
Seznam kontaktů
contact-list · full
Skupiny kontaktních osob pod sebou: titulek skupiny s linkou a mřížka karet (kulatá fotka, jméno, telefon, e-mail), 1 / 2 / 3 / 4 sloupce od 768 / 1024 / 1280 px. Kartu kreslí sdílená komponenta contact-person, řádky kontaktů components/contact-row. Osoba bez fotky dostane šedý kruh s ikonou. Varianta `single` je grafika doslova, `edge` hraniční stavy (dlouhé jméno a e-mail, osoba bez fotky / telefonu / e-mailu, skupina bez titulku; poslední dvě skupiny se nevypíšou).
-
CTA dlaždice
cta-tiles · light
Dvojice rozcestníkových dlaždic s videem na pozadí a skleněnou kartou: žlutá linka, titulek s tučným akcentem, podtitulek a žluté tlačítko. Klikatelná je celá dlaždice. Obsah je centrálně v _data/ctaTiles.json — blok vybírá klíčem ("lokality"), pro jednorázovou dlaždici jde místo klíče vložit rovnou objekt. Ve Figmě se rám jmenuje „Bannery“; v kódu se to slovo nepoužívá kvůli adblockům. Volitelný klíč `tag` (h2 / h3 / p, výchozí h2) mění úroveň nadpisu dlaždic pro stránku, kde by blok stál uvnitř jiné struktury. Sekce má poloviční svislé mezery (54 px) a bílé pozadí.
-
Karty ke stažení
download-cards · light
Mřížka karet se soubory ke stažení — karta má volitelný popisek, obrázek v nativní velikosti a dole box odznaků, kde každý odznak je jeden soubor. Karty jdou volitelně rozdělit do pojmenovaných skupin.
-
Ekologická opatření
eco-benefits · light
Tmavá sekce s fotkou na pozadí: vycentrovaná hlavička (badge + H2) a pod ní seznam opatření ve dvou sloupcích čtených po sloupcích. Položka je ikona v bílém kruhu a jednořádkový až dvouřádkový popisek; položky nemají titulek ani odkaz. Fotka na pozadí je dekorace (alt=""), bez ní zůstane tmavý přechod. Pod 768 px se sloupce skládají na jeden. ⚠ Fotka je v grafice bez ztmavení — při výměně za světlejší se pohlídá kontrast bílého textu.
-
Nadační fond
endowment-fund · full
Dvě půlky: vpravo textový sloupec fondu (logo → šedomodrá linka → titulek ve dvou řezech → perex → šedá poznámka, sdílené třídy `components/text-column`), vlevo dlaždice s fotkou pod světlým závojem, titulkem s vínovým akcentem a dárcovským panelem (QR platba, číslo účtu s tlačítkem Kopírovat, heslo). Pod 1024 px je textový sloupec nad dlaždicí. `note` je prostý šedý text, ne komponenta `note`. Volitelné `tile.video` (`{ set, poster? }`) nahradí fotku videem pod závojem. Povinný je `title`; dlaždice se vypíše jen s `tile.title`, dárcovský panel (je uvnitř dlaždice) jen s `donation.account`. Fotka dlaždice je dekorace (`alt` se nevypisuje). Ve Figmě spodní polovina rámu `image-rich-content` na Pomáháme.
-
Rozbalovací karusel projektů
expanding-card-carousel · full
Lišta s popiskem, linkou, počítadlem „01 / 05“ a dvěma šipkami; pod ní pás karet projektů s fotkou, pilulkou lokality, typem a názvem. Od 1280 px je jedna karta rozbalená (986 : 302) a klik na zavřenou kartu, šipky nebo klávesy ji přepnou, pás se neposouvá; šipky jsou ve smyčce. Pod 1280 px je z pásu Swiper se stejně širokými kartami.
-
Příklady financování
financing-examples · full
Přepínač dispozic — vlevo seznam bytů, vedle něj foto, cenový panel (cena, vlastní zdroje, žlutý box měsíční splátky) a CTA; pod obsahem poznámka s kolečkem „i“. Od 1024 px jsou položky ARIA taby a mění se obsah vedle seznamu, pod tím je z položek mřížka 2 × N (pagination) a z panelů carousel.
-
Hlavička sekce
headline · light
Samostatná sekce jen s hlavičkou — žlutý badge, titulek a perex. Obal nad sdílenou komponentou section-header; umí i dvousloupcovou variantu split (titulek vlevo, perex vpravo); klíč columns: "even" v ní přepne sloupce z výchozích 566 : 808 na rovnoměrné 1 : 1. Varianta default má vypnutý spodní padding, protože na Přehledu lokalit mezeru dorovnává následující blok — v knihovně proto vypadá zespodu nalepená.
-
Hero
hero · full
Úvodní blok stránky: celoplošné video nebo foto, skleněná karta se žlutou linkou, titulkem s akcentem, perexem a tlačítkem. Hlavička webu leží přes něj. Volitelné klíče media.overlay (navy / dark / none — barva a tvar ztmavení přes médium; bez klíče platí navy) a media.overlayStrength (soft 40 % / strong 75 %, bez klíče 60 %) ladí ztmavení podle konkrétního videa nebo fotky. Místo videa umí pozadí i fotku (media.image se srcset; WebP variantu nabídne media.image.webpSrcset — šířkový srcset, nebo starší jednohodnotový media.image.webp). Volitelný klíč breadcrumbs ([{ title, url }], poslední položka bez url) vykreslí drobečkovou navigaci u spodní hrany — na stránce ho dává front matter, ne blok. Volitelný media.caption { title, text } vykreslí skleněný popisek fotky vpravo dole (na mobilu vpravo nahoře pod hlavičkou); stačí jeden z klíčů, text zalamuje řádky podle \n.
-
Text a čísla s ilustrací
image-numbers · light
Sekce na snow pozadí: vlevo textový sloupec (linka, titulek, tučný perex, text, CTA), vpravo ilustrace a pod ní řádek karet s čísly. Povinný je jen `title` — bez něj se sekce nevykreslí; ostatní díly jsou volitelné a blok se skládá z toho, co dostane. Bez ilustrace i bez karet zabere text celou šířku. Karty jsou páry `{ value, text }`, číslo je hodnota, ne nadpis.
-
Tmavý pruh s nadpisem
image-page-header · light
Tmavý pruh přes celou šířku okna místo hero: dekorativní značková grafika na pozadí, žlutá linka 40 × 4 a pod ní titulek 40 Regular, jehož zvýrazněná část (<strong>) je žlutá. Hlavička webu leží přes pruh stejně jako přes hero — stránka, kde je blok první sekcí, dostane body.has-hero sama (layouts/base.njk). Pozadí je dekorace (alt=""), bez něj zůstane tmavý přechod. Výška vychází z tokenů (305 na mobilu až 500 na XL) a s delším titulkem roste. Volitelné contacts[] ({ type: hours | phone | email, value }) přidají vpravo sloupec bílých pilulek se žlutou ikonou — telefon jako odkaz tel:, e-mail mailto:, otevírací doba prostý text; od 1024 vedle titulku, pod tím pod ním. Drobečky, perex ani tlačítko blok nemá; pozadí je vždy tmavé, settings.background se ignoruje.
-
Obrázek a textový sloupec
image-rich-content · light
Bílá sekce s dvousloupcovou hlavičkou a obsahem ve dvou sloupcích: vlevo ilustrace, vpravo sloupec s ikonou v žlutém kruhu, titulkem, šedým boxem, podnadpisem, seznamem s fajfkami a CTA. Blok je univerzální („obrázek + textový sloupec“), název je z Figmy. Povinný je jen `subtitle` — bez něj se sekce nevykreslí; ostatní díly jsou volitelné a blok se skládá z toho, co dostane. Bez obrázku zabere textový sloupec celou šířku.
-
Rozcestník s fotkou
image-signpost · light
Bílá sekce s vycentrovanou hlavičkou a pod ní řádek plochých dlaždic s fotkou. Dlaždice je celá odkaz — na Vzorkovně a Ukázkových bytech míří na kotvy řádků project-showcase níž na téže stránce (items[].url je „#…“); bez url je dlaždice jen obrázek s popiskem. Popisek dlaždice záměrně není nadpis (<p> uvnitř odkazu). Klíč layout přepíná vzhled: bez klíče (overlay) šest dlaždic s popiskem na světlém přechodu přes fotku, „caption“ pět dlaždic s názvem a lokalitou (items[].location) pod fotkou, skleněným pruhem se šipkou na hover a volitelným štítkem „brzy“ (items[].badge — ztmaví fotku).
-
Obrázek a text s hlavičkou
image-text-with-header · full
Bílá sekce s texturovaným pruhem pod hlavičkou (badge → H2 → perex, zarovnané doleva) a pod ní střídavé řádky text ⇄ obrázek: šedomodrá linka, titulek, perex, šedá poznámka, podnadpis a seznam. Obrázek prvního řádku zajíždí zdola do textury (od 1280 px). Strana obrázku se střídá podle pořadí položky; `mediaFirst: true` (boolean, ne řetězec) volí, že první řádek má obrázek vlevo; pod 1024 px, kde je obrázek vždy nad textem, nic nemění. Blok se řídí jen položkami, hlavička je volitelná. `layout: "wide"` přepne mřížku na dvě stejné půlky (obrázek 688, text 448) — bez klíče platí úzká mřížka (text 432 / obrázek 568, čtvercový ořez). `items[].title`, `items[].text` a položky `items[].list` berou omezené HTML jako titulky (`<strong>`, `<em>`, `<br>`, odřádkování `\n`; perex hlavičky je WYSIWYG). Titulek řádku je v základu Regular, SemiBold je jen část v `<strong>` — celý tučný titulek se tedy celý obalí `<strong>`. `items[].note` je prostý text (šedý odstavec pod perexem, odstavce dělí prázdný řádek) — nezaměňovat s komponentou note. `items[].listStyle: "plain"` vypne puntíky (termíny s tučným začátkem). `items[].button` ({ title, url, target?, hiddenSuffix?, modal? }; bez hiddenSuffix doplní skrytý dovětek titulek položky) je navy tlačítko na střed pod obrázkem, u položky bez obrázku pod textem. `items[].bleed: true` (jen s `layout: "wide"` a s obrázkem, od 1024 px) natáhne obrázek k hraně okna na straně, kde leží. `itemTag` (h3 | h4 | p, výchozí h3) přepíná úroveň titulku řádku — bez titulku sekce spadne na h2. Klíč `image.alt` je pro CMS povinný (obrázek je obsah); `image.webpSrcset` (šířkový srcset WebP, retina jen ve WebP) má přednost před jednohodnotovým `image.webp`, `image.sizes` přebije výchozí `sizes` šablony. Místo obrázku umí řádek i video — `items[].video` je `{ set, alt, poster?, width?, height? }`, kde `set` je klíč sady z `js/lib/video.ts`; `video` má přednost před `image`, bleed ani tlačítko pod médiem na video nepůsobí.
-
Infografika EKO-SMART
infographic · full
Bílá sekce s vycentrovanou hlavičkou (badge, H2) a pod ní velká karta s videem (nebo fotkou) na pozadí: vlevo textový blok, vpravo skleněný panel detailu a dole řádka přepínatelných kategorií. Výchozí stav má otevřenou první kategorii; křížek i „Zpět na přehled“ panel zavřou a odhalí celé pozadí.
-
Intro karty
intro-cards · light
Dvousloupcová hlavička (titulek s tučným prvním řádkem vlevo, perex vpravo) a tři tmavé karty s videem v pozadí: žlutá linka, titulek, text a tlačítko u spodní hrany.
-
Ukázky dispozičního řešení
layout-examples · full
Přepínač dispozic — vlevo seznam bytů, vedle něj půdorys a CTA dané dispozice. Od 1024 px jsou položky ARIA taby, pod tím je z položek mřížka 2 × N (pagination) a z panelů carousel.
-
Objednávka magazínu
magazine-order · full
Dva sloupce 568 : 712 (od 1024): vlevo titulek 35 Regular s tučným akcentem, obrázek magazínu v nativní velikosti a pod ním CTA na online verzi, obojí na střed; vpravo perex 16 / 30 a formulář objednávky tištěné verze — linka s titulkem (lineHeader h3-small), podtitulek, drobná poznámka, mřížka 2 × 3 polí s viditelným popiskem a ikonou vlevo, souhlasy a „Odeslat“ vpravo (pod 768 přes celou šířku). Blok se vypíše, když má titulek, perex nebo aspoň jedno platné pole; bez polí vypadne celý formulář, bez titulku, obrázku i CTA zbude jen pravý sloupec na střed (is-single). Na mobilu pod sebou v pořadí titulek → obrázek → CTA → perex → formulář.
-
Mapa lokalit
map-hero · full
Tmavý úvodní blok stránky Přehled lokalit — skleněná karta s H1, mapa Prahy s piny lokalit a vyhledávací panel. Hlavička webu leží přes sekci — body.has-hero si base.njk odvodí sám, když je blok první sekcí stránky. Souřadnice pinů jsou v procentech plochy mapy (x = střed pinu, y = jeho hrot).
-
Výpis článků
news-list · light
Řádky článků pod sebou — fotka vlevo, vedle ní téma, titulek, perex a datum s dobou čtení. Blok nemá hlavičku sekce, tlačítko ani stránkování. Klikatelný je celý řádek — otevírá ho url položky. Klíč topicUrl se v tomto bloku neuplatní: téma je uvnitř roztaženého odkazu, takže je vždy prostý text. Titulky článků jsou prostý text, ne HTML. Položka bez title se přeskočí, položka bez image se vykreslí bez fotky. Výpis je podle grafiky široký 1044 px a zarovnaný vlevo, ne přes celý kontejner. Klíč tag (h2 | h3) přepíná úroveň nadpisu všech řádků naráz, výchozí je h2. Datum i doba čtení jsou text, ne výpočet; datetime musí být strojový tvar (2026-03-12).
-
Výpis článků s vypíchnutým
news-list-with-highlight · full
Velká karta článku vlevo (fotka nahoře, pod ní text) a vedle ní sloupec řádků článků (malá fotka vlevo, text vpravo). Blok nemá hlavičku sekce ani tlačítko. Klikatelná je celá karta i celý řádek — otevírá je url položky; ⚠ na rozdíl od bloku top-news tu vypíchnutý článek nemá cta, otevírá ho highlight.url. Klíč topicUrl se v tomto bloku neuplatní nikde: téma je uvnitř roztaženého odkazu, takže je vždy prostý text. Titulky článků jsou prostý text, ne HTML. Položka bez title se přeskočí, položka bez image se vykreslí bez fotky. Chybí-li highlight nebo items, roztáhne se zbývající sloupec na celou šířku. Klíč tag (h2 | h3) přepíná úroveň nadpisu velké karty i všech řádků naráz, výchozí je h2. Datum i doba čtení jsou text, ne výpočet; datetime musí být strojový tvar (2026-03-12).
-
Číslovaný seznam
numbered-list · full
Bílá sekce s dvousloupcovou hlavičkou (titulek vlevo, perex vpravo) a pod ní dvěma sloupci: CTA dlaždice vlevo, číslovaný seznam kroků vpravo. Pořadové číslo v žlutém kolečku sází CSS z pořadí položky, v datech není. Hlavička i dlaždice jsou volitelné — blok se řídí jen položkami. Perex je WYSIWYG, ale `items[].title` a `items[].text` jsou prostý text (jeden odstavec). Klíč `tile` je heslo z _data/ctaTiles.json, nebo rovnou celý objekt dlaždice; `itemTag` (h3 | h4 | p, výchozí h3) přepíná úroveň titulku kroku — bez titulku sekce spadne na h2.
-
Nabídka — tmavá
offer-dark · full
Tmavá sekce s vycentrovanou hlavičkou (badge, H2, perex) a pásem bílých karet: žlutá kulatá ikona a titulek, šedý box, podnadpis a seznam s fajfkami. Pod kartami CTA. Na mobilu se karty chovají jako accordion.
-
Nabídka — světlá
offer-light · light
Světlá sekce s vycentrovanou hlavičkou (badge, H2) a pásem bílých karet se stínem: žlutá kulatá ikona a titulek, seznam párů hodnota/popis a pod ním šedý box. Pod kartami CTA. Na mobilu se karty chovají jako accordion.
-
Nadpis podstránky
page-title · light
Titulek stránky bez hero — linka 40 × 4 v CG Blue a pod ní nadpis 40 Regular v barvě textu, zarovnaný vlevo. Linka je zde navy, ne žlutá jako v hero a v kartách, a titulek má --clr-text, ne --clr-heading. Výchozí tag je h1 (na stránce bez hero je to hlavní nadpis); klíčem tag: "h2" jde snížit tam, kde h1 už na stránce je. Perex ani drobečky blok nemá — perex se pod něj dá blokem headline nebo text.
-
Loga partnerů
partners · light
Vycentrovaná hlavička sekce a pod ní mřížka log (4 sloupce od 1024 px, 3 od 768 px, 2 na mobilu). Logo je v nativní velikosti, vycentrované v buňce a poloprůhledné; s items[].url se obalí odkazem a po najetí zplní.
-
Citát osoby na fotce
person-quote · light
Dlaždice s fotkou osoby přes celou šířku obsahu a dvěma skleněnými kartami: text a jméno s funkcí pod žlutou linkou. S klíčem `quote` je text citát (bílé uvozovky vlevo nahoře, citát vlevo uprostřed, jméno vpravo dole); s klíčem `caption` popisek fotky (bez uvozovek, jméno vlevo uprostřed, popisek vpravo dole). Pod 1024 px leží karty pod fotkou v tmavé ploše. Ve Figmě rám „person-cta-tile“.
-
Karusel fotek
photo-carousel · full
Tmavá sekce s vycentrovanou hlavičkou a centrovaným karuselem fotek přes okraj okna. Aktivní snímek má šířku obsahu, sousedi jsou zmenšení a ztmavení. Bez popisků a odkazů — lookbook.
-
Programy
programs · full
Bílá sekce s vycentrovanou hlavičkou (badge, H2, perex) a přehledem finančních programů: vlevo seznam položek s ikonou, vpravo detail vybraného programu (šedý box, podnadpis, seznam s fajfkami). Pod obsahem CTA. Pod 1024 px se seznam chová jako accordion — detail se rozbalí pod svou položkou.
-
Výpis projektů
project-list · full
Filtr podle městské části a mřížka karet projektů s videem na pozadí. Aby filtr fungoval, musí mít každá položka `district` shodný s některou pilulkou ve `filter.districts`. Pod 768 px se pilulky přesunou do modalu — popisek spouštěče je `filter.buttonLabel` (výchozí „Filtr lokality“).
-
Referenční projekty
project-showcase · full
Střídavé řádky: panel s údaji o dokončeném projektu a galerie fotek s lightboxem. Panel umí místo dlaždic s údaji i odstavec (`text` — `\n` dělí odstavce, z HTML projde jen `<strong>`/`<em>`); s `localityUrl` je lokalita odkaz na mapu do nového okna s ikonou externího odkazu. Řádek může nést kotvu (`anchor`), která musí být na stránce jedinečná. Klíč `titleStyle` (`default` | `reversed`, výchozí `default`) obrací řezy dvouřádkového titulku — u jednořádkového (bez `type`) se neuplatní. Z `title` se skládá přístupné jméno galerie, takže má být na stránce jedinečný. Klíč `more` (`title`, `initial`, `step`) zapíná postupné odkrývání: v HTML jsou všechny řádky, JS nechá vidět `initial` (výchozí 4) a každý stisk tlačítka odkryje dalších `step` (výchozí 10). Bez `more` se vypíšou všechny řádky.
-
Postranní menu projektů
project-sidebar · light
Svislý sloupec skupin projektů (Dokončené byty, Byty ve výstavbě, Rodinné domy, Komerce): hlavička s texturou (navy / cihlová) a žlutou linkou, pod ní řádky-odkazy (lokalita + název projektu, volitelně štítek nebo ikona externího odkazu). Kořen je <nav>, ne <section> — fragment do sloupce stávající homepage, šířku dává rodič. Varianta `long` ukazuje zalomení a vynechanou prázdnou skupinu, `stretched` roztažení na výšku sloupce.
-
Rozcestník projektů
project-signpost · full
Mřížka karet projektů s fotkou, lokalitou a odkazem na detail. Klikatelné je jen tlačítko, ne celá karta. Popisek tlačítka je u všech karet stejný, proto k němu šablona přidává vizuálně skrytý název projektu („Prozkoumat projekt <název>“); s vlastním `button.title` se přidá jen název. Fotka je dekorace — `image.alt` zůstává prázdný, informaci nese text karty.
-
Tabulka projektů
project-table · full
Tabulka výběrových řízení v bílé kartě a pruh s kontaktní osobou. Sloupce vybírá pole `columns` (whitelist `name`, `units`, `description`, `demand`, `construction`, `pdf`), popisky lze přepsat v `labels`. Stav je pilulka `{ label, tone: "done" | "date" }` nebo holý text (chová se jako `date`). Pod 768 px se řádky převléknou na karty, mezi 768 a 1279 px tabulka scrolluje vodorovně. Kontaktní pruh (fotka, jméno, telefon, e-mail a CTA) vykresluje sdílená komponenta contact-person; kontakty jsou tu data osoby, ne globální ze site.json.
-
Karty standardů
rich-image-cards · light
Hlavička sekce a karty po dvou: fotka přes celou kartu s navy přechodem, vlevo skleněný panel s titulkem, tučným perexem, odstavcem a dole řadou mini karet projektů (odkazy).
-
Rozcestník kontaktů
signpost-cards · light
Tmavý pás s mřížkou skleněných dlaždic — žlutá linka, pořadové číslo, název oddělení a šipka; celá dlaždice je odkaz, typicky na kotvu skupiny v contact-list. 2 / 4 / 7 sloupců od 768 / 1440 px. Číslo odvozuje šablona z pořadí platných položek, v datech není. Výchozí pozadí je tmavé i bez settings. Varianta `header` ukazuje volitelnou hlavičku sekce, `four` neúplnou řadu, `edge` dlouhý název a zahozené neplatné položky (zbylé tři se číslují 01–03).
-
Registrace k odběru + rozcestníkové karty
signup · full
Hlavička sekce a pod ní mřížka 1 : 1: vlevo karta registrace k odběru (fotka s navy přechodem zapečeným v exportu, dvě pole, souhlas a žluté CTA), vpravo dvě rozcestníkové karty — jedna na fotce, druhá na ploché krémové barvě. Přes obě strany přesahují dolů dekorativní fotky (telefon, stoh katalogů); telefon se kreslí od 1024 px, katalog u poslední karty už od 500 px (jeho přesah spadne pod mřížku, kde na něj drží rezervu). Pod 500 px se vypínají i s rezervou. Klikatelné je jen tlačítko karty, ne celá karta — a protože s nadpisem karty nijak svázané není, měl by mít cta.title smysl i vytržený ze souvislosti (v seznamu odkazů čtečky). Vzorová data jsou opsaná z grafiky („Zjistit více“, „Přečíst“), CMS by mělo psát popisnější. Formulář v prototypu odesílá js/components/form.ts naoko — CMS tým doplní form.action a skutečné odeslání, kontrakt tříd se nemění. Popisky polí jsou skryté (.screen-reader-text), viditelný text je placeholder — tak je to v grafice. Klíč tag (h2 | h3) přepíná úroveň titulku sekce, titulky karet jdou vždy o stupeň níž. Blok se ve Figmě jmenuje „stay-in-loop“; slovo „newsletter“ se v názvu bloku, tříd ani cest nepoužívá, protože je to past na adblocky. Bez form i bez items se nevykreslí vůbec nic.
-
Pruh čísel
stats-band · light
Tmavý pruh se dvěma až čtyřmi velkými čísly (60 Black s přechodovou výplní) a popisky pod nimi, sloupce oddělené svislou linkou. Bez hlavičky sekce a bez CTA. Ve Figmě se rám jmenuje „numbers“. Na mobilu mřížka 2 × 2, od 1024 px všechny v řadě. Pozadí je výchozí tmavé; světlé je jen obranně ošetřené, v grafice není.
-
Karusel příběhů
story-carousel · full
Bílá sekce s dvousloupcovou hlavičkou (nadtitulek s linkou, titulek 40 na dva řádky, šipky vpravo) a pod ní karusel karet 328 × 460 s fotkou, přechodem, pilulkou tématu a titulkem u spodní hrany. Klikatelná je celá karta, kolečko se šipkou je jen afordance uvnitř odkazu. Pod karuselem je lišta průběhu (Swiper Scrollbar, táhlo). Výřez přetéká kontejner doprava, aby další karta vykoukla; pod 1024 px se šipky skrývají a zůstává lišta a swipe.
-
Text
text · light
Volný obsah z editoru (nadpisy, odstavce, odkazy, seznamy, citace, tabulka, obrázek) ve sloupci 923 px vycentrovaném v kontejneru. Vzhled drží výhradně core/wysiwyg.css — blok jen zúží sloupec a odhaluje obsah po částech. Klíč html je HTML z editoru a vypisuje se bez escapování, sanitizace je na straně CMS. Titulek je volitelný; pod blokem page-title se nepoužívá, protože nadpis sekce (36) je větší než h2 uvnitř obsahu.
-
Časová osa (karusel milníků)
timeline-carousel · full
Tmavá sekce s hlavičkou na střed a časovou osou o třech vrstvách: lišta let (tablist) se šipkami po stranách, karta milníku se sklem (vlevo rok, titulek a text, vpravo fotka s lokalitou), která se při výběru prolne, a od 1024 px spodní přehled všech milníků jako zrcadlo lišty. Pod 1024 px je lišta vodorovně posuvná a fotka je nad textem. Tlumená modrá #8288B3 (neaktivní roky, popisky, text karty) je podle grafiky a vědomě pod WCAG AA (rozhodnutí zadavatele).
-
Vypíchnutý článek + trojice karet
top-news · full
Vypíchnutý článek (text vlevo, velká fotka vpravo) a pod ním tři karty článků. Blok nemá hlavičku sekce — začíná rovnou nadtitulkem vypíchnutého článku. Titulky článků jsou prostý text, ne HTML. Vypíchnutý článek otevírá tlačítko highlight.cta, a od 2026-09-15 také odkaz na jeho fotce a v titulku (týž cíl; highlight.url je záloha pro data bez tlačítka) — roztažený odkaz jako v kartě tam být nemůže, překryl by odkaz na téma; karty naopak tlačítko nemají a otevírá je items[].url, kterým je klikatelná celá karta. Klíč topicUrl se z téhož důvodu uplatní jen u vypíchnutého článku; v kartách je téma prostý text, protože odkaz uvnitř odkazu nelze. Položka bez title se přeskočí, položka bez image se vykreslí bez fotky. Datum i doba čtení jsou text, ne výpočet; datetime musí být strojový tvar (2026-03-12), jinak ho čtečka přečte jako nesmysl.
-
Jak se k nám dostanete
travel-guide · light
Titulek s linkou a seznam způsobů dopravy (žlutý kruh s ikonou, titulek, popis) vlevo, mapa okolí vpravo až k hraně okna. Bez mapy jeden sloupec, na mobilu je mapa pod seznamem přes celou šířku okna.