Celý web je v jedné rodině Poppins, váhy 400, 500 a 600. Tučnější než 600 se nepoužívá. Tělo textu je 17/30 px.
Text a nadpisy mají --text #1b2433, popisky a perexy --tlumena #4a5565. Druhá, šedá věta výroku má #98a2b3.
Značková je modrá --modra #004cbd: tlačítka, šipky odkazů, ikony, čárkované rámečky. Zelená --zelena #31b308 jen na ikony, nová komponenta bere modrou.
Plochy: úvod a pruhy --pata #eaeef6, podklad fotek a info boxů --svetla #f3f6fb, patička a široké pásy #f7f7f7.
Karty a boxy mají rámeček 1 px --linka, ne stíny. Výjimkou je jen vyhledávání .hledani.
Výzvy k akci mají rámeček 1.5px dashed var(--modra), rádius 18 px a bílé pozadí (.pro-karta, .ka-darci, .karta-pridat).
Tlačítka jsou pilulky border-radius:200px s rámečkem 2 px. Hlavní .btn je modré a při najetí se obrací na bílé, .btn--obrys obráceně.
Odkaz se šipkou .odkaz-sipka je modrý 600, text je v klidu podtržený 1 px a při najetí bez podtržení. V úvodu a na 404 je text tmavý a bez podtržení, na najetí podtržený.
Pod nadpisy a nad nadpisy žádné ozdobné linky ani zelené štítky. Malý verzálkový popisek .ko-stitek je jen v kontaktech.
Rozvržení
Obsah je v kontejneru .w o šířce max 1680 px s okrajem --okraj 32 px (20 px na telefonu). Hlavička --hlava je 78 px a lepí se nahoře.
Stránka začíná pásem úvod: úvod .uv-hero.hero-a s jedoucími fotkami, ostatní stránky .pro-hero s výrokem .pro-vyrok a čárkovanou kartou .pro-karta.
Sekce jsou odsazené shora clamp(44px,3.9vw,76px). Šedý pás .pro-jak nese kroky .pro-krok v bílých kartách s rádiusem 20 px.
Výrok s odpověďmi .pom je dvousloupcový: vlevo .pom__vyrok, vpravo otázky .faq__i s modrým plus a mínus.
Rádiusy
200 px tlačítka, štítky a vyhledávání. 50 % kolečka a avatary. 14 px fotka karty nabídky. 16 px karta partnera a box. 18 px čárkované karty. 20 px karta kroku a projektu. 28 px fotky v úvodu.
Jazyk
Texty jsou česky, bez zelených štítků nad nadpisem. Za jednopísmenné předložky patří nezlomitelná mezera. Říká se ztráta a pozůstalý.
Barvy
Značka
--modra#004cbdTlačítka, šipky odkazů, ikony kategorií, čárkované rámečky, plus a mínus u otázek.
--modra-50#f0f5fdSvětle modrá plocha karet a kolečka ikon.
--zelena#31b308Jen ikony, nikdy text ani plocha.
--modra-100#e0eafaRámeček světle modrých karet.
--modra-svetla#e6eefaPlocha upozornění.
#eef3fc#eef3fcPodklad štítku kategorie a zóny pro soubory.
--zelena-text#237f05Tmavší zelená pro stavové štítky.
Text
--text#1b2433Veškerý text a všechny nadpisy.
--tlumena#4a5565Perexy, popisky, místo u karty, text ve spodní liště.
#98a2b3#98a2b3Druhá šedá věta výroku, počty u oblastí, nadpisy sloupců patičky.
Plochy
--pata#eaeef6Pozadí úvod pásu na úvodu. Není to patička.
--svetla#f3f6fbPodklad fotek, šedé info boxy.
#f7f7f7#f7f7f7Patička, pás O projektu a Jak to funguje, karta formuláře.
Linky
--linka#dde4eeRámečky karet, linky mezi řádky výčtů a otázek.
--linka-2#d3d8dfRámeček chipů, vyhledávání a polí formuláře.
#eceef2#eceef2Rámeček karet kroků a karty formuláře.
Perex, výrok se šedou druhou větou, dva odkazy a vpravo čárkovaná karta s výčtem. Třídy: pro-hero, pro-perex, pro-vyrok, pom__odkazy, pro-karta, pro-seznam.
HTML kód
<main class="obsah" id="obsah"><section aria-labelledby="pro-titul" class="pro-hero">
<div class="w pro-hero__in">
<div class="pro-hero__text">
<p class="pro-perex">Nabídky pomoci pro pozůstalé rodiny s dětmi.</p>
<h1 class="pro-vyrok" id="pro-titul">Přišli jste o partnera nebo partnerku a staráte se o děti? <span>Lidé z celé republiky nabízejí pomoc, která vám může ulehčit všední dny.</span></h1>
<div class="pom__odkazy">
<a class="odkaz-sipka" href="#"><span>Prohlédnout nabídky</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a>
<a class="odkaz-sipka" href="#"><span>Přihlásit se</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a>
</div>
</div>
<div class="pro-karta">
<h2>Co budete k registraci potřebovat</h2>
<p>Koordinátoři zkontrolují doklad i platbu a účet schválí.</p>
<ul class="de-vlastnosti pro-seznam">
<li><svg aria-hidden="true" viewbox="0 0 24 24"><circle cx="12" cy="12" r="9.5"></circle><path d="m7.6 12.3 3 3 5.8-6.3"></path></svg>Úmrtní list jako fotku nebo sken</li>
<li><svg aria-hidden="true" viewbox="0 0 24 24"><circle cx="12" cy="12" r="9.5"></circle><path d="m7.6 12.3 3 3 5.8-6.3"></path></svg>E-mail, telefon a adresu trvalého bydliště</li>
<li><svg aria-hidden="true" viewbox="0 0 24 24"><circle cx="12" cy="12" r="9.5"></circle><path d="m7.6 12.3 3 3 5.8-6.3"></path></svg>Jednorázový členský poplatek 400 Kč</li>
</ul>
<a class="btn pro-karta__btn" href="#">Registrace rodiny</a>
</div>
</div>
</section></main>
Úvod s kruhovou fotkou
Varianta úvod s kruhovou fotkou vlevo. Třídy: pro-hero op-hero, op-hero__foto.
HTML kód
<main class="obsah" id="obsah"><section aria-labelledby="op-titul" class="pro-hero op-hero">
<div class="w pro-hero__in op-hero__in">
<div aria-hidden="true" class="op-hero__foto" data-prolinani="">
<img alt="" class="je-videt" fetchpriority="high" height="720" src="assets/foto/web/o-projektu-uvod-1.webp" width="720"/>
<img alt="" height="720" src="assets/foto/web/o-projektu-uvod-2.webp" width="720"/>
<img alt="" height="720" src="assets/foto/web/o-projektu-uvod-3.webp" width="720"/>
<img alt="" height="720" src="assets/foto/web/o-projektu-uvod-4.webp" width="720"/>
<img alt="" height="720" src="assets/foto/web/o-projektu-uvod-5.webp" width="720"/>
<img alt="" height="720" src="assets/foto/web/o-projektu-uvod-6.webp" width="720"/>
<img alt="" height="720" src="assets/foto/web/o-projektu-uvod-7.webp" width="720"/>
</div>
<div class="pro-hero__text">
<p class="pro-perex">Projekt Daruj kousek sebe propojuje pozůstalé rodiny a děti s lidmi a firmami, kterým jejich osud není lhostejný.</p>
<h1 class="pro-vyrok" id="op-titul">Nejsou nám lhostejné osudy mladých pozůstalých rodin. <span>Každý z nás má co nabídnout.</span></h1>
<div class="pom__odkazy">
<a class="odkaz-sipka" href="#"><span>Zaregistrovat se</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a>
<a class="odkaz-sipka" href="#"><span>Prohlédnout nabídky</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a>
</div>
</div>
</div>
</section></main>
Úvod kontaktu
Úvod s kontakty koordinátorů, kolečkovými fotkami a verzálkovým popiskem. Třídy: ko-hero, ko-stitek, pro-kontakty.
Výrok s šedou druhou větou nad mřížkou partnerů. Třídy: pa-hlava, pa-uvod, pa-vyrok.
HTML kód
<main class="obsah" id="obsah"><section class="pa"><div class="w"><div class="pa-hlava">
<p class="pa-uvod">Daruj kousek sebe je projekt <a href="#" rel="noopener" target="_blank">Nadačního fondu Vrba</a>.</p>
<h1 class="pa-vyrok">Děkujeme partnerům, kteří projekt podporují. <span>Díky nim můžeme dál pomáhat rodinám a dětem bez mámy nebo táty.</span></h1>
</div></div></section></main>
Stránka nenalezena
Chybová stránka s velkým výrokem a dvěma odkazy. Třídy: e4, e4__vyrok, pom__odkazy.
HTML kód
<main class="obsah" id="obsah"><section class="e4">
<div class="w">
<p class="pom__perex">Chyba 404. Odkaz je možná starý, nebo je v adrese překlep.</p>
<h1 class="e4__vyrok">Tuhle stránku jsme nenašli. <span>Pomoc, kterou hledáte, ale najdete v nabídkách dárců.</span></h1>
<div class="pom__odkazy">
<a class="odkaz-sipka" href="#"><span>Najít pomoc</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a>
<a class="odkaz-sipka" href="#"><span>Na úvodní stránku</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a>
</div>
</div>
</section></main>
Navigace
Hlavička
Bílá lepivá lišta s logem, menu, přihlášením a tlačítkem Vložit nabídku. Třídy: hlava, hlava__nav, nav, hlava__cta.
Fotka 4:3 s rádiusem 14 px, kategorie v pilulce, název, místo a štítky. Karty se na webu doplňují skriptem, vzor je neutrální. Třídy: karta, karta__foto, karta__kat, karta__nadpis, karta__misto, karta__stitky.
Šedý box --svetla s rádiusem 18 px a krátkým sdělením. Třída: nejnovejsi-zaloha.
HTML kód
<main class="obsah" id="obsah"><section class="uv-sekce uv-nove"><div class="w"><p class="nejnovejsi-zaloha">Všechny nabídky pomoci i s mapou najdete v <a class="odkaz" href="#">katalogu nabídek</a>. Vybírat můžete podle kategorie, kraje nebo hledaného slova.</p></div></section></main>
Karta partnera
Bílá karta s logem v rámečku, názvem v modré a popisem. Třídy: pa-mrizka, pa-karta, pa-plocha, pa-logo, pa-jmeno, pa-popis.
HTML kód
<main class="obsah" id="obsah"><section class="pa"><div class="w"><div class="pa-mrizka">
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><span class="pa-logo pa-logo--moneta"><img alt="Nadace Clementia Moneta" height="80" src="assets/partneri/logo-nadace-moneta.svg" width="604"/></span></span>
<span class="pa-telo"><span class="pa-jmeno">Nadace Clementia Moneta</span><span class="pa-popis">Nadace skupiny MONETA, která podporuje neziskové projekty v Česku.</span></span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><span class="pa-logo pa-logo--jmk"><img alt="Jihomoravský kraj" height="65" src="assets/partneri/logo-jihomoravsky-kraj.svg" width="636"/></span></span>
<span class="pa-telo"><span class="pa-jmeno">Jihomoravský kraj</span><span class="pa-popis">Přispívá na služby Vrby pro pozůstalé rodiny s dětmi na jižní Moravě.</span></span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><span class="pa-logo pa-logo--mpsv"><img alt="Ministerstvo práce a sociálních věcí" height="93" src="assets/partneri/logo-mpsv.svg" width="250"/></span></span>
<span class="pa-telo"><span class="pa-jmeno">Ministerstvo práce a sociálních věcí</span><span class="pa-popis">Podporuje sociální pomoc, kterou Vrba poskytuje pozůstalým rodičům a dětem.</span></span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><span class="pa-logo pa-logo--brno"><img alt="Statutární město Brno" height="65" src="assets/partneri/logo-brno.svg" width="279"/></span></span>
<span class="pa-telo"><span class="pa-jmeno">Statutární město Brno</span><span class="pa-popis">Město, kde má Vrba kancelář a kde pomáhá brněnským rodinám.</span></span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><span class="pa-logo pa-logo--infinit"><img alt="Infinit Maximus Brno" height="100" src="assets/partneri/logo-infinit.svg" width="147"/></span></span>
<span class="pa-telo"><span class="pa-jmeno">Infinit Maximus Brno</span><span class="pa-popis">Termální lázně a wellness v Brně, které stojí za Vrbou.</span></span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><span class="pa-logo pa-logo--bala"><img alt="BALA21" height="99" src="assets/partneri/logo-bala21.svg" width="80"/></span></span>
<span class="pa-telo"><span class="pa-jmeno">BALA21</span><span class="pa-popis">Výrobce probiotik a kombuchy, který Vrbu dlouhodobě podporuje.</span></span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><span class="pa-logo pa-logo--brenna"><img alt="Cestovní kancelář BRENNA" height="60" src="assets/partneri/logo-brenna.svg" width="237"/></span></span>
<span class="pa-telo"><span class="pa-jmeno">Cestovní kancelář BRENNA</span><span class="pa-popis">Česká cestovní kancelář, která Vrbu podporuje.</span></span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><span class="pa-logo pa-logo--vrba"><img alt="Nadační fond Vrba" height="100" src="assets/partneri/logo-nadacni-fond-vrba.svg" width="509"/></span></span>
<span class="pa-telo"><span class="pa-jmeno">Nadační fond Vrba</span><span class="pa-popis">Nadační fond, který projekt Daruj kousek sebe provozuje.</span></span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><span class="pa-logo pa-logo--zpatky"><img alt="Zpátky do života" height="100" src="assets/partneri/logo-zpatky-do-zivota.svg" width="349"/></span></span>
<span class="pa-telo"><span class="pa-jmeno">Zpátky do života</span><span class="pa-popis">Spolek pro pozůstalé rodiny, se kterým Vrba projekt vytváří.</span></span>
</a>
</div></div></section></main>
Sekce
Výrok a otázky
Dvousloupcová sekce: vlevo výrok se šedou druhou větou a odkazy, vpravo rozbalovací otázky s modrým plus. Třídy: pom, pom__vyrok, pom__odkazy, pom__otazky, faq__i, faq__a.
HTML kód
<main class="obsah" id="obsah"><section aria-labelledby="uv-vyrok" class="uv-sekce pom">
<div class="w pom__in">
<div class="pom__bok">
<p class="pom__perex">Daruj kousek sebe propojuje lidi, kteří chtějí pomoci, s rodinami,<br class="pom__zlom"/> které přišly o maminku nebo tatínka.</p>
<h2 class="pom__vyrok" id="uv-vyrok">Každý z nás má co nabídnout.<br class="pom__zlom"/> <span>Z nabídek dárců si pozůstalý rodič<br class="pom__zlom"/> vybere pomoc, kterou právě potřebuje.</span></h2>
<div class="pom__odkazy">
<a class="odkaz-sipka" href="#"><span>Najít pomoc</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a>
<a class="odkaz-sipka" href="#"><span>Nabídnout pomoc</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a>
</div>
</div>
<div class="pom__otazky">
<details class="faq__i" open=""><summary>Jak nabídnu pomoc?</summary><div class="faq__a">
<p>Zaregistrujte se jako dárce – stačí <span class="nb">e-mail</span> a telefon, žádné doklady – a rovnou v registraci popište, co nabízíte a kde. Naši koordinátoři zkontrolují a schválí váš účet i nabídku a zveřejní ji v katalogu i na mapě. Nabídku pak můžete ve svém účtu kdykoli upravit nebo smazat.</p>
<a class="odkaz-sipka" href="#"><span>Vložit nabídku</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a>
</div></details>
<details class="faq__i"><summary>Jak najdu pomoc?</summary><div class="faq__a">
<p>V katalogu a na mapě najdete pomoc podle kategorie, kraje nebo hledaného slova, například hlídání nebo doučování. Jakmile se zaregistrujete a my váš účet ověříme, uvidíte u nabídky kontakt na dárce a můžete mu rovnou napsat přes tlačítko „Kontaktovat dárce“.</p>
<a class="odkaz-sipka" href="#"><span>Prohlédnout nabídky</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a>
</div></details>
<details class="faq__i"><summary>Kdo uvidí můj kontakt?</summary><div class="faq__a">
<p>Kontakty dárců na webu veřejně neukazujeme. Vidí je jen ověřené pozůstalé rodiny, jejichž účet koordinátoři schválili.</p>
<a class="odkaz-sipka" href="#"><span>Jak chráníme osobní údaje</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a>
</div></details>
<details class="faq__i"><summary>Co potřebuje k registraci pozůstalá rodina?</summary><div class="faq__a">
<p>Úmrtní list jako fotku nebo sken (PDF, JPG nebo PNG), <span class="nb">e-mail</span> a telefon, na kterých vás zastihneme, a adresu trvalého bydliště. Úmrtní list uvidí jen koordinátoři projektu a pověření pracovníci NF Vrba.</p>
<a class="odkaz-sipka" href="#"><span>Registrace rodiny</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a>
</div></details>
<details class="faq__i"><summary>Kolik to stojí?</summary><div class="faq__a">
<p>Pro dárce je registrace i nabídka zdarma. Rodina platí jednorázový členský poplatek 400 Kč. Platební údaje i QR platbu jí pošleme <span class="nb">e-mailem</span> a najde je i ve svém účtu.</p>
<a class="odkaz-sipka" href="#"><span>Jak to funguje pro rodiny</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a>
</div></details>
</div>
</div>
</section></main>
Kategorie s kruhovou fotkou
Kruhová fotka vlevo a seznam kategorií vpravo. Třídy: pro-oblasti, pro-kruh, pro-kruh__foto, kat-pas.
Kruhová fotka vlevo, citát a jméno vpravo. Třídy: de-blok, op-iniciatorka, op-citat, op-jmeno.
HTML kód
<main class="obsah" id="obsah"><div class="ob-telo op-telo-pribeh"><div class="w"><section aria-labelledby="op-pribeh" class="de-blok op-blok op-iniciatorka">
<img alt="Petra Glosr Cvrkalová, ředitelka Nadačního fondu Vrba" class="op-blok__foto" height="900" src="assets/foto/web/o-projektu-petra-portret.webp" width="900"/>
<div class="op-blok__text">
<h2 id="op-pribeh">Vím, že to jde, vrátit se zpátky do života</h2>
<blockquote class="op-citat">
<p class="op-lead">„Ta samota, kdy děti spí, celý dům ztichne a jste tam jen vy sama, to je pravé peklo na zemi.“</p>
<p>„Ztráta nejbližší osoby je jednou z nejtěžších zkoušek na naší cestě životem. I já jsem takovou zkušeností prošla, když jsem z minuty na minutu nenávratně ztratila milujícího manžela a otce svých dvou dětí. … Věřte mi, jsem jedna z vás.“</p>
</blockquote>
<img alt="Podpis Petry Glosr Cvrkalové" class="op-podpis" height="60" src="assets/foto/web/podpis-cvrkalova-modry.svg" width="331"/>
<p class="op-jmeno"><strong>Petra Glosr Cvrkalová</strong><span>iniciátorka projektu a ředitelka Nadačního fondu Vrba</span></p>
</div>
</section></div></div></main>
Dvě výzvy
Dvě čárkované karty vedle sebe, každá s výčtem a tlačítkem. Třídy: op-cta, pro-karta, pro-seznam, pro-karta__btn.
HTML kód
<main class="obsah" id="obsah"><section aria-label="Hledáte pomoc, nebo chcete pomáhat?" class="op-cta">
<div class="w op-cta__in">
<div class="pro-karta">
<h2>Hledáte pomoc?</h2>
<p>Nabídky pomoci jsou určené rodinám s dětmi do 18 let, které přišly o mámu nebo tátu.</p>
<p class="op-cta__mezi">Co budete potřebovat</p>
<ul class="de-vlastnosti pro-seznam">
<li><svg aria-hidden="true" viewbox="0 0 24 24"><circle cx="12" cy="12" r="9.5"></circle><path d="m7.6 12.3 3 3 5.8-6.3"></path></svg>Úmrtní list jako fotku nebo sken</li>
<li><svg aria-hidden="true" viewbox="0 0 24 24"><circle cx="12" cy="12" r="9.5"></circle><path d="m7.6 12.3 3 3 5.8-6.3"></path></svg>E-mail, telefon a adresu trvalého bydliště</li>
<li><svg aria-hidden="true" viewbox="0 0 24 24"><circle cx="12" cy="12" r="9.5"></circle><path d="m7.6 12.3 3 3 5.8-6.3"></path></svg>Jednorázový členský poplatek 400 Kč</li>
</ul>
<a class="btn pro-karta__btn" href="#">Získat pomoc</a>
</div>
<div class="pro-karta">
<h2>Chcete také pomáhat?</h2>
<p>Pomoci může každý: jednotlivec, skupina i firma. Stačí si založit účet dárce a nabídku přidat.</p>
<p class="op-cta__mezi">Co můžete nabídnout</p>
<ul class="de-vlastnosti pro-seznam">
<li><svg aria-hidden="true" viewbox="0 0 24 24"><circle cx="12" cy="12" r="9.5"></circle><path d="m7.6 12.3 3 3 5.8-6.3"></path></svg>Svůj čas nebo dovednost</li>
<li><svg aria-hidden="true" viewbox="0 0 24 24"><circle cx="12" cy="12" r="9.5"></circle><path d="m7.6 12.3 3 3 5.8-6.3"></path></svg>Službu nebo věci</li>
<li><svg aria-hidden="true" viewbox="0 0 24 24"><circle cx="12" cy="12" r="9.5"></circle><path d="m7.6 12.3 3 3 5.8-6.3"></path></svg>Nabídku vložíte zdarma</li>
</ul>
<a class="btn pro-karta__btn" href="#">Nabídnout pomoc</a>
</div>
</div>
</section></main>
Čárkovaný pruh s nadpisem, tlačítkem a QR kódem. Třídy: ka-darci, ka-darci__text, pa-cta, pa-cta__qr.
HTML kód
<main class="obsah" id="obsah"><section class="pa"><div class="w"><aside aria-labelledby="pa-cta" class="ka-darci pa-cta">
<div class="ka-darci__text">
<h2 id="pa-cta">Chcete se přidat k partnerům?</h2>
<p>Ozvěte se nám a domluvíme, jak může vaše firma nebo instituce rodinám pomoci.</p>
<a class="btn" href="#">Ozvat se Vrbě</a>
</div>
<div class="pa-cta__qr"><span class="pa-cta__qr-popis">Nebo přispějte do sbírky</span><img alt="QR kód sbírky Koruna pro Vrbu" height="120" src="assets/qr-korunaprovrbu.svg" width="120"/><a href="#" rel="noopener" target="_blank">www.korunaprovrbu.cz</a></div>
</aside></div></section></main>
Karta projektu
Karta s rámečkem --linka, nadpisem, odkazem a QR kódem. Třídy: projekt-karta, projekt-karta__text, projekt-karta__qr.
HTML kód
<main class="obsah" id="obsah"><section class="uv-sekce uv-projekt"><div class="w"><div class="projekt-karta">
<img alt="Rodiny na Setkání pod Vrbou" class="projekt-karta__foto" height="480" src="assets/vrba/setkani-pod-vrbou.webp" width="720"/>
<div class="projekt-karta__text">
<h2 id="uv-projekt">Daruj kousek sebe je společný projekt Nadačního fondu Vrba, lidí a firem z celé ČR</h2>
<p>Propojuje pozůstalé rodiny s dětmi s lidmi, kterým jejich osud není lhostejný.</p>
<a class="odkaz-sipka" href="#"><span>Více o projektu</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a>
</div>
<div class="projekt-karta__qr"><img alt="QR kód služeb Nadačního fondu Vrba" height="133" src="assets/qr-vrba-sluzby.svg" width="133"/><a href="#" rel="noopener" target="_blank">www.nfvrba.cz</a></div>
</div></div></section></main>
Kontakt
Kontaktní formulář
Formulář po blocích s poli, rádiusy 200 px a modrým tlačítkem; odeslání je zde vypnuté. Třídy: uc-karta--bloky, ko-formular, form, form__f, form__odeslat.
HTML kód
<main class="obsah" id="obsah"><section class="ko-psani"><div class="w ko-psani__in"><div class="uc-karta uc-karta--bloky ko-formular">
<div class="form__ok" id="odeslano" tabindex="-1">
<h3>Děkujeme, zpráva k nám dorazila</h3>
<p>Brzy se vám ozveme na <span class="nb">e-mail</span> nebo telefon, který jste uvedli.</p>
</div>
<form class="form" id="formular">
<p class="form__chyba" hidden="" role="alert">Zprávu se nepodařilo odeslat. Zkontrolujte prosím vyplněná pole, nebo nám zavolejte na <a href="#">725 062 763</a>.</p>
<fieldset>
<legend><h2>Napište nám</h2></legend>
<div class="form__f">
<label for="f-jmeno">Jméno a příjmení</label>
<input aria-describedby="f-jmeno-err" autocomplete="name" data-msg="Vyplňte jméno a příjmení." id="f-jmeno" maxlength="200" name="jmeno" required="" type="text"/>
<p class="field__err" hidden="" id="f-jmeno-err"></p>
</div>
<div class="form__dvoj">
<div class="form__f">
<label for="f-email">E-mail</label>
<input aria-describedby="f-email-err" autocomplete="email" data-msg="Vyplňte e-mail." data-msg-format="Zadejte e-mail ve tvaru jmeno@domena.cz." id="f-email" maxlength="200" name="email" required="" spellcheck="false" type="email"/>
<p class="field__err" hidden="" id="f-email-err"></p>
</div>
<div class="form__f">
<label for="f-telefon">Telefon</label>
<input aria-describedby="f-telefon-err" autocomplete="tel" data-msg="Vyplňte telefon." data-msg-format="Zadejte telefon, například 777 123 456 nebo +420 777 123 456." id="f-telefon" maxlength="40" name="telefon" required="" type="tel"/>
<p class="field__err" hidden="" id="f-telefon-err"></p>
</div>
</div>
<div class="form__f">
<label for="f-zprava">Zpráva nebo dotaz</label>
<textarea aria-describedby="f-zprava-err" data-msg="Napište nám zprávu nebo dotaz." id="f-zprava" maxlength="5000" name="zprava" required="" rows="5"></textarea>
<p class="field__err" hidden="" id="f-zprava-err"></p>
</div>
</fieldset>
<div class="form__f form__volba">
<input aria-describedby="f-souhlas-err" data-msg="Potvrďte souhlas se zpracováním osobních údajů." id="f-souhlas" name="souhlas" required="" type="checkbox" value="1"/>
<label for="f-souhlas">Souhlasím se <a href="#" target="_blank">zpracováním osobních údajů</a> za účelem odpovědi na mou zprávu.</label>
<p class="field__err" hidden="" id="f-souhlas-err"></p>
</div>
<div aria-hidden="true" class="form__hp"><label for="f-web">Web</label><input autocomplete="off" id="f-web" name="web" tabindex="-1" type="text"/></div>
<input name="kontrola" type="hidden" value=""/>
<button class="btn form__odeslat" type="submit">Odeslat zprávu</button>
</form>
</div></div></section></main>
Údaje a odkazy
Čárkovaná karta s kontaktními údaji oddělenými linkami. Třídy: pro-karta, ko-vrba, ko-udaje, ko-udaje__popisek.
