Návrh · ContentBuilder
Playground obsahových komponent
Náhled nových bloků pro ContentBuilder v reálném kontextu obsahu stránky
(.StyledText .LibraryContentBuilder, ostrý web CSS). Zatím jde jen o návrh —
do ContentBuilderu ani do SCSS nic zapsáno není. Vše je bez JavaScriptu a plně editovatelné v CB.
Citace .CbQuote
Ohlas rodiče, dítěte nebo dobrovolníka — a ve variantě --verse i biblický verš jako duchovní akcent v textu.
Zvláštnost: Uvozovka je dekorativní pseudo-element, takže ji uživatel nesmaže. Portrét je volitelný — bez fotky se zobrazí vínové kolečko s iniciálami, které jsou běžný editovatelný text.
Základní — s iniciálami
Syn se vrátil z tábora a první, co udělal, bylo, že si sám otevřel Bibli. Za celý rok jsem ho k tomu nedokázala přivést — a tady to přišlo samo, protože chtěl vědět, jak ten příběh pokračuje.
S fotkou místo iniciál
Na školení EVD jsem přijela s tím, že si odvezu pár nápadů na hodiny. Odvezla jsem si celý systém, jak dětem vyprávět biblický příběh tak, aby si ho zapamatovaly.
Varianta .CbQuote--verse — biblický verš
Nechte děti přicházet ke mně, nebraňte jim, neboť takovým patří království Boží.
Obrázek + text .CbMedia
Střídavý blok pro popis akce, kurzu nebo služby. Modifikátor --reverse prohodí strany, --wideText dá textu více místa.
Zvláštnost: Prohození stran řeší order v gridu — v HTML zůstává text vždy až za obrázkem, takže na mobilu i ve čtečce je pořadí stejné u obou variant. Obrázek je object-fit: cover s limitem výšky, aby dva bloky pod sebou neskákaly.
Základní — obrázek vlevo
Letní tábor 2026
Týden, na který se nezapomíná
Devět dní her, výprav a společných večerů u ohně. Každý den otevíráme jeden biblický příběh — ne jako školní látku, ale jako něco, co se dá prožít.
Tábor je určen dětem od 7 do 14 let. Ubytování je ve srubech, stravování pětkrát denně, celotáborová hra běží od prvního dne.
Varianta .CbMedia--reverse — obrázek vpravo
Příměstský tábor
English camp: angličtina i příběhy
Dopolední bloky s rodilými mluvčími, odpoledne hry a tvoření. Děti se učí jazyk v situacích, které dávají smysl — a přitom slyší, proč pro nás Bible něco znamená.
Vhodné pro děti od 9 let, úroveň angličtiny řešíme rozřazením první den.
Swipe dlaždice .CbTiles
Vodorovný pás karet pro nabídku akcí, materiálů nebo služeb. Na mobilu se posouvá prstem, na desktopu se vejde více karet vedle sebe.
Zvláštnost: Žádný JavaScript ani Swiper — jen overflow-x: auto a scroll-snap-type: x mandatory, takže se karty samy dorovnají na hranu. Počet karet je libovolný, uživatel jen duplikuje jeden <a class="CbTile">.
Posuňte prstem doprava →
4. – 12. července
Letní tábor Dětské misie
Devět dní celotáborové hry pro děti od 7 do 14 let.
18. – 22. srpna
Příměstský English camp
Angličtina s rodilými mluvčími, hry a tvoření.
31. ledna
Pololetní LEGO den
Stavění, soutěže a krátké zamyšlení pro celou rodinu.
Průběžně
Školení EVD
Kurz efektivního vyučování dětí pro vedoucí besídek.
Materiály
Knihy a pracovní listy
Příručky pro vedoucí a čtení pro děti v našem e-shopu.
Medailonky osob .CbPeople / .CbPerson
Představení týmu, lektorů nebo vedoucích tábora. Výchozí je karta s kolečkem iniciál, fotka se doplní jen výměnou <span> za <img>.
Zvláštnost: Mřížka je auto-fit s minmax(min(100%, 15rem), 1fr) — počet sloupců se řídí sám podle šířky a nikdy nepřeteče, i když blok vložíte do úzkého CB sloupce. Nemusíte tedy nic přepínat podle počtu lidí.
Základní — karty na střed
Jan Kříž
Ředitel Dětské misie
Vede organizaci od roku 2014, školí vedoucí a kázání pro děti považuje za nejtěžší disciplínu, jakou zná.
Marie Slezáková
Koordinátorka táborů
Stará se o přihlášky, zdravotníky a o to, aby se všech sto dětí dostalo tam, kam má.
Tomáš Beneš
Lektor EVD
Učí, jak vyprávět biblický příběh tak, aby si ho děti odnesly domů. Sám vede besídku v Hradci Králové.
Varianta .CbPeople--compact — řádkové karty pro větší tým
Eva Horáková
Region Morava
Koordinuje kluby Dobré zprávy na jihu Moravy.
Petr Dostál
Region Čechy
Doprovází nové vedoucí při prvních setkáních s dětmi.
Kontaktní dlaždice .CbContacts / .CbContactTile
Adresa, telefon, e-mail a fakturační údaje ve stejnorodé mřížce. Dlaždice může být odkaz (<a>) i statický údaj (<div>).
Zvláštnost: Odkazové dlaždice mají v rohu ikonu ↗ a hover ve stejném rukopise jako karty literatury; neodkazové ji prostě nemají — vzhled zůstává jednotný. Dlouhé e-maily zalamuje overflow-wrap: anywhere, takže nic nepřeteče ani na 375 px.
Kontaktní medailonky .CbContactPeople
Osoba plus její přímé kontakty — pro stránku „Kdo jsme“ nebo pro regionální pracovníky, na které se dá napsat přímo.
Zvláštnost: Kříženec medailonku a kontaktní karty: gradientová hlavička s avatarem drží stejný rukopis jako .PageAsideCard, kontakty pod ní jsou plnohodnotné tel: a mailto: odkazy oddělené jemnými linkami.
Marie Slezáková
Přihlášky na tábory
Ozvěte se s čímkoli kolem přihlášek, plateb a zdravotní dokumentace.
Tomáš Beneš
Školení EVD a materiály
Domluva termínu školení pro sbor i objednávky pracovních listů.
Platební údaje .CbPayment
Sekce pro dary i platby táborů: číslo účtu, variabilní symbol, částka a místo pro QR platbu.
Zvláštnost: Čísla jsou v neproporcionálním písmu, aby se dala spolehlivě přečíst i opsat. Rámeček pro QR je vyznačený přerušovaně — dokud tam uživatel nevloží <img> s QR kódem, je jasné, že tam něco chybí, a blok přesto nevypadá rozbitě.
Podpořte službu dětem
- Číslo účtu
- 2301234567 / 2010
- IBAN
- CZ65 2010 0000 0023 0123 4567
- Variabilní symbol
- 2026
- Zpráva pro příjemce
- Dar – vaše jméno
Načtěte v bankovní aplikaci
Na dar vám rádi vystavíme potvrzení pro daňové účely — napište si o něj na dary@detskamisie.cz.
Bez QR — platba za tábor
Platba účastnického poplatku
- Číslo účtu
- 2301234567 / 2010
- Částka
- 4 200 Kč
- Variabilní symbol
- číslo přihlášky z potvrzovacího e-mailu
- Splatnost
- do 14 dnů od přijetí přihlášky
Pokud je poplatek pro vaši rodinu překážkou, ozvěte se nám — máme fond na podporu účastníků a řešíme to důvěrně.
Zvýrazněné boxy .CbCallout
Upozornění, tip nebo důležitá poznámka uvnitř běžného textu. Čtyři barevné varianty plus výchozí vínová.
Zvláštnost: Barvu řídí jediná CSS proměnná --cb-callout-accent, kterou přepíná modifikátor. Přidat další variantu tedy znamená dva řádky CSS a žádnou změnu v uloženém HTML. Ikona je běžné inline SVG, ne pseudo-element — vejde se do ní i jiný symbol.
Tip pro vedoucí
Biblický příběh dětem vyprávějte zpaměti a s pohledem do očí. Papír v ruce je největší zloděj pozornosti, jakého si na besídku můžete přinést.
Co si vzít s sebou
Spacák, karimatku, pláštěnku, baterku a Bibli. Kompletní seznam vybavení najdete v přihlášce, kterou vám pošleme e-mailem.
Uzávěrka přihlášek se blíží
Přihlášky na letní tábor přijímáme do 31. května, nebo do naplnění kapacity. Loni jsme byli plní už v půlce května.
Máme volná místa
Na příměstský English camp se ještě dá přihlásit. Zbývá sedm míst pro děti od 9 do 12 let.
Akce byla zrušena
Lednový LEGO den se kvůli uzavření tělocvičny nekoná. Zaplacené poplatky vracíme zpět na účet, náhradní termín oznámíme v únoru.
Číslované kroky .CbSteps
Postup „jak se přihlásit“, „jak nás podpořit“ nebo „jak založit klub Dobré zprávy“ rozepsaný do očíslovaných kroků.
Zvláštnost: Čísla jsou skutečný text ve <span>, ne ::marker — uživatel je může přepsat třeba na „A“, „B“ nebo na ikonu. Spojnice mezi kolečky je dekorativní pseudo-element a u posledního kroku sama mizí.
-
1
Vyberte termín
V přehledu akcí najdete termíny letních i příměstských táborů včetně věkového rozpětí a ceny.
-
2
Vyplňte přihlášku
Online formulář zabere zhruba deset minut. Budete potřebovat rodné číslo dítěte a kontakt na zákonného zástupce.
-
3
Uhraďte poplatek
Do dvou dnů vám přijde potvrzovací e-mail s variabilním symbolem. Poplatek je splatný do 14 dnů od jeho doručení.
-
4
Přivezte dokumenty
Při nástupu odevzdáte potvrzení od lékaře, kopii kartičky pojištěnce a prohlášení o bezinfekčnosti ne starší jednoho dne.
Časté otázky .CbFaq
Rozbalovací otázky a odpovědi — typicky k táboru, ke školení nebo k darům.
Zvláštnost: Postaveno na nativních <details> a <summary>, takže rozbalování funguje úplně bez JavaScriptu, dá se v něm hledat přes Ctrl+F a je přístupné z klávesnice. Šipka se otáčí jen podle atributu [open]. První položka má open, aby bylo na první pohled vidět, že jde o rozbalovací seznam.
Od kolika let se dá na tábor přihlásit?
Letní tábor je pro děti od 7 do 14 let, příměstské tábory od 9 let. Mladší sourozence bohužel brát nemůžeme — program i noclehy jsou stavěné na školní věk.
Musí být dítě z křesťanské rodiny?
Nemusí. Většina dětí na našich táborech do kostela nechodí. Biblický program je součástí dne, ale nikoho do ničeho netlačíme — děti poslouchají, ptají se a samy si vybírají, co si z toho vezmou.
Kdo jsou vedoucí a jak je vybíráte?
Vedoucí jsou vyškolení dobrovolníci starší 18 let, kteří prošli kurzem EVD a doložili výpis z rejstříku trestů. Na každém táboře je zdravotník s platným kurzem a poměr vedoucích k dětem držíme nejvýše 1 : 6.
Co když dítě onemocní těsně před odjezdem?
Napište nám co nejdřív. Při doložení lékařské zprávy vracíme celý poplatek zpět, snížený jen o skutečně vynaložené náklady (obvykle několik set korun za objednané jídlo a materiál).
CTA pruh .CbCta
Výzva k akci na konci stránky: přihlásit se, darovat, ozvat se. Tmavá varianta pro hlavní cíl stránky, --soft pro klidnější místa uvnitř textu.
Zvláštnost: Používá vlastní tlačítko .CbCta-button místo .BaseButton-primary, protože plná vínová je vyhrazená hlavnímu CTA v hlavičce webu. Na tmavém podkladu je tlačítko žluté, ve světlé variantě se automaticky přebarví na outline.
Přihlaste dítě na letní tábor
Přihlášky přijímáme do 31. května nebo do naplnění kapacity.
Varianta .CbCta--soft
Chcete pomáhat s námi?
Hledáme dobrovolníky na tábory, do klubů i na jednorázovou výpomoc v kanceláři.
Soubory ke stažení .CbFiles
Přihlášky, prohlášení o bezinfekčnosti, výroční zprávy, metodické listy.
Zvláštnost: Typ souboru i velikost jsou obyčejný text, který uživatel dopíše ručně — nic se nedopočítává skriptem a řádek tak jde použít i pro odkaz na cizí úložiště. Odznáček s příponou je z gradientu použitého v hlavičkách karet.
Čísla a statistiky .CbStats
Dosah služby v číslech — do výroční zprávy, na stránku „Kdo jsme“ nebo nad výzvu k darování.
Zvláštnost: Stejný tónovaný pás a rukopis jako statistiky na úvodní stránce, ale bez počítadla a bez JavaScriptu — čísla jsou prostý text. Sloupce se skládají samy, takže tři i pět položek vypadá vždy vyváženě.
Časová osa .CbTimeline
Milníky organizace pro stránku Historie, ale i průběh projektu nebo harmonogram dne na táboře.
Zvláštnost: Osa i puntíky jsou dekorativní pseudo-elementy, obsah tvoří jen letopočet, nadpis a text. Puntík má bílý prstenec (box-shadow), takže čistě „prochází“ linkou bez překrývání. Osa je vlevo i na desktopu — střídavé rozvržení by v úzkém sloupci CB nefungovalo.
-
1995
Začátek služby v Česku
První kluby Dobré zprávy vznikají v Brně a v Praze, převážně díky dobrovolníkům z místních sborů.
-
2003
První letní tábor
Na první tábor přijelo 42 dětí. Celotáborová hra se od té doby stala pevnou součástí každého ročníku.
-
2011
Školení EVD v češtině
Kurz efektivního vyučování dětí vychází poprvé kompletně v češtině a otevírá se i vedoucím mimo naši organizaci.
-
2019
Vlastní nakladatelství
Začínáme vydávat příručky a dětská čtení v českých překladech, dnes je jich v katalogu přes padesát.
-
2026
Kde jsme dnes
Třicet čtyři klubů, šest táborů ročně a tým vedoucích, kteří sami kdysi jezdili na tábor jako děti.
Parametry akce .CbFacts
Termín, místo, věk, cena a uzávěrka na jednom místě hned pod nadpisem stránky s táborem.
Zvláštnost: Jednotný rámeček s vnitřními hairline linkami místo samostatných karet — vypadá to jako tabulka, ale chová se to jako mřížka, takže se položky na mobilu poskládají pod sebe bez vodorovného posuvu. Ikonu lze u kterékoli položky vynechat.
Galerie .CbGallery
Fotky z akce v jednotné mřížce, volitelně s popiskem a s prokliknutím na plnou velikost.
Zvláštnost: Pevný poměr stran 4 / 3 plus object-fit: cover srovná i fotky na výšku, takže mřížka nikdy nepokulhává. Bez lightboxu — odkaz vede prostě na velký obrázek, což je bez JavaScriptu jediné spolehlivé řešení.
Video .CbVideo
Responzivní obal pro vložené video z YouTube nebo Vimea. Varianta --portrait pro svislá videa ze sociálních sítí.
Zvláštnost: Poměr stran drží aspect-ratio, ne starý padding-hack — obal tedy funguje i tehdy, když uživatel z vloženého kódu smaže atributy width a height. Uživatel do bloku vloží jen <iframe> z YouTube a nemusí nic dopočítávat.
Ohlédnutí za letním táborem 2025 (na playgroundu ukázkové video — na webu se sem vloží kód z YouTube).
Rozcestník .CbLinks
Odkazy na navazující stránky na konci delšího textu — kam pokračovat dál.
Zvláštnost: Lehčí sourozenec swipe dlaždic pro případy, kdy nemáte obrázky. Barevný proužek se objeví až na hoveru (v klidu je průhledný), takže seznam v textu nekřičí a přesto je jasné, že jde o odkazy.