Nadační fond Vrba

Nadační fond pomáhá po celé ČR pozůstalým maminkám, tatínkům a dětem vrátit se do života.

Náhled webu Nadační fond Vrba

Základní pravidla

  • Celý web je v rodině Poppins 400 až 700, proměnná --pismo. Nadpisy h2 a tučné v textu používají řez 600 z rodiny Poppins Text.
  • Akcent je zelená --zelena #31b308: tlačítka, puntíky, fajfky, ikony. Nikdy ne na text odkazů.
  • Modrá --modra #004cbd je pro kolečka kroků, +/- v otázkách a rámečky karet při najetí.
  • Tmavá --tmava #0a1e3b je text karet, výroky st-vyrok, menu a pruh Podpořte nás. Světlá --svetla #f0f5fc je podklad šedých pásů.
  • Odkazy jsou černé --text, podtržené 1 px, při najetí bez podtržení. V menu a patičce obráceně.
  • Na tmavém podkladu je vše bílé. Web uvádíme jako www.nfvrba.cz.
  • Karty mají rámeček 1 px --linka a rádius 12 px. Při najetí se mění jen barva rámečku (transition:border-color .3s), nikdy stín, zdvih ani zoom fotky.
  • Stín mají jen hlavička, podmenu, panel výběru a křížek vyskakovacího okna. Jinde žádné stíny.
  • Tlačítka btn jsou pilulky border-radius:200px, rámeček 2 px, verzálky 14 px, váha 700. Při najetí se prosvítne pozadí a text i rámeček zezelenají.
  • Nové stránky začínají záhlavím st-hlava s výrokem st-vyrok a perexem st-uvod, bez štítku nad nadpisem.
  • Žádné animace textu, parallaxy, fade-in ani odpočty. Pohyb mají jen šipky, vysouvací menu a pásy fotek.
  • Fokus bez obrysu: :focus,:focus-visible{outline:0}, pole formuláře dostane tmavý rámeček.
  • Do textu patří pomlčka - a české uvozovky. Nezlomitelné mezery za jednopísmennými předložkami dělá build.

Jazyk

  • Píšeme „ztráta“, ne „smrt“, a „pozůstalý“, ne „ovdovělý“, „vdova“ nebo „vdovec“.
  • Hashtagy bez diakritiky, malými písmeny.

Sekce a rozměry

  • Obsah je v kontejneru w: šířka calc(100% - 180px), max 1480 px. Úzké bloky w--uzka a sl-uzky mají 900 px.
  • Sekce kolem záhlaví mají nahoře clamp(70px,7vw,100px), dole clamp(80px,8vw,120px).
  • Hlavička --hlava je 95 px, na telefonu 64 px. Zlomy jsou 1399, 999 a 690 px.

Barvy

Značka

--zelena#31b308Tlačítka, puntíky, fajfky, ikony, kruh přehrávače, zelený rámeček karet při najetí.
--tmava#0a1e3bVýrok st-vyrok, menu, text karet, pruh Podpořte nás.
--modra#004cbdKolečka kroků, +/- otázek, rámeček karet při najetí, citát O nás.

Plochy

--svetla#f0f5fcSvětlé sekce, boxy s linkou vlevo, aktivní volba.
bílá#ffffffPodklad stránky a karet, text na tmavém.
#f7ffee#f7ffeePozadí boxu termínu tábora sl-termin.

Text

--text#000000Text, nadpisy a všechny odkazy.
--text2#253043Podtext st-uvod, perexy, text právních stránek.
#657585#657585Šedé popisy karet.
#66758c#66758cModrošedé popisky, data, nápovědy.
--tlumena#777777Prázdný výběr a najetí čárkovaných pilulek.

Linky

--linka#e3e8f0Rámečky karet, linky otázek a patičky.
#d9def4#d9def4Rámeček karty služby sl-karta.
#b9bfd7#b9bfd7Čárkovaný rámeček sl-ref, sl-skupina, pa-cta.
#c8c8c8#c8c8c8Čárkované pilulky témat a štítků článků.
#cdd5e0#cdd5e0Rámeček polí formuláře.
#b8c2d0#b8c2d0Rámeček voleb a zaškrtávátek.

Stavy

#eceef2#eceef2Aktuální strana stránkování.
--chyba#d0281eChyby formulářů, křížky, štítek Mýtus.

Typografie

Rozměry

Mezery a šířky

NázevHodnotaUkázkaPoužití
--hlava95pxVýška hlavičky, 64 px od 999 px.
.wcalc(100% - 180px)Šířka kontejneru, max 1480 px, od 999 px 88 %.
sekce záhlavíclamp(70px,7vw,100px) 0 clamp(80px,8vw,120px)Odsazení sekcí pod st-hlava.
mřížka karet34pxMezera karet kontaktu a partnerů, projekty 50 px.

Rádiusy

NázevHodnotaUkázkaPoužití
tlačítka200pxTlačítka btn a pilulky.
karty a boxy12pxVýchozí rádius karet, boxů a panelů.
fotky15pxFotky služeb a karty úvodu.
pole a drobné fotky8pxPole formuláře, fotky článků.
kolečka50%Kroky, stránkování, ikony sítí, portréty.

Značka a obrazové prvky

Logo
Logo

Komponenty

Navigace

Hlavička

Bílá lepivá hlavička s logem a menu, jediná se stínem. Třídy: hlava, hlava__in, nav, nav__sub.

HTML kód
<header class="hlava">
<div class="hlava__in">
<a class="hlava__logo" href="#"><svg aria-label="Nadační fond Vrba" class="hlava__svg" role="img" style="fill-rule:evenodd;clip-rule:evenodd" viewbox="0 0 4053.1 719.14" xmlns="http://www.w3.org/2000/svg"><defs><style>.lg3 {fill:#FEFEFE;fill-rule:nonzero}.lg2 {fill:#004CBD;fill-rule:nonzero}.lg0 {fill:url(#lg-zlata)}.lg1 {fill:url(#lg-zlata2);fill-rule:nonzero}</style><lineargradient gradientunits="userSpaceOnUse" id="lg-zlata" x1="335.2" x2="779.07" y1="-0.77" y2="719.91"><stop offset="0" style="stop-opacity:1; stop-color:#F2D057"></stop><stop offset="0.690196" style="stop-opacity:1; stop-color:#BFA150"></stop><stop offset="1" style="stop-opacity:1; stop-color:#A58235"></stop></lineargradient><lineargradient gradientunits="userSpaceOnUse" id="lg-zlata2" x1="3312.6" x2="3331.87" y1="259.03" y2="460.11"><stop offset="0" style="stop-opacity:1; stop-color:#C8A853"></stop><stop offset="0.690196" style="stop-opacity:1; stop-color:#BFA150"></stop><stop offset="1" style="stop-opacity:1; stop-color:#A58235"></stop></lineargradient></defs><g id="Vrstva_x0020_1"><path class="lg0" d="M317.11 12.2l0 703.69 -182.11 0 0 -482.79 -135 0 0 -115.65c9.3,-2.95 18.81,-6.27 28.14,-8.93 40.26,-10.37 72.99,-22.99 98.17,-37.85 12.58,-7.43 24.9,-15.96 36.95,-25.59 12.09,-9.65 23.9,-20.4 35.42,-32.22l9.31 -10.62 109.12 0 0 9.96z"></path><path class="lg0 logo__nula" d="M754.69 0c198.59,0 359.58,160.98 359.58,359.57 0,198.58 -160.99,359.57 -359.58,359.57 -198.58,0 -359.57,-160.99 -359.57,-359.57 0,-198.59 160.99,-359.57 359.57,-359.57z"></path><path class="lg0 logo__srdce" d="M754.69 683.57C538.69 539.57 394.69 395.57 394.69 237.17C394.69 121.97 481.09 35.57 589.09 35.57C661.09 35.57 718.69 78.77 754.69 136.37C790.69 78.77 848.29 35.57 920.29 35.57C1028.29 35.57 1114.69 121.97 1114.69 237.17C1114.69 395.57 970.69 539.57 754.69 683.57Z"></path><path class="lg1" d="M2681.24 430.56l0 -106.48 -22.86 0 0 68.43 -44.15 -68.43 -22.86 0 0 106.48 22.86 0 0 -67.01 43.87 67.01 23.14 0zm121.36 -16.75l6.68 16.75 24.42 0 -46.29 -106.48 -19.45 0 -45.72 106.48 23.57 0 6.67 -16.75 50.12 0zm-7.1 -18.32l-35.64 0 17.89 -44.86 17.75 44.86zm79.69 -71.41l-0.14 106.48 36.13 0.14c29.53,0.15 53.67,-16.75 53.67,-55.23 0,-29.39 -16.61,-52.53 -53.67,-51.96l-35.99 0.57zm22.79 19.59l14.91 -0.28c13.34,-0.14 27.25,7.66 27.25,31.8 0,27.12 -13.91,35.21 -27.83,35.35l-14.33 0 0 -66.87zm181.84 70.14l6.67 16.75 24.42 0 -46.28 -106.48 -19.45 0 -45.72 106.48 23.57 0 6.67 -16.75 50.12 0zm-7.1 -18.32l-35.64 0 17.89 -44.86 17.75 44.86zm121.07 -80.22l20.45 0 23.14 -29.1 -18.88 0 -14.77 14.48 -14.62 -14.48 -19.45 0 24.13 29.1zm38.62 84.34c-6.1,6.11 -14.34,11.07 -25.41,11.07 -22.01,0 -32.8,-16.32 -32.8,-33.36 0,-17.18 10.93,-34.79 32.8,-34.79 10.08,0 18.74,4.83 24.13,10.51l15.2 -15.76c-9.66,-9.65 -22.29,-15.48 -39.33,-15.48 -32.94,0 -57.5,24 -57.5,55.24 0,29.1 22.43,55.51 57.5,55.51 17.46,0 31.09,-6.96 40.75,-16.61l-15.34 -16.33zm149.33 30.95l0 -106.48 -22.86 0 0 68.43 -44.15 -68.43 -22.86 0 0 106.48 22.86 0 0 -67.01 43.87 67.01 23.14 0zm66.41 -115.29l19.17 -29.1 -24.28 0 -12.49 29.1 17.6 0zm2.98 115.29l0 -106.48 -22.71 0 0 106.48 22.71 0zm135.38 -86.32l47 0 0 -20.16 -69.86 0 0 106.48 22.86 0 0 -35.59 40.75 0.14 0 -18.62 -40.75 0 0 -32.25zm139.82 -22.44c-35.21,0 -57.08,26.56 -57.08,55.66 0,29.11 21.87,55.51 57.08,55.51 35.07,0 57.07,-26.83 57.07,-55.93 0,-28.68 -22,-55.24 -57.07,-55.24zm0 21.45c22.01,0 32.37,17.17 32.37,34.07 0,16.75 -10.36,34.08 -32.37,34.08 -22.01,0 -32.37,-17.33 -32.37,-34.08 0,-16.9 10.36,-34.07 32.37,-34.07zm189.79 87.31l0 -106.48 -22.86 0 0 68.43 -44.16 -68.43 -22.85 0 0 106.48 22.85 0 0 -67.01 43.88 67.01 23.14 0zm47.32 -106.48l-0.15 106.48 36.14 0.14c29.53,0.15 53.67,-16.75 53.67,-55.23 0,-29.39 -16.62,-52.53 -53.67,-51.96l-35.99 0.57zm22.78 19.59l14.91 -0.28c13.35,-0.14 27.26,7.66 27.26,31.8 0,27.12 -13.91,35.21 -27.83,35.35l-14.34 0 0 -66.87z"></path><path class="lg2" d="M1464.11 513.5l115.79 -305.77 -73.39 0 -79.9 242.58 -81.95 -242.58 -70.94 0 114.56 305.77 75.83 0zm311.9 0l72.97 0 -70.12 -109.26c39.96,-15.9 61.56,-48.52 61.56,-94.99 0,-61.16 -33.84,-105.19 -121.49,-103.56l-104.17 2.04 -0.41 305.77 65.85 0 0 -98.25 32.2 0 4.49 0 59.12 98.25zm-95.81 -151.66l0 -101.11 33.83 -0.82c27.73,-1.22 54.23,11.83 54.23,49.34 0,29.35 -15.49,52.59 -53,52.59l-35.06 0zm208.94 -154.11l-0.41 305.77 122.52 0c69.71,0 111.3,-27.31 111.3,-90.1 0,-35.06 -24.87,-62.79 -64.83,-71.35 34.66,-13.86 42.41,-39.95 42.41,-66.86 0,-46.48 -33.44,-77.46 -98.26,-77.46l-112.73 0zm63.81 55.04l38.32 0c28.54,0 40.36,15.49 40.36,35.47 0,22.83 -12.23,37.51 -41.17,37.51l-37.51 0 0 -72.98zm-2.04 121.49l56.26 0c29.35,0 45.66,15.9 45.66,37.1 0,25.28 -19.16,37.51 -44.84,37.51l-57.08 0 0 -74.61zm418.3 81.14l19.16 48.1 70.13 0 -132.92 -305.77 -55.85 0 -131.28 305.77 67.68 0 19.16 -48.1 143.92 0zm-20.39 -52.6l-102.33 0 51.37 -128.83 50.96 128.83z"></path><path class="lg3 logo__text" d="M511.38 347.74l0 -121.45 27.33 0 0 121.45 -27.33 0zm88.21 1.6c-7.56,0 -14.11,-1.25 -19.65,-3.76 -5.54,-2.5 -10.15,-5.85 -13.83,-10.06 -3.67,-4.21 -6.39,-8.92 -8.14,-14.14 -1.76,-5.22 -2.64,-10.61 -2.64,-16.15 0,-5.32 0.85,-10.6 2.56,-15.82 1.7,-5.22 4.31,-9.93 7.83,-14.14 3.51,-4.21 8.01,-7.56 13.5,-10.07 5.48,-2.5 12.01,-3.75 19.57,-3.75 8.1,0 15.21,1.73 21.34,5.19 6.12,3.46 10.92,8.52 14.38,15.18 3.46,6.66 5.19,14.73 5.19,24.21l0 6.4 -56.89 0c0.32,4.36 1.89,8.17 4.72,11.42 2.82,3.25 6.84,4.88 12.06,4.88 3.94,0 6.96,-0.72 9.03,-2.16 2.08,-1.44 3.49,-2.91 4.24,-4.4 0.74,-1.49 1.12,-2.24 1.12,-2.24l25.08 0c0,0 -0.26,0.99 -0.79,2.96 -0.54,1.97 -1.55,4.42 -3.04,7.35 -1.49,2.93 -3.68,5.86 -6.55,8.79 -2.88,2.93 -6.69,5.38 -11.43,7.35 -4.74,1.98 -10.62,2.96 -17.66,2.96zm-16.94 -52.73l30.85 0c-0.22,-5.01 -1.73,-8.79 -4.56,-11.35 -2.82,-2.56 -6.36,-3.84 -10.63,-3.84 -4.15,0 -7.69,1.28 -10.62,3.84 -2.93,2.56 -4.61,6.34 -5.04,11.35zm112.35 52.73c-7.25,0 -12.98,-1.12 -17.18,-3.35 -4.21,-2.24 -7.27,-5.04 -9.19,-8.39 -1.92,-3.36 -3.14,-6.77 -3.68,-10.23 -0.53,-3.47 -0.8,-6.42 -0.8,-8.87l0 -33.72 -14.06 0 0 -21.73 14.06 0 0 -20.94 27.33 0 0 20.94 17.26 0 0 21.73 -17.26 0 0 32.92c0,3.2 0.88,5.73 2.64,7.59 1.75,1.87 4.77,2.8 9.03,2.8 1.81,0 3.4,-0.14 4.79,-0.4 1.39,-0.27 2.08,-0.4 2.08,-0.4l0 20.45c0,0 -1.52,0.27 -4.56,0.8 -3.03,0.53 -6.52,0.8 -10.46,0.8zm68.23 29.57l0 -115.86 27.33 0 0 10.06 1.28 0c0.21,-0.42 1.17,-1.59 2.87,-3.51 1.71,-1.92 4.32,-3.76 7.83,-5.51 3.52,-1.76 7.99,-2.64 13.43,-2.64 6.28,0 11.72,1.25 16.3,3.75 4.58,2.51 8.39,5.86 11.43,10.07 3.03,4.21 5.32,8.92 6.86,14.14 1.55,5.22 2.32,10.55 2.32,15.98 0,5.44 -0.77,10.77 -2.32,15.99 -1.54,5.22 -3.83,9.93 -6.86,14.14 -3.04,4.21 -6.85,7.56 -11.43,10.06 -4.58,2.51 -10.02,3.76 -16.3,3.76 -5.44,0 -9.91,-0.91 -13.43,-2.72 -3.51,-1.81 -6.12,-3.65 -7.83,-5.51 -1.7,-1.86 -2.66,-3.01 -2.87,-3.44l-1.28 0 0 41.24 -27.33 0zm26.53 -73.52c0,3.63 0.64,7.12 1.92,10.47 1.28,3.36 3.25,6.13 5.91,8.31 2.66,2.19 5.97,3.28 9.91,3.28 3.94,0 7.24,-1.09 9.91,-3.28 2.66,-2.18 4.63,-4.95 5.91,-8.31 1.28,-3.35 1.92,-6.84 1.92,-10.47 0,-3.62 -0.64,-7.11 -1.92,-10.46 -1.28,-3.36 -3.25,-6.13 -5.91,-8.31 -2.67,-2.19 -5.97,-3.28 -9.91,-3.28 -3.94,0 -7.25,1.09 -9.91,3.28 -2.66,2.18 -4.63,4.95 -5.91,8.31 -1.28,3.35 -1.92,6.84 -1.92,10.46zm79.42 42.35l0 -84.69 27.01 0 0 12.78 0.96 0c0.85,-2.24 2.1,-4.45 3.75,-6.63 1.66,-2.18 3.97,-4.02 6.95,-5.51 2.99,-1.5 6.93,-2.24 11.83,-2.24 2.34,0 4.21,0.16 5.59,0.48 1.39,0.32 2.08,0.48 2.08,0.48l0 27c0,0 -0.74,-0.16 -2.24,-0.47 -1.49,-0.33 -3.56,-0.48 -6.23,-0.48 -7.56,0 -13.18,2.02 -16.86,6.07 -3.67,4.05 -5.51,10.65 -5.51,19.81l0 33.4 -27.33 0zm112.18 1.6c-9.58,0 -17.73,-2.02 -24.44,-6.07 -6.72,-4.05 -11.86,-9.43 -15.43,-16.14 -3.57,-6.71 -5.35,-13.96 -5.35,-21.74 0,-7.77 1.78,-15.02 5.35,-21.73 3.57,-6.71 8.71,-12.09 15.43,-16.14 6.71,-4.05 14.86,-6.07 24.44,-6.07 9.7,0 17.9,2.02 24.61,6.07 6.71,4.05 11.86,9.43 15.43,16.14 3.56,6.71 5.35,13.96 5.35,21.73 0,7.78 -1.79,15.03 -5.35,21.74 -3.57,6.71 -8.72,12.09 -15.43,16.14 -6.71,4.05 -14.91,6.07 -24.61,6.07zm0 -22.05c5.65,0 10.05,-2.16 13.19,-6.47 3.14,-4.32 4.71,-9.46 4.71,-15.43 0,-5.96 -1.57,-11.1 -4.71,-15.42 -3.14,-4.31 -7.54,-6.47 -13.19,-6.47 -5.54,0 -9.9,2.16 -13.1,6.47 -3.2,4.32 -4.79,9.46 -4.79,15.42 0,5.97 1.59,11.11 4.79,15.43 3.2,4.31 7.56,6.47 13.1,6.47zm-322.48 200.91l-30.68 -84.7 27.16 0 18.06 54.33 17.42 -54.33 27.17 0 -30.84 84.7 -28.29 0zm120.97 -96.04l-19.66 -0.16 12.63 -28.61 24.93 0 -17.9 28.77zm-18.7 9.74c5.54,0 10.04,0.91 13.51,2.72 3.46,1.81 6.07,3.65 7.83,5.51 1.75,1.87 2.74,3.01 2.96,3.44l1.27 0 0 -10.07 27.33 0 0 84.7 -27.33 0 0 -10.07 -1.27 0c-0.22,0.43 -1.21,1.6 -2.96,3.52 -1.76,1.91 -4.37,3.75 -7.83,5.51 -3.47,1.76 -7.97,2.64 -13.51,2.64 -6.18,0 -11.55,-1.25 -16.14,-3.76 -4.58,-2.5 -8.41,-5.86 -11.5,-10.07 -3.09,-4.2 -5.38,-8.92 -6.87,-14.14 -1.5,-5.22 -2.24,-10.55 -2.24,-15.98 0,-5.43 0.74,-10.76 2.24,-15.98 1.49,-5.22 3.78,-9.94 6.87,-14.14 3.09,-4.21 6.92,-7.57 11.5,-10.07 4.59,-2.51 9.96,-3.76 16.14,-3.76zm8.63 21.9c-3.94,0 -7.24,1.09 -9.9,3.27 -2.67,2.19 -4.64,4.96 -5.92,8.31 -1.28,3.36 -1.92,6.85 -1.92,10.47 0,3.62 0.64,7.11 1.92,10.47 1.28,3.35 3.25,6.12 5.92,8.31 2.66,2.18 5.96,3.27 9.9,3.27 3.95,0 7.22,-1.09 9.83,-3.27 2.61,-2.19 4.58,-4.96 5.91,-8.31 1.33,-3.36 2,-6.85 2,-10.47 0,-3.62 -0.67,-7.11 -2,-10.47 -1.33,-3.35 -3.3,-6.12 -5.91,-8.31 -2.61,-2.18 -5.88,-3.27 -9.83,-3.27zm99.24 66c-7.24,0 -13.23,-0.96 -17.97,-2.88 -4.74,-1.92 -8.5,-4.32 -11.27,-7.19 -2.77,-2.88 -4.85,-5.76 -6.23,-8.63 -1.39,-2.88 -2.3,-5.27 -2.72,-7.19 -0.43,-1.92 -0.64,-2.88 -0.64,-2.88l24.93 0c0,0 0.18,0.45 0.56,1.36 0.37,0.9 1.07,1.97 2.08,3.2 1.01,1.22 2.53,2.29 4.55,3.19 2.03,0.91 4.74,1.36 8.15,1.36 4.16,0 6.87,-0.8 8.15,-2.4 1.28,-1.6 1.92,-3.03 1.92,-4.31 0,-3.2 -2.72,-5.33 -8.15,-6.4l-11.67 -2.07c-5.11,-0.85 -9.91,-2.24 -14.38,-4.16 -4.47,-1.91 -8.1,-4.58 -10.87,-7.99 -2.77,-3.4 -4.15,-7.83 -4.15,-13.26 0,-5.22 1.36,-9.91 4.07,-14.06 2.72,-4.16 6.66,-7.46 11.83,-9.91 5.17,-2.45 11.43,-3.68 18.78,-3.68 6.71,0 12.3,0.91 16.77,2.72 4.48,1.81 8.05,4.05 10.71,6.71 2.67,2.67 4.64,5.33 5.92,7.99 1.27,2.66 2.13,4.9 2.55,6.71 0.43,1.82 0.64,2.72 0.64,2.72l-24.13 0c0,0 -0.32,-0.64 -0.96,-1.92 -0.64,-1.27 -1.89,-2.55 -3.75,-3.83 -1.87,-1.28 -4.66,-1.92 -8.39,-1.92 -3.73,0 -6.29,0.72 -7.67,2.16 -1.39,1.44 -2.08,2.9 -2.08,4.39 0,1.92 0.91,3.33 2.72,4.24 1.81,0.9 4.1,1.62 6.87,2.15l10.7 2.08c8.42,1.6 15.32,4.4 20.7,8.39 5.38,4 8.07,9.83 8.07,17.5 0,7.88 -3.07,14.49 -9.19,19.82 -6.13,5.32 -14.94,7.99 -26.45,7.99z"></path></g></svg></a>
<nav aria-label="Hlavní menu">
<ul class="nav">
<li class="nav__pod"><a href="#">Služby</a>
<ul class="nav__sub">
<li><a href="#">Administrativní podpora</a></li>
<li><a href="#">Psychologická podpora</a></li>
<li><a href="#">Online podpůrné skupiny</a></li>
<li><a href="#">Vrběnky</a></li>
<li><a href="#">Řemeslník</a></li>
<li><a href="#">Setkání pod Vrbou</a></li>
<li><a href="#">Tábor</a></li>
</ul>
</li>
<li><a href="#">Odznáček truchlení</a></li>
<li><a href="#">Aktuálně</a></li>
<li><a href="#">O nás</a></li>
<li><a href="#">Projekty</a></li>
<li><a href="#">Partneři</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#" rel="noopener" target="_blank">Podpořte nás</a></li>
<li><a href="#" rel="noopener" target="_blank">E-shop</a></li>
</ul>
</nav>
<button aria-controls="ocm" aria-expanded="false" class="hlava__menu" type="button">Menu<span aria-hidden="true" class="ocm__lines"><i></i><i></i><i></i></span></button>
</div>
</header>

Úvod

Úvod

Fotka s překryvem a bílým nadpisem na střed. Třídy: uv-hero, uv-hero__foto.

HTML kód
<main class="obsah" id="obsah"><section class="uv-hero">
<img alt="Odznáček truchlení s vrbou na kamenné zídce v parku" class="uv-hero__foto" fetchpriority="high" height="810" src="assets/foto/odznacek-uvod.webp" width="1920"/>
<div class="w">
<h1>Po celé ČR pomáháme pozůstalým maminkám, tatínkům a dětem vrátit se zpátky do života.</h1>
</div>
</section></main>

Záhlaví stránky

Výrok a perex začínající každou novou stránku. Třídy: st-hlava, st-vyrok, st-uvod.

HTML kód
<main class="obsah" id="obsah"><section class="pj"><div class="w"><div class="st-hlava">
<h1 class="st-vyrok">Projekty, do kterých se může zapojit každý z vás.</h1>
<p class="st-uvod">Vedle přímé pomoci rodinám rozvíjíme projekty, které pomáhají pozůstalým i jejich okolí.<br class="st-zlom"/> Přispět korunou, nabídnout svůj čas nebo si pořídit odznáček či kalendář.</p>
</div></div></section></main>

Prvky

Tlačítka

Plné tlačítko je hlavní akce, obrysové doplňková. Třídy: btn, btn--obrys.

HTML kód
<div style="display:flex;flex-wrap:wrap;gap:16px;padding:32px"><a class="btn" href="#">Požádat o Vrběnku</a><a class="btn btn--obrys" href="#">Zpět na úvod</a></div>

Odkaz se šipkou

Černý odkaz se šipkou, která při najetí ujede o 4 px. Třída: odkaz-sipka.

HTML kód
<main class="obsah" id="obsah"><section class="ko-uvod"><div class="w"><div class="ko-karty"><div class="ko-karta"><p class="ko-karta__odkaz"><a class="odkaz-sipka" href="#" rel="noopener" target="_blank"><span>Zobrazit na mapě</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a></p></div></div></div></section></main>

Témata článků

Čárkované pilulky s počtem článků, aktivní je modrá. Třídy: cl-temata, cl-temata__seznam, cl-temata__pocet.

HTML kód
<main class="obsah" id="obsah"><section class="cl-vypis w"><nav aria-labelledby="cl-temata-nadpis" class="cl-temata">
<h2 class="cl-temata__nadpis" id="cl-temata-nadpis">Témata</h2>
<ul class="cl-temata__seznam">
<li><a aria-current="true" data-tema="" href="#">Vše<span class="cl-temata__pocet">67</span></a></li>
<li><a data-tema="udalo-se" href="#">Událo se<span class="cl-temata__pocet">27</span></a></li>
<li><a data-tema="media" href="#">Média<span class="cl-temata__pocet">26</span></a></li>
<li><a data-tema="pribehy" href="#">Příběhy pozůstalých<span class="cl-temata__pocet">13</span></a></li>
<li><a data-tema="setkani-pod-vrbou" href="#">Setkání pod Vrbou<span class="cl-temata__pocet">13</span></a></li>
<li><a data-tema="blog-petry-cvrkalove" href="#">Blog Petry Cvrkalové<span class="cl-temata__pocet">11</span></a></li>
<li><a data-tema="aktualne" href="#">Aktuálně<span class="cl-temata__pocet">8</span></a></li>
<li><a data-tema="charitativni-akce" href="#">Charitativní akce<span class="cl-temata__pocet">8</span></a></li>
<li><a data-tema="prakticka-pomoc" href="#">Praktická pomoc<span class="cl-temata__pocet">5</span></a></li>
<li><a data-tema="sbirky" href="#">Sbírky<span class="cl-temata__pocet">5</span></a></li>
<li><a data-tema="dokumenty" href="#">Dokumenty<span class="cl-temata__pocet">4</span></a></li>
<li><a data-tema="tabor" href="#">Tábor<span class="cl-temata__pocet">4</span></a></li>
<li><a data-tema="konference" href="#">Konference<span class="cl-temata__pocet">2</span></a></li>
<li><a data-tema="svepomocne-skupiny" href="#">Podpůrné skupiny<span class="cl-temata__pocet">2</span></a></li>
<li><a data-tema="madeira" href="#">Madeira<span class="cl-temata__pocet">1</span></a></li>
</ul>
</nav></section></main>

Stránkování

Kulatá čísla stran a tlačítka Předchozí a Další. Třídy: cl-strankovani, cl-strana.

HTML kód
<main class="obsah" id="obsah"><section class="cl-vypis w"><nav aria-label="Stránkování článků" class="cl-strankovani">
<a class="btn btn--obrys cl-strankovani__krok" href="#" rel="prev"><svg aria-hidden="true" class="sipka sipka--zpet" viewbox="0 0 24 24"><path d="M20 12H5M11 6l-6 6 6 6"></path></svg><span>Předchozí</span></a>
<ol class="cl-strankovani__cisla">
<li><a aria-label="Strana 1" class="cl-strana" href="#">1</a></li>
<li><span aria-current="page" class="cl-strana">2</span></li>
<li><a aria-label="Strana 3" class="cl-strana" href="#">3</a></li>
</ol>
<a class="btn cl-strankovani__krok cl-strankovani__krok--dal" href="#" rel="next"><span>Další</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a>
</nav></section></main>

Časté otázky

Rozbalovací otázky s modrým plus, linky jen mezi otázkami. Třídy: faq, faq__i, faq__a.

HTML kód
<main class="obsah" id="obsah"><section class="sl-sek sl-pt80 sl-pb100"><div class="w sl-uzky"><div class="faq sl-faq">
<details class="faq__i">
<summary>Je psychologická podpora opravdu zdarma?</summary>
<div class="faq__a">
<p>Ano, psychologická podpora je pro klienty Nadačního fondu Vrba zcela bezplatná. Registrace do Nadačního fondu Vrba je také zdarma.</p>
</div>
</details>
<details class="faq__i">
<summary>Musím se účastnit pravidelně?</summary>
<div class="faq__a">
<p>Ne, frekvenci určujete vy. Nabízíme jednorázové konzultace i pravidelnou dlouhodobou podporu - dle toho, co potřebujete.</p>
</div>
</details>
<details class="faq__i">
<summary>Nabízíte i psychologickou podporu pro děti?</summary>
<div class="faq__a">
<p>Ano. Spolupracujeme s odborníky, kteří mají zkušenosti s prací s dětmi po ztrátě rodiče. Podpora je dostupná pro různé věkové kategorie.</p>
</div>
</details>
<details class="faq__i">
<summary>Probíhá psychologická podpora online nebo osobně?</summary>
<div class="faq__a">
<p>Nabízíme obě možnosti. Osobní setkání i online konzultace jsou dostupné po celé ČR.</p>
</div>
</details>
<details class="faq__i">
<summary>Mohu využívat i jiné služby Nadačního fondu Vrba?</summary>
<div class="faq__a">
<p>Ano! Nadační fond Vrba nabízí <a href="#">další služby</a>:</p>
<ol>
<li><a href="#">Administrativní podporu</a></li>
<li><a href="#">Psychologickou podporu</a></li>
<li><a href="#">Online podpůrné skupiny</a></li>
<li><a href="#">Služby Vrběnek</a></li>
<li><a href="#">Řemeslníka</a></li>
<li><a href="#">Tábor pro děti</a></li>
<li><a href="#">Setkání pod Vrbou</a></li>
</ol>
</div>
</details>
</div></div></section></main>

Kroky

Modrá kolečka s čísly a čárkovanou linkou mezi nimi. Třídy: sl-kroky, sl-cislo.

HTML kód
<main class="obsah" id="obsah"><section class="sl-sek sl-pt100 sl-pb70"><div class="w"><div class="sl-mriz sl-mriz--3 sl-kroky">
<div class="sl-sloupec sl-stred">
<span class="sl-cislo">01</span>
<h3><strong>Odešlete žádost</strong></h3>
<div class="sl-male sl-mw450">
<p><span class="sl-sede">Vyplňte formulář níže. Stručně popište svou situaci. Ozveme se vám a domluvíme si první konzultaci.</span></p>
</div>
</div>
<div class="sl-sloupec sl-stred">
<span class="sl-cislo">02</span>
<h3><strong>První setkání</strong></h3>
<div class="sl-male sl-mw450">
<p><span class="sl-sede">Úvodní setkání (osobně nebo online) slouží k poznání vaší situace. Bez závazků - vy rozhodujete, jak chcete pokračovat.</span></p>
</div>
</div>
<div class="sl-sloupec sl-stred">
<span class="sl-cislo">03</span>
<h3><strong>Probíhající podpora</strong></h3>
<div class="sl-male sl-mw450">
<p><span class="sl-sede">Individuální nebo skupinová terapie dle vašich potřeb. Tempo určujete vy.</span></p>
</div>
</div>
</div></div></section></main>

Karty

Karty služeb

Přehled služeb s ikonou a odkazem, najetí zelený rámeček. Třídy: sl-mriz, sl-karta, sl-ikona.

HTML kód
<main class="obsah" id="obsah"><section class="sl-uvod" id="jak-pomahame"><div class="w"><div class="sl-mriz sl-mriz--4 sl-mriz--prehled">
<div class="sl-sloupec sl-karta">
<img alt="" class="sl-ikona" height="100" src="assets/grafika/ikona-administrativni-podpora-01.svg" width="100"/>
<h3><a href="#"><strong>Administrativní podpora</strong></a></h3>
<div class="sl-male">
<p><span class="sl-sede">Pomoc s vyřizováním na úřadech, v pojišťovnách a bankách i při komunikaci s institucemi.</span></p>
</div>
<div class="sl-male">
<p><a class="odkaz-sipka" href="#"><span>Více informací</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a></p>
</div>
<a class="btn" href="#">Vyplnit formulář</a>
</div>
<div class="sl-sloupec sl-karta">
<img alt="" class="sl-ikona" height="100" src="assets/grafika/psychologicka-podpora-01.svg" width="100"/>
<h3><a href="#"><strong>Psychologická podpora</strong></a></h3>
<div class="sl-male">
<p><span class="sl-sede">Individuální terapeutická podpora pro vás i vaše děti. Prožívání ztráty, zvládání každodenního stresu.</span></p>
</div>
<div class="sl-male">
<p><a class="odkaz-sipka" href="#"><span>Více informací</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a></p>
</div>
<a class="btn" href="#">Vyplnit formulář</a>
</div>
<div class="sl-sloupec sl-karta">
<img alt="" class="sl-ikona" height="100" src="assets/grafika/online-podpurna-skupina.svg" width="100"/>
<h3><a href="#"><strong>Podpůrné skupiny</strong></a></h3>
<div class="sl-male">
<p><span class="sl-sede">Online podpůrné skupiny, kde si pozůstalí rodiče navzájem pomáhají. Setkáváme se přibližně jednou měsíčně přes videohovor.</span></p>
</div>
<div class="sl-male">
<p><a class="odkaz-sipka" href="#"><span>Více informací</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a></p>
</div>
<a class="btn" href="#">Vyplnit formulář</a>
</div>
<div class="sl-sloupec sl-karta">
<img alt="" class="sl-ikona" height="100" src="assets/grafika/ikona-vrbenky-06.svg" width="100"/>
<h3><a href="#"><strong>Služby Vrběnek</strong></a></h3>
<div class="sl-male">
<p><span class="sl-sede">Prověřené pečovatelky, které přijdou přímo k vám domů. Pomohou s hlídáním, doprovázením dětí do školy i kroužků nebo domácností.</span></p>
</div>
<div class="sl-male">
<p><a class="odkaz-sipka" href="#"><span>Více informací</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a></p>
</div>
<a class="btn" href="#">Požádat o Vrběnku</a>
</div>
<div class="sl-sloupec sl-karta">
<img alt="" class="sl-ikona" height="100" src="assets/grafika/ikona-remeslnik-05.svg" width="100"/>
<h3><a href="#"><strong>Služby Řemeslníka</strong></a></h3>
<div class="sl-male">
<p><span class="sl-sede">Zkušený profesionál - vyřeší rozbité kohoutky, elektroinstalaci, truhlářské práce, zahradní úpravy a další drobné práce v domácnosti.</span></p>
</div>
<div class="sl-male">
<p><a class="odkaz-sipka" href="#"><span>Více informací</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a></p>
</div>
<a class="btn" href="#">Požádat o řemeslníka</a>
</div>
<div class="sl-sloupec sl-karta">
<img alt="" class="sl-ikona" height="100" src="assets/grafika/psychologicka-podpora-05.svg" width="100"/>
<h3><a href="#"><strong>Setkání pod Vrbou</strong></a></h3>
<div class="sl-male">
<p><span class="sl-sede">Pravidelná osobní setkání pozůstalých rodičů po celé ČR. Sdílení zkušeností, přednášky odborníků a prostor pro komunitu, která chápe.</span></p>
</div>
<div class="sl-male">
<p><a class="odkaz-sipka" href="#"><span>Více informací</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a></p>
</div>
<a class="btn" href="#">Vyplnit formulář</a>
</div>
<div class="sl-sloupec sl-karta">
<img alt="" class="sl-ikona" height="100" src="assets/grafika/pobytovy-tabor-01.svg" width="100"/>
<h3><a href="#"><strong>Tábory pro děti</strong></a></h3>
<div class="sl-male">
<p><span class="sl-sede">Letní tábory pro děti z pozůstalých rodin. Bezpečné prostředí, kde mohou být dětmi - a zároveň vědět, že nejsou samy.</span></p>
</div>
<div class="sl-male">
<p><a class="odkaz-sipka" href="#"><span>Více informací</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a></p>
</div>
<a class="btn" href="#">Vyplnit formulář</a>
</div>
<div class="sl-sloupec sl-karta">
<img alt="" class="sl-ikona" height="100" src="assets/grafika/ikona-administrativa.svg" width="100"/>
<h3><strong>Ozvěte se nám</strong></h3>
<div class="sl-male">
<p><span class="sl-sede">Nemusíte vědět přesně, jakou službu potřebujete. Stačí se ozvat - společně zjistíme, čím vám můžeme pomoci jako první.</span></p>
</div>
<a class="btn" href="#">Vyplnit formulář</a>
</div>
</div></div></section></main>

Služby na úvodu

Mřížka osmi služeb s ikonou, při najetí světlé pozadí. Třídy: uv-sluzby, uv-sluzba.

HTML kód
<main class="obsah" id="obsah"><section aria-label="Jak pomáháme" class="uv-sluzby">
<ul class="uv-sluzby__mrizka w">
<li><a class="uv-sluzba" href="#"><img alt="" height="100" src="assets/grafika/ikona-administrativni-podpora-01.svg" width="100"/><span>Administrativní podpora</span></a></li>
<li><a class="uv-sluzba" href="#"><img alt="" height="100" src="assets/grafika/psychologicka-podpora-01.svg" width="100"/><span>Psychologická podpora</span></a></li>
<li><a class="uv-sluzba" href="#"><img alt="" height="100" src="assets/grafika/ikona-vrbenky-06.svg" width="100"/><span>Služby Vrběnek</span></a></li>
<li><a class="uv-sluzba" href="#"><img alt="" height="100" src="assets/grafika/ikona-remeslnik-05.svg" width="100"/><span>Služby Řemeslníka Vrby</span></a></li>
<li><a class="uv-sluzba" href="#"><img alt="" height="100" src="assets/grafika/psychologicka-podpora-05.svg" width="100"/><span>Setkání pod Vrbou</span></a></li>
<li><a class="uv-sluzba" href="#"><img alt="" height="100" src="assets/grafika/online-podpurna-skupina.svg" width="100"/><span>Online podpůrné skupiny</span></a></li>
<li><a class="uv-sluzba" href="#"><img alt="" height="100" src="assets/grafika/pobytovy-tabor-01.svg" width="100"/><span>Tábor pro děti</span></a></li>
<li><a class="uv-sluzba" href="#"><img alt="" height="100" src="assets/grafika/ikona-administrativa.svg" width="100"/><span>Potřebuji pomoc</span></a></li>
</ul>
</section></main>

Karty projektů

Fotka 16:9, název, popis a odkaz, najetí modrý rámeček. Třídy: pj-mrizka, pj-karta, pj-karta__nazev.

HTML kód
<main class="obsah" id="obsah"><section class="pj"><div class="w"><div class="pj-mrizka">
<a class="pj-karta" href="#" id="odznacek">
<span class="pj-karta__foto"><img alt="Odznáček truchlení připnutý na svetru" height="1200" sizes="(max-width: 690px) 88vw, 44vw" src="assets/foto/odznacek-truchleni-vrba-01.webp" srcset="assets/foto/odznacek-truchleni-vrba-01-900.webp 900w, assets/foto/odznacek-truchleni-vrba-01.webp 1200w" width="1200"/></span>
<span class="pj-karta__text"><span class="pj-karta__nazev">Odznáček truchlení</span><span class="pj-karta__popis">Tiché sdělení pro okolí. Když se vám po někom, kdo zemřel, stýská víc než jindy, připnete si ho a nemusíte nic vysvětlovat.</span><span class="pj-karta__odkaz"><span>Více o odznáčku</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span></span>
</a>
<a class="pj-karta" href="#" id="koruna-pro-vrbu" rel="noopener" target="_blank">
<span class="pj-karta__foto"><img alt="Letáčky sbírky Koruna pro Vrbu s QR kódem" height="675" sizes="(max-width: 690px) 88vw, 44vw" src="assets/foto/koruna-pro-vrbu-letacky.webp" srcset="assets/foto/koruna-pro-vrbu-letacky-900.webp 900w, assets/foto/koruna-pro-vrbu-letacky.webp 1200w" width="1200"/></span>
<span class="pj-karta__text"><span class="pj-karta__nazev">Koruna pro Vrbu</span><span class="pj-karta__popis">Sbírka na pomoc pozůstalým rodinám s dětmi. Koruna od každého z vás pomůže těmto rodinám usnadnit návrat zpátky do života.</span><span class="pj-karta__odkaz"><span>www.korunaprovrbu.cz</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span></span>
</a>
<a class="pj-karta" href="#" id="konference" rel="noopener" target="_blank">
<span class="pj-karta__foto"><img alt="Podávající si ruce na modrém pozadí, motiv Konference péče o pozůstalé" height="675" sizes="(max-width: 690px) 88vw, 44vw" src="assets/foto/konference-pp-ruce.webp" srcset="assets/foto/konference-pp-ruce-900.webp 900w, assets/foto/konference-pp-ruce.webp 1200w" width="1200"/></span>
<span class="pj-karta__text"><span class="pj-karta__nazev">Konference péče o pozůstalé</span><span class="pj-karta__popis">Konference o péči o pozůstalé rodiny a praktické práci s pozůstalými pro odbornou i laickou veřejnost. 5. ročník bude 15. 6. 2027 v Brně.</span><span class="pj-karta__odkaz"><span>konferencepp.cz</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span></span>
</a>
<a class="pj-karta" href="#" id="daruj-kousek-sebe" rel="noopener" target="_blank">
<span class="pj-karta__foto"><img alt="Portál Daruj kousek sebe" height="800" sizes="(max-width: 690px) 88vw, 44vw" src="assets/foto/daruj-kousek-sebe-novy-web.webp" srcset="assets/foto/daruj-kousek-sebe-novy-web-900.webp 900w, assets/foto/daruj-kousek-sebe-novy-web.webp 1200w" style="object-position:0 50%" width="1200"/></span>
<span class="pj-karta__text"><span class="pj-karta__nazev">Daruj kousek sebe</span><span class="pj-karta__popis">Lidé pomáhají lidem. Nabídnout můžete svůj čas, um nebo know-how rodinám, které náhle přišly o blízkého člena.</span><span class="pj-karta__odkaz"><span>www.darujkouseksebe.cz</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span></span>
</a>
<a class="pj-karta" href="#" id="vrbashop" rel="noopener" target="_blank">
<span class="pj-karta__foto"><img alt="Kalendář Život smrtí nekončí" height="900" sizes="(max-width: 690px) 88vw, 44vw" src="assets/foto/kalendar-08.webp" srcset="assets/foto/kalendar-08-900.webp 900w, assets/foto/kalendar-08.webp 1200w" width="1200"/></span>
<span class="pj-karta__text"><span class="pj-karta__nazev">Vrbashop</span><span class="pj-karta__popis">Nákupem ve Vrbashopu podporujete činnost Nadačního fondu Vrba. Najdete tu odznáček truchlení nebo kalendář Život smrtí nekončí.</span><span class="pj-karta__odkaz"><span>www.vrbashop.cz</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span></span>
</a>
<a class="pj-karta" href="#" id="at-vis">
<span class="pj-karta__foto"><img alt="Dokument Ať víš v rukou" height="800" sizes="(max-width: 690px) 88vw, 44vw" src="assets/foto/dokument-ke-stazeni-at-vis.webp" srcset="assets/foto/dokument-ke-stazeni-at-vis-900.webp 900w, assets/foto/dokument-ke-stazeni-at-vis.webp 1200w" width="1200"/></span>
<span class="pj-karta__text"><span class="pj-karta__nazev">Ať víš…</span><span class="pj-karta__popis">Dokument, do kterého zapíšete svá přání a důležité informace, které by vaši blízcí měli znát v případě vašeho náhlého úmrtí.</span><span class="pj-karta__odkaz"><span>Stáhnout dokument (PDF, 645 kB)</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span></span>
</a>
<a class="pj-karta pj-karta--radek" href="#" id="projekty-eu">
<span class="pj-karta__plocha"><img alt="Spolufinancováno Evropskou unií" class="pj-karta__logo" height="80" src="assets/grafika/logo-spolufinancovano-eu.svg" width="288"/><img alt="Ministerstvo práce a sociálních věcí České republiky" class="pj-karta__logo pj-karta__logo--2" height="93" src="assets/grafika/logo-mpsv.svg" width="250"/></span>
<span class="pj-karta__text"><span class="pj-karta__nazev">Projekty s podporou EU, MPSV a krajů</span><span class="pj-karta__popis">Projekty pomoci pozůstalým rodinám s dětmi, které realizujeme s finanční podporou Evropské unie, ministerstva a krajů.</span><span class="pj-karta__odkaz"><span>Projekty EU a podpora</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span></span>
</a>
</div></div></section></main>

Projekty EU

Karty podpory s názvem a šipkou, hlavní karta na světlém podkladu. Třídy: eu-karta, eu-karta--hlavni.

HTML kód
<main class="obsah" id="obsah"><section class="eu w">
<h1>Projekty s podporou EU, MPSV a krajů</h1>
<p class="eu-uvod">Nadační fond Vrba realizuje projekty pomoci pozůstalým rodinám s dětmi s finanční podporou Evropské unie, Ministerstva práce a sociálních věcí ČR a krajů.</p>
<div class="eu-mrizka">
<div class="eu-karta eu-karta--hlavni">
<div class="eu-karta__text">
<p class="eu-karta__obdobi">1. 5. 2025 - 30. 4. 2028</p>
<h2 class="eu-karta__nazev"><a href="#">Komplexní péče a podpora pozůstalých rodin s nezaopatřenými dětmi</a></h2>
<p class="eu-karta__pata"><span class="eu-karta__vice">Detail projektu</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></p>
</div>
<div class="eu-karta__loga">
<img alt="Spolufinancováno Evropskou unií" height="80" src="assets/grafika/logo-spolufinancovano-eu.svg" width="288"/>
<img alt="Ministerstvo práce a sociálních věcí České republiky" height="93" src="assets/grafika/logo-mpsv.svg" width="250"/>
</div>
</div>
<div class="eu-karta">
<h2 class="eu-karta__nazev"><a href="#">Komplexní péče a podpora pozůstalým rodinám s nezaopatřenými dětmi</a></h2>
<img alt="Ministerstvo práce a sociálních věcí České republiky" class="eu-karta__logo" height="93" src="assets/grafika/logo-mpsv.svg" width="250"/>
<p class="eu-karta__pata"><span class="eu-karta__obdobi">Realizace do 12/2025</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></p>
</div>
<div class="eu-karta">
<h2 class="eu-karta__nazev"><a href="#">Podpora z krajů</a></h2>
<img alt="Jihomoravský kraj" class="eu-karta__logo eu-karta__logo--jmk" height="65" src="assets/grafika/logo-jihomoravsky-kraj.svg" width="636"/>
<p class="eu-karta__pata"><span class="eu-karta__obdobi">Rozpočet JMK pro rok 2022</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></p>
</div>
</div>
</section></main>

Karty partnerů

Loga partnerů v rámečku, jméno pod logem. Třídy: pa-mrizka, pa-karta.

HTML kód
<main class="obsah" id="obsah"><section class="pa"><div class="w"><div class="pa-mrizka">
<a class="pa-karta pa-karta--hlavni" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><img alt="Nadace MONETA Clementia" class="pa-logo" height="80" src="assets/grafika/partneri/logo-nadace-moneta.svg" style="--v:41px" width="604"/></span>
<span class="pa-jmeno">Nadace MONETA Clementia</span>
</a>
<a class="pa-karta pa-karta--hlavni" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><img alt="Jihomoravský kraj" class="pa-logo" height="65" src="assets/grafika/logo-jihomoravsky-kraj.svg" style="--v:32px" width="636"/></span>
<span class="pa-jmeno">Jihomoravský kraj</span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><img alt="Ministerstvo práce a sociálních věcí" class="pa-logo" height="93" src="assets/grafika/logo-mpsv.svg" style="--v:75px" width="250"/></span>
<span class="pa-jmeno">Ministerstvo práce a sociálních věcí</span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><img alt="Statutární město Brno" class="pa-logo" height="65" src="assets/grafika/partneri/logo-brno.svg" style="--v:53px" width="279"/></span>
<span class="pa-jmeno">Statutární město Brno</span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><img alt="Plzeňský kraj" class="pa-logo" height="65" src="assets/grafika/partneri/logo-plzensky-kraj.svg" style="--v:59px" width="216"/></span>
<span class="pa-jmeno">Plzeňský kraj</span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><img alt="Středočeský kraj" class="pa-logo" height="65" src="assets/grafika/partneri/logo-stredocesky-kraj.svg" style="--v:36px" width="368"/></span>
<span class="pa-jmeno">Středočeský kraj</span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><img alt="Olomoucký kraj" class="pa-logo" height="65" src="assets/grafika/partneri/logo-olomoucky-kraj.svg" style="--v:59px" width="219"/></span>
<span class="pa-jmeno">Olomoucký kraj</span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><img alt="Liberecký kraj" class="pa-logo" height="65" src="assets/grafika/partneri/partneri-liberecky-kraj.svg" style="--v:60px" width="167"/></span>
<span class="pa-jmeno">Liberecký kraj</span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><img alt="Kraj Vysočina" class="pa-logo" height="65" src="assets/grafika/partneri/partneri-kraj-vysocina.svg" style="--v:61px" width="204"/></span>
<span class="pa-jmeno">Kraj Vysočina</span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><img alt="Infinit Maximus Brno" class="pa-logo" height="65" src="assets/grafika/partneri/logo-infinit.svg" style="--v:84px" width="96"/></span>
<span class="pa-jmeno">Infinit Maximus Brno</span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><img alt="collalloc" class="pa-logo" height="122" src="assets/grafika/partneri/partneri-logo-collaloc.webp" style="--v:42px" width="600"/></span>
<span class="pa-jmeno">collalloc</span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><img alt="BALA21" class="pa-logo" height="65" src="assets/grafika/partneri/partneri-balla21.svg" style="--v:90px" width="53"/></span>
<span class="pa-jmeno">BALA21</span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><img alt="Vonekl" class="pa-logo" height="65" src="assets/grafika/partneri/partner-vonekl.svg" style="--v:59px" width="217"/></span>
<span class="pa-jmeno">Vonekl</span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><img alt="Nielsen Legal" class="pa-logo" height="65" src="assets/grafika/partneri/logo-nielsen-legal.svg" style="--v:66px" width="136"/></span>
<span class="pa-jmeno">Nielsen Legal</span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><img alt="Nadace Agrofert" class="pa-logo" height="65" src="assets/grafika/partneri/logo-nadace-agrofert.svg" style="--v:58px" width="231"/></span>
<span class="pa-jmeno">Nadace Agrofert</span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><img alt="Nadace ČEZ" class="pa-logo" height="65" src="assets/grafika/partneri/logo-nadace-cez.svg" style="--v:86px" width="89"/></span>
<span class="pa-jmeno">Nadace ČEZ</span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><img alt="Koření od tetiny" class="pa-logo" height="65" src="assets/grafika/partneri/logo-koreni-od-tetiny.svg" style="--v:66px" width="65"/></span>
<span class="pa-jmeno">Koření od tetiny</span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><img alt="Bramley development" class="pa-logo" height="65" src="assets/grafika/partneri/partneri-bramley.svg" style="--v:63px" width="185"/></span>
<span class="pa-jmeno">Bramley development</span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><img alt="Renovality" class="pa-logo" height="65" src="assets/grafika/partneri/partneri-renovality.svg" style="--v:84px" width="93"/></span>
<span class="pa-jmeno">Renovality</span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><img alt="Kuršel Family Foundation" class="pa-logo" height="65" src="assets/grafika/partneri/partneri-loga-kursel.svg" style="--v:54px" width="257"/></span>
<span class="pa-jmeno">Kuršel Family Foundation</span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><img alt="Cestovní kancelář BRENNA" class="pa-logo" height="65" src="assets/grafika/partneri/partneri-brenna.svg" style="--v:46px" width="257"/></span>
<span class="pa-jmeno">Cestovní kancelář BRENNA</span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><img alt="Nadace Naše dítě" class="pa-logo" height="120" src="assets/grafika/partneri/partneri-nadace-nase-dite.svg" style="--v:90px" width="126"/></span>
<span class="pa-jmeno">Nadace Naše dítě</span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><img alt="Studio Ypsilon" class="pa-logo" height="404" src="assets/grafika/partneri/partneri-studio-ypsilon.webp" style="--v:104px" width="540"/></span>
<span class="pa-jmeno">Studio Ypsilon</span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><img alt="Chleba Brno" class="pa-logo" height="276" src="assets/grafika/partneri/partneri-chleba.webp" style="--v:62px" width="638"/></span>
<span class="pa-jmeno">Chleba Brno</span>
</a>
<a class="pa-karta" href="#" rel="noopener" target="_blank">
<span class="pa-plocha"><img alt="Nakladatelství Portál" class="pa-logo" height="65" src="assets/grafika/partneri/partneri-portal.svg" style="--v:50px" width="266"/></span>
<span class="pa-jmeno">Nakladatelství Portál</span>
</a>
</div></div></section></main>

Ke stažení

Karta dokumentu s ikonou souboru a informací. Třídy: ks-karta.

HTML kód
<main class="obsah" id="obsah"><section class="ks">
<div class="w">
<div class="st-hlava">
<h1 class="st-vyrok">Dokumenty, letáky a brožury ke stažení.</h1>
<p class="st-uvod">Stáhněte si dokumenty, informační brožury, letáky a plakáty Nadačního fondu Vrba a jeho projektů.</p>
</div>
<ul class="ks__mrizka" data-ke-stazeni="">
<li><a class="ks-karta" href="#" rel="noopener" target="_blank"><img alt="" class="ks-karta__ikona" height="56" src="assets/grafika/pdf.svg" width="42"/><span><strong class="ks-karta__nazev">„V případě mé smrti otevři.“ Dokument - Ať víš…</strong><span class="ks-karta__info">PDF (645 kB)</span></span></a></li>
<li><a class="ks-karta" href="#" rel="noopener" target="_blank"><img alt="" class="ks-karta__ikona" height="56" src="assets/grafika/pdf.svg" width="42"/><span><strong class="ks-karta__nazev">Potvrzení o soustavné přípravě studenta na budoucí povolání</strong><span class="ks-karta__info">PDF (222 kB)</span></span></a></li>
<li><a class="ks-karta" href="#" rel="noopener" target="_blank"><img alt="" class="ks-karta__ikona" height="56" src="assets/grafika/pdf.svg" width="42"/><span><strong class="ks-karta__nazev">Informační leták A4 - Nadační fond Vrba</strong><span class="ks-karta__info">PDF (385 kB)</span></span></a></li>
<li><a class="ks-karta" href="#" rel="noopener" target="_blank"><img alt="" class="ks-karta__ikona" height="56" src="assets/grafika/pdf.svg" width="42"/><span><strong class="ks-karta__nazev">Informační leták A4 - Koruna pro Vrbu</strong><span class="ks-karta__info">PDF (211 kB)</span></span></a></li>
<li><a class="ks-karta" href="#" rel="noopener" target="_blank"><img alt="" class="ks-karta__ikona" height="56" src="assets/grafika/pdf.svg" width="42"/><span><strong class="ks-karta__nazev">Informační brožura - Daruj kousek sebe</strong><span class="ks-karta__info">PDF (417 kB)</span></span></a></li>
</ul>
<div class="tx ks__loga">
<p><strong>Potřebujete loga Nadačního fondu Vrba nebo jeho projektů, tiskové či marketingové materiály?</strong><br/>Napište na <a href="#">info@kacer.studio</a>, rádi vám je pošleme a poradíme s jejich použitím.</p>
</div>
</div>
</section></main>

Karty článků

Výpis článků: fotka, nadpis, perex, datum. Třídy: cl-seznam, cl-karta.

HTML kód
<main class="obsah" id="obsah"><section class="cl-vypis w"><div class="cl-seznam" data-data="../clanky/data.json" data-na-stranu="12" data-skryte="../clanky/skryte.json" data-strana="1" data-ukazat="reportaz-ct24-vrba-jako-symbol-truchleni">
<article class="cl-karta">
<a class="cl-karta__odkaz" href="#"><img alt="Společná fotka účastníků Setkání pod Vrbou v resortu Darovanský dvůr" class="cl-karta__foto" height="721" sizes="(min-width: 1000px) 30vw, (min-width: 691px) 44vw, 88vw" src="assets/foto/setkani-pod-vrbou-darovansky-dvur-2026-skupina.webp" srcset="assets/foto/setkani-pod-vrbou-darovansky-dvur-2026-skupina-900.webp 900w, assets/foto/setkani-pod-vrbou-darovansky-dvur-2026-skupina.webp 1200w" width="1200"/>
<h2 class="cl-karta__nadpis">Byli jsme na Setkání pod Vrbou - Darovanský dvůr (22. -⁠ 25. října 2026, Břasy)</h2>
<p class="cl-karta__perex">Čtyři společné dny v resortu Darovanský dvůr přinesly podzimní tvoření, halloweenskou bojovku, opékání špekáčků, lasergame, bowling, podpůrnou skupinu i individuální konzultace s terapeuty.</p>
<p class="cl-karta__datum"><time datetime="2026-11-06">6. listopadu 2026</time></p>
</a>
</article>
<article class="cl-karta">
<a class="cl-karta__odkaz" href="#"><img alt="Petra Glosr Cvrkalová a moderátorka u stolku ve studiu pořadu Sama doma na ČT1" class="cl-karta__foto" height="800" sizes="(min-width: 1000px) 30vw, (min-width: 691px) 44vw, 88vw" src="assets/foto/sama-doma-petra-glosr-cvrkalova.webp" srcset="assets/foto/sama-doma-petra-glosr-cvrkalova-900.webp 900w, assets/foto/sama-doma-petra-glosr-cvrkalova.webp 1200w" width="1200"/>
<h2 class="cl-karta__nadpis">Petra Glosr Cvrkalová v pořadu Sama doma: o pomoci pozůstalým rodinám a odznáčku truchlení</h2>
<p class="cl-karta__perex">V pořadu Sama doma na ČT1 mluvila zakladatelka a ředitelka Vrby Petra Glosr Cvrkalová o tom, jak pomáháme pozůstalým rodičům s dětmi, kudy podle ní vede cesta ze smutku a proč vznikl odznáček truchlení.</p>
<p class="cl-karta__datum"><time datetime="2026-11-04">4. listopadu 2026</time></p>
</a>
</article>
<article class="cl-karta">
<a class="cl-karta__odkaz" href="#"><img alt="Odznáček truchlení s vrbou na dubovém listu v dlaních" class="cl-karta__foto" height="800" sizes="(min-width: 1000px) 30vw, (min-width: 691px) 44vw, 88vw" src="assets/foto/odznacek-truchleni-v-dlani.webp" srcset="assets/foto/odznacek-truchleni-v-dlani-900.webp 900w, assets/foto/odznacek-truchleni-v-dlani.webp 1200w" width="1200"/>
<h2 class="cl-karta__nadpis">Vrba jako symbol truchlení: reportáž ČT24 o odznáčku truchlení</h2>
<p class="cl-karta__perex">Reportáž pořadu Studio 6 víkend na ČT24 představila odznáček truchlení. Mluvila v ní ředitelka Vrby Petra Glosr Cvrkalová i Michaela Stauberová, která má s naší pomocí vlastní zkušenost.</p>
<p class="cl-karta__datum"><time datetime="2026-10-31">31. října 2026</time></p>
</a>
</article>
<article class="cl-karta">
<a class="cl-karta__odkaz" href="#"><img alt="Petra Glosr Cvrkalová a Nikola Hezucká" class="cl-karta__foto" height="800" sizes="(min-width: 1000px) 30vw, (min-width: 691px) 44vw, 88vw" src="assets/foto/petra-glosr-cvrkalova-a-nikola-hezucka.webp" srcset="assets/foto/petra-glosr-cvrkalova-a-nikola-hezucka-900.webp 900w, assets/foto/petra-glosr-cvrkalova-a-nikola-hezucka.webp 1200w" width="1200"/>
<h2 class="cl-karta__nadpis">Ředitelka a zakladatelka Nadačního fondu Vrba Petra Glosr Cvrkalová vítá novou ambasadorku Nikolu Hezuckou</h2>
<p class="cl-karta__perex">Nikola Hezucká je novou ambasadorkou Nadačního fondu Vrba. Proč jsme ji oslovili a jak spolu chceme pomáhat rodinám, které přišly o mámu nebo tátu.</p>
<p class="cl-karta__datum"><time datetime="2026-10-28">28. října 2026</time></p>
</a>
</article>
<article class="cl-karta">
<a class="cl-karta__odkaz" href="#"><img alt="Petra Glosr Cvrkalová při natáčení podcastu MPSV Má to řešení?" class="cl-karta__foto" height="720" sizes="(min-width: 1000px) 30vw, (min-width: 691px) 44vw, 88vw" src="assets/foto/podcast-ma-to-reseni-petra-glosr-cvrkalova.webp" srcset="assets/foto/podcast-ma-to-reseni-petra-glosr-cvrkalova-900.webp 900w, assets/foto/podcast-ma-to-reseni-petra-glosr-cvrkalova.webp 1080w" width="1080"/>
<h2 class="cl-karta__nadpis">Má to řešení? Petra Glosr Cvrkalová v podcastu MPSV o dětském truchlení</h2>
<p class="cl-karta__perex">Jak děti prožívají ztrátu blízkého člověka a jak jim pomoci? V podcastu ministerstva práce a sociálních věcí o tom mluvila zakladatelka a ředitelka Vrby Petra Glosr Cvrkalová.</p>
<p class="cl-karta__datum"><time datetime="2026-10-27">27. října 2026</time></p>
</a>
</article>
<article class="cl-karta">
<a class="cl-karta__odkaz" href="#"><img alt="Odznáček truchlení s vrbou připnutý na šedém svetru" class="cl-karta__foto" height="720" sizes="(min-width: 1000px) 30vw, (min-width: 691px) 44vw, 88vw" src="assets/foto/odznacek-truchleni-svetr.webp" srcset="assets/foto/odznacek-truchleni-svetr-900.webp 900w, assets/foto/odznacek-truchleni-svetr.webp 1080w" width="1080"/>
<h2 class="cl-karta__nadpis">Odznáček truchlení: jsou dny, kdy je to těžší</h2>
<p class="cl-karta__perex">Malý kovový odznáček s vrbou, který za vás beze slov řekne, že dnes je to těžší a potřebujete víc ohledu. Jak funguje a jak ho získat.</p>
<p class="cl-karta__datum"><time datetime="2026-10-26">26. října 2026</time></p>
</a>
</article>
<article class="cl-karta">
<a class="cl-karta__odkaz" href="#"><img alt="Daruj kousek sebe: Pomoc, která není o penězích. Praktická pomoc pozůstalým rodinám s dětmi" class="cl-karta__foto" height="800" sizes="(min-width: 1000px) 30vw, (min-width: 691px) 44vw, 88vw" src="assets/foto/daruj-kousek-sebe-novy-web.webp" srcset="assets/foto/daruj-kousek-sebe-novy-web-900.webp 900w, assets/foto/daruj-kousek-sebe-novy-web.webp 1200w" width="1200"/>
<h2 class="cl-karta__nadpis">Spustili jsme nový web Daruj kousek sebe</h2>
<p class="cl-karta__perex">Lidé a firmy z celé republiky nabízejí pozůstalým rodinám s dětmi zdarma svůj čas, služby i věci. Na novém webu najdete nabídky pomoci v katalogu i na mapě.</p>
<p class="cl-karta__datum"><time datetime="2026-10-19">19. října 2026</time></p>
</a>
</article>
<article class="cl-karta">
<a class="cl-karta__odkaz" href="#"><img alt="Setkání pod Vrbou- Milovy 2026 (13. - 16. srpna 2026)" class="cl-karta__foto" height="800" sizes="(min-width: 1000px) 30vw, (min-width: 691px) 44vw, 88vw" src="assets/foto/setkani-pod-vrbou-milovy-2026.webp" srcset="assets/foto/setkani-pod-vrbou-milovy-2026-900.webp 900w, assets/foto/setkani-pod-vrbou-milovy-2026.webp 1200w" width="1200"/>
<h2 class="cl-karta__nadpis">Užili jsme si Setkání pod Vrbou - Milovy 2026 (13. -⁠ 16. srpna 2026)</h2>
<p class="cl-karta__perex">Několik dní plných společných zážitků, pohybu, tvoření, podpory i chvílí zastavení. Setkání pod Vrbou v Milovech nabídlo dětem i rodičům pestrý program, individuální konzultace, muzikoterapii, sport, bojovky i prostor pro sdílení.</p>
<p class="cl-karta__datum"><time datetime="2026-08-19">19. srpna 2026</time></p>
</a>
</article>
<article class="cl-karta">
<a class="cl-karta__odkaz" href="#"><img alt="Letní tábor na Prdku - týden ve znamení živlů" class="cl-karta__foto" height="800" sizes="(min-width: 1000px) 30vw, (min-width: 691px) 44vw, 88vw" src="assets/foto/letni-tabor-na-prdku-2026.webp" srcset="assets/foto/letni-tabor-na-prdku-2026-900.webp 900w, assets/foto/letni-tabor-na-prdku-2026.webp 1200w" width="1200"/>
<h2 class="cl-karta__nadpis">Užili jsme si to: Letní tábor na Prdku - týden ve znamení živlů</h2>
<p class="cl-karta__perex">Letošní letní tábor na Prdku se nesl v duchu čtyř živlů - vody, ohně, země a vzduchu. Společně jsme prožili týden plný dobrodružství, her, tvoření, nových přátelství i společných zážitků. Tábora se zúčastnilo 31 dětí.</p>
<p class="cl-karta__datum"><time datetime="2026-07-30">30. července 2026</time></p>
</a>
</article>
<article class="cl-karta">
<a class="cl-karta__odkaz" href="#"><img alt="Vonekl" class="cl-karta__foto" height="800" sizes="(min-width: 1000px) 30vw, (min-width: 691px) 44vw, 88vw" src="assets/foto/vonekl.webp" srcset="assets/foto/vonekl-900.webp 900w, assets/foto/vonekl.webp 1200w" width="1200"/>
<h2 class="cl-karta__nadpis">Společnost Vonekl podpoří rodiny Nadačního fondu Vrba květinami plnými naděje</h2>
<p class="cl-karta__perex">Od 1. srpna po dobu jednoho roku bude společnost Vonekl každý měsíc poskytovat 50 hrnkových květin, které budeme předávat rodinám, se kterými právě navazujeme spolupráci.</p>
<p class="cl-karta__datum"><time datetime="2026-07-28">28. července 2026</time></p>
</a>
</article>
<article class="cl-karta">
<a class="cl-karta__odkaz" href="#"><img alt="On-line podpůrná skupina pro pozůstalé rodiče s dětmi" class="cl-karta__foto" height="800" sizes="(min-width: 1000px) 30vw, (min-width: 691px) 44vw, 88vw" src="assets/foto/podpurna-skupina-2026.webp" srcset="assets/foto/podpurna-skupina-2026-900.webp 900w, assets/foto/podpurna-skupina-2026.webp 1200w" width="1200"/>
<h2 class="cl-karta__nadpis">Online podpůrná skupina pro pozůstalé rodiče s dětmi</h2>
<p class="cl-karta__perex">Podpůrná skupina je pro maminky a tatínky, kteří po ztrátě partnera zůstali sami na výchovu dětí a hledají oporu v těžkém období pro sebe i své děti.</p>
<p class="cl-karta__datum"><time datetime="2026-07-28">28. července 2026</time></p>
</a>
</article>
<article class="cl-karta">
<a class="cl-karta__odkaz" href="#"><img alt="Jak předejít přerušení výplaty sirotčího důchodu při pokračování ve studiu" class="cl-karta__foto" height="800" sizes="(min-width: 1000px) 30vw, (min-width: 691px) 44vw, 88vw" src="assets/foto/jak-predejit-preruseni-vyplaty-sirotciho-duchodu-pri-pokracovani-ve-studiu.webp" srcset="assets/foto/jak-predejit-preruseni-vyplaty-sirotciho-duchodu-pri-pokracovani-ve-studiu-900.webp 900w, assets/foto/jak-predejit-preruseni-vyplaty-sirotciho-duchodu-pri-pokracovani-ve-studiu.webp 1200w" width="1200"/>
<h2 class="cl-karta__nadpis">Jak předejít přerušení výplaty sirotčího důchodu při pokračování ve studiu</h2>
<p class="cl-karta__perex">V posledních týdnech se na Nadační fond Vrba obrátila řada pozůstalých rodin s dotazy, jak správně doložit pokračování studia, aby nedošlo k přerušení výplaty sirotčího důchodu.</p>
<p class="cl-karta__datum"><time datetime="2026-06-29">29. června 2026</time></p>
</a>
</article>
</div></section></main>

Nejnovější články

Tři nejnovější články na úvodu. Třídy: uv-deje, cl-nove.

HTML kód
<main class="obsah" id="obsah"><section class="uv-deje">
<div class="w">
<h2>Na Vrbě se stále něco děje</h2>
<p class="uv-deje__perex">Píšeme, organizujeme, vzděláváme, setkáváme se a pomáháme lidem vrátit se zpátky do života.</p>
<div class="uv-deje__clanky">
<div class="cl-nejnovejsi" data-skryte="clanky/skryte.json" data-ukazat="reportaz-ct24-vrba-jako-symbol-truchleni">
<article class="cl-nove">
<a class="cl-nove__odkaz" href="#"><img alt="Společná fotka účastníků Setkání pod Vrbou v resortu Darovanský dvůr" class="cl-nove__foto" height="721" sizes="(min-width: 1000px) 30vw, (min-width: 691px) 29vw, 88vw" src="assets/foto/setkani-pod-vrbou-darovansky-dvur-2026-skupina.webp" srcset="assets/foto/setkani-pod-vrbou-darovansky-dvur-2026-skupina-900.webp 900w, assets/foto/setkani-pod-vrbou-darovansky-dvur-2026-skupina.webp 1200w" width="1200"/><h3 class="cl-nove__nadpis">Byli jsme na Setkání pod Vrbou - Darovanský dvůr (22. -⁠ 25. října 2026, Břasy)</h3></a>
</article>
<article class="cl-nove">
<a class="cl-nove__odkaz" href="#"><img alt="Petra Glosr Cvrkalová a moderátorka u stolku ve studiu pořadu Sama doma na ČT1" class="cl-nove__foto" height="800" sizes="(min-width: 1000px) 30vw, (min-width: 691px) 29vw, 88vw" src="assets/foto/sama-doma-petra-glosr-cvrkalova.webp" srcset="assets/foto/sama-doma-petra-glosr-cvrkalova-900.webp 900w, assets/foto/sama-doma-petra-glosr-cvrkalova.webp 1200w" width="1200"/><h3 class="cl-nove__nadpis">Petra Glosr Cvrkalová v pořadu Sama doma: o pomoci pozůstalým rodinám a odznáčku truchlení</h3></a>
</article>
<article class="cl-nove">
<a class="cl-nove__odkaz" href="#"><img alt="Odznáček truchlení s vrbou na dubovém listu v dlaních" class="cl-nove__foto" height="800" sizes="(min-width: 1000px) 30vw, (min-width: 691px) 29vw, 88vw" src="assets/foto/odznacek-truchleni-v-dlani.webp" srcset="assets/foto/odznacek-truchleni-v-dlani-900.webp 900w, assets/foto/odznacek-truchleni-v-dlani.webp 1200w" width="1200"/><h3 class="cl-nove__nadpis">Vrba jako symbol truchlení: reportáž ČT24 o odznáčku truchlení</h3></a>
</article>
<article class="cl-nove" hidden="">
<a class="cl-nove__odkaz" href="#"><img alt="Petra Glosr Cvrkalová a Nikola Hezucká" class="cl-nove__foto" height="800" sizes="(min-width: 1000px) 30vw, (min-width: 691px) 29vw, 88vw" src="assets/foto/petra-glosr-cvrkalova-a-nikola-hezucka.webp" srcset="assets/foto/petra-glosr-cvrkalova-a-nikola-hezucka-900.webp 900w, assets/foto/petra-glosr-cvrkalova-a-nikola-hezucka.webp 1200w" width="1200"/><h3 class="cl-nove__nadpis">Ředitelka a zakladatelka Nadačního fondu Vrba Petra Glosr Cvrkalová vítá novou ambasadorku Nikolu Hezuckou</h3></a>
</article>
<article class="cl-nove" hidden="">
<a class="cl-nove__odkaz" href="#"><img alt="Petra Glosr Cvrkalová při natáčení podcastu MPSV Má to řešení?" class="cl-nove__foto" height="720" sizes="(min-width: 1000px) 30vw, (min-width: 691px) 29vw, 88vw" src="assets/foto/podcast-ma-to-reseni-petra-glosr-cvrkalova.webp" srcset="assets/foto/podcast-ma-to-reseni-petra-glosr-cvrkalova-900.webp 900w, assets/foto/podcast-ma-to-reseni-petra-glosr-cvrkalova.webp 1080w" width="1080"/><h3 class="cl-nove__nadpis">Má to řešení? Petra Glosr Cvrkalová v podcastu MPSV o dětském truchlení</h3></a>
</article>
<article class="cl-nove" hidden="">
<a class="cl-nove__odkaz" href="#"><img alt="Odznáček truchlení s vrbou připnutý na šedém svetru" class="cl-nove__foto" height="720" sizes="(min-width: 1000px) 30vw, (min-width: 691px) 29vw, 88vw" src="assets/foto/odznacek-truchleni-svetr.webp" srcset="assets/foto/odznacek-truchleni-svetr-900.webp 900w, assets/foto/odznacek-truchleni-svetr.webp 1080w" width="1080"/><h3 class="cl-nove__nadpis">Odznáček truchlení: jsou dny, kdy je to těžší</h3></a>
</article>
</div>
</div>
<p class="uv-deje__vse"><a class="btn" href="#">Všechny články</a></p>
</div>
</section></main>

Kontaktní karty

Tři karty s čárovou ikonou, e-mailem, mapou a číslem účtu. Třídy: ko-karty, ko-karta, ko-ucet.

HTML kód
<main class="obsah" id="obsah"><section class="ko-uvod"><div class="w"><div class="ko-karty">
<div class="ko-karta">
<svg aria-hidden="true" class="ko-karta__ikona" viewbox="0 0 24 24"><rect height="13" rx="2" width="18" x="3" y="5.5"></rect><path d="M3.5 7l8.5 6 8.5-6"></path></svg>
<h2 class="ko-karta__nadpis">Napište nebo zavolejte</h2>
<p class="ko-email"><a href="#">info@nadacnifondvrba.cz</a></p>
<p class="ko-tel"><a href="#">+420 723 011 234</a></p>
<p class="ko-karta__pata"><a class="btn" href="#">Napište nám</a></p>
</div>
<div class="ko-karta">
<svg aria-hidden="true" class="ko-karta__ikona" viewbox="0 0 24 24"><path d="M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11z"></path><circle cx="12" cy="10" r="2.4"></circle></svg>
<h2 class="ko-karta__nadpis">Kancelář Brno</h2>
<p>Mezírka 775/1, 602 00 Brno</p>
<p class="ko-karta__odkaz"><a class="odkaz-sipka" href="#" rel="noopener" target="_blank"><span>Zobrazit na mapě</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a></p>
<p class="ko-karta__pozn"><strong>Sídlo</strong><br/>Nadační fond Vrba<span class="ko-oddel">, </span><br class="ko-zlom"/>Nedvědice 247, 592 62<br/>IČO: 05057281</p>
</div>
<div class="ko-karta">
<svg aria-hidden="true" class="ko-karta__ikona" viewbox="0 0 24 24"><path d="M12 20s-7.5-4.6-7.5-10.2A4.2 4.2 0 0 1 12 7.2a4.2 4.2 0 0 1 7.5 2.6C19.5 15.4 12 20 12 20z"></path></svg>
<h2 class="ko-karta__nadpis">Dar na účet</h2>
<p class="ko-ucet">2500996405 / 2010</p>
<p class="ko-kopirovat"><button data-hotovo="Číslo účtu zkopírováno" data-kopirovat="2500996405/2010" type="button"><svg aria-hidden="true" class="ko-kopirovat__ikona" viewbox="0 0 24 24"><rect height="11" rx="2" width="11" x="9" y="9"></rect><path d="M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3"></path></svg><svg aria-hidden="true" class="ko-kopirovat__hotovo" viewbox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg><span aria-live="polite" class="ucet__hlaska">Kopírovat</span></button></p>
<p class="ko-karta__pozn">Chcete přispět online? Využijte sbírku <a class="ko-nowrap" href="#" rel="noopener" target="_blank">Koruna pro Vrbu</a>.</p>
</div>
</div></div></section></main>

Lidé

Portréty 4:5 s pozicí a kontaktem na světlém pásu. Třídy: ko-lide, ko-clovek.

HTML kód
<main class="obsah" id="obsah"><section class="ko-lide">
<div class="w">
<h2>Lidé ve Vrbě</h2>
<ul class="ko-lide__mrizka" data-lide="kontakt">
<li class="ko-clovek" data-clovek="petra-cvrkalova">
<img alt="Mgr. Petra Glosr Cvrkalová, ředitelka organizace a odborná konzultantka" height="1200" src="assets/foto/petra-cvrkalova.webp" width="800"/>
<p class="ko-clovek__jmeno">Mgr. Petra Glosr Cvrkalová</p>
<p class="ko-clovek__pozice">Ředitelka organizace a odborná konzultantka</p>
<p class="ko-clovek__kontakt"><a href="#">+420 723 011 234</a><br/><a href="#">petra.cvrkalova@nadacnifondvrba.cz</a></p>
</li>
<li class="ko-clovek" data-clovek="irena-mlejnkova">
<img alt="Ing. Irena Mlejnková, administrativní a provozní manažerka" height="1536" sizes="(max-width: 690px) 44vw, 300px" src="assets/foto/irena-mlejnkova.webp" srcset="assets/foto/irena-mlejnkova-900.webp 900w, assets/foto/irena-mlejnkova.webp 1024w" width="1024"/>
<p class="ko-clovek__jmeno">Ing. Irena Mlejnková</p>
<p class="ko-clovek__pozice">Administrativní a provozní manažerka</p>
<p class="ko-clovek__kontakt"><a href="#">+420 725 062 763</a><br/><a href="#">asistentka@nadacnifondvrba.cz</a></p>
</li>
<li class="ko-clovek" data-clovek="veronika-maierova">
<img alt="Veronika Maierová, projektová a fundraisingová manažerka" height="1536" sizes="(max-width: 690px) 44vw, 300px" src="assets/foto/veronika-maierova.webp" srcset="assets/foto/veronika-maierova-900.webp 900w, assets/foto/veronika-maierova.webp 1024w" width="1024"/>
<p class="ko-clovek__jmeno">Veronika Maierová</p>
<p class="ko-clovek__pozice">Projektová a fundraisingová manažerka</p>
<p class="ko-clovek__kontakt"><a href="#">+420 725 019 225</a><br/><a href="#">spoluprace@nadacnifondvrba.cz</a></p>
</li>
<li class="ko-clovek" data-clovek="zuzana-lukesova">
<img alt="Mgr. Zuzana Lukešová, odbornice následné péče" height="1200" src="assets/foto/zuzana-lukesova.webp" width="800"/>
<p class="ko-clovek__jmeno">Mgr. Zuzana Lukešová</p>
<p class="ko-clovek__pozice">Odbornice následné péče</p>
<p class="ko-clovek__kontakt"><a href="#">+420 725 878 180</a><br/><a href="#">naslednapece@nadacnifondvrba.cz</a></p>
</li>
<li class="ko-clovek" data-clovek="michaela-smetanova">
<img alt="Mgr. Michaela Smetanová, koordinátorka projektů" height="1536" sizes="(max-width: 690px) 44vw, 300px" src="assets/foto/michaela-smetanova.webp" srcset="assets/foto/michaela-smetanova-900.webp 900w, assets/foto/michaela-smetanova.webp 1024w" width="1024"/>
<p class="ko-clovek__jmeno">Mgr. Michaela Smetanová</p>
<p class="ko-clovek__pozice">Koordinátorka projektů</p>
<p class="ko-clovek__kontakt"><a href="#">+420 725 406 600</a><br/><a href="#">koordinator@nadacnifondvrba.cz</a></p>
</li>
<li class="ko-clovek" data-clovek="jana-jemelkova">
<img alt="Mgr. Jana Kubla Jemelková, koordinátorka aktivit" height="1200" src="assets/foto/jana-jemelkova.webp" width="800"/>
<p class="ko-clovek__jmeno">Mgr. Jana Kubla Jemelková</p>
<p class="ko-clovek__pozice">Koordinátorka aktivit</p>
<p class="ko-clovek__kontakt"><a href="#">+420 725 881 384</a><br/><a href="#">setkanipodvrbou@nadacnifondvrba.cz</a><br/><a href="#">tabory@nadacnifondvrba.cz</a></p>
</li>
<li class="ko-clovek" data-clovek="katerina-vrbova">
<img alt="Bc. Kateřina Vrbová, terapeutka" height="1200" src="assets/foto/katerina-vrbova.webp" width="800"/>
<p class="ko-clovek__jmeno">Bc. Kateřina Vrbová</p>
<p class="ko-clovek__pozice">Terapeutka</p>
<p class="ko-clovek__pozn">Terapie jsou zcela zdarma pro klienty Nadačního fondu Vrba</p>
<p class="ko-clovek__kontakt"><a href="#">+420 725 401 834</a><br/><a href="#">terapeut@nadacnifondvrba.cz</a></p>
</li>
<li class="ko-clovek" data-clovek="norbert-michel">
<img alt="Mgr. Norbert Michel, terapeut pro děti a dospívající" height="1200" src="assets/foto/michel-norbert.webp" width="800"/>
<p class="ko-clovek__jmeno">Mgr. Norbert Michel</p>
<p class="ko-clovek__pozice">Terapeut pro děti a dospívající</p>
<p class="ko-clovek__pozn">Objednání probíhá na základě předchozí domluvy<br/>Terapie jsou zcela zdarma pro klienty Nadačního fondu Vrba</p>
<p class="ko-clovek__kontakt"><a href="#">+420 725 338 058</a><br/><a href="#">terapeutdeti@nadacnifondvrba.cz</a></p>
</li>
<li class="ko-clovek" data-clovek="miroslav-jilek">
<img alt="Miroslav Jílek, řemeslník" height="1200" src="assets/foto/miroslav-jilek.webp" width="800"/>
<p class="ko-clovek__jmeno">Miroslav Jílek</p>
<p class="ko-clovek__pozice">Řemeslník</p>
<p class="ko-clovek__kontakt"><a href="#">+420 736 780 330</a><br/><a href="#">remeslnik@nadacnifondvrba.cz</a></p>
</li>
<li class="ko-clovek" data-clovek="vlasta-krenovska">
<img alt="Ing. Vlasta Křenovská, specialistka na rodinnou terapii" height="1200" src="assets/foto/vlasta-krenovska.webp" width="800"/>
<p class="ko-clovek__jmeno">Ing. Vlasta Křenovská</p>
<p class="ko-clovek__pozice">Specialistka na rodinnou terapii</p>
<p class="ko-clovek__kontakt"><a href="#">vlasta@vlastakrenovska.cz</a></p>
</li>
<li class="ko-clovek" data-clovek="dagmar-kozinova">
<img alt="PhDr. Ing. Dagmar Kožinová, psycholožka, lektorka a koučka" height="1200" src="assets/foto/dagmar-kozinova.webp" width="800"/>
<p class="ko-clovek__jmeno">PhDr. Ing. Dagmar Kožinová</p>
<p class="ko-clovek__pozice">Psycholožka, lektorka a koučka</p>
<p class="ko-clovek__kontakt"><a href="#">dasa@dagmarkozinova.cz</a></p>
</li>
<li class="ko-clovek" data-clovek="lucie-kudrnova-voseckova">
<img alt="Mgr. Lucie Kudrnová Vosečková, psychoterapeutka a koordinátorka podpůrných skupin" height="1200" src="assets/foto/lucie-kudrnova-voseckova.webp" width="800"/>
<p class="ko-clovek__jmeno">Mgr. Lucie Kudrnová Vosečková</p>
<p class="ko-clovek__pozice">Psychoterapeutka a koordinátorka podpůrných skupin</p>
<p class="ko-clovek__kontakt"><a href="#">mail@luciekudrnova.com</a></p>
</li>
</ul>
</div>
</section></main>

Boxy

Rámeček pro koho

Zelený čárkovaný rámeček s hvězdami. Třídy: sl-ramecek, sl-hvezdy.

HTML kód
<main class="obsah" id="obsah"><section class="sl-sek sl-pt100 sl-pb70"><div class="w"><div id="pro-koho-sluzba-je"><div class="sl-uzky sl-stred sl-odstup-stred"><div class="sl-ramecek sl-mw700">
<ul class="sl-hvezdy">
<li>Služby psychologické podpory Nadačního fondu Vrba jsou určeny našim klientům - pozůstalým rodinám i dětem</li>
<li><a href="#">Stačí vyplnit krátký formulář</a></li>
<li>Pro pozůstalé rodiny s dětmi je služba zcela zdarma</li>
<li>Nabízíme individuální i skupinovou formu</li>
<li>Setkání probíhají osobně i online</li>
<li>Kdekoliv v České republice</li>
</ul>
<p><strong>Nejste si jistí, zda je tato služba pro vás?</strong> Zavolejte nám na +420 723 011 234 nebo vyplňte formulář níže - rádi vše vysvětlíme.</p>
</div></div></div></div></section></main>

Reference

Citát rodiny v šedě čárkovaném rámečku. Třídy: sl-ref, sl-uvoz.

HTML kód
<main class="obsah" id="obsah"><section class="sl-sek sl-sek--svetla sl-pt100 sl-pb100" id="s-cim-pomuzeme"><div class="w"><div class="sl-mriz sl-mriz--tym"><div class="sl-sloupec sl-ref" data-clovek="norbert-michel">
<span class="sl-portret sl-vyrez" style="--x:0.622;--y:0.249;--w:1.34;--h:2.01"><img alt="Mgr. Norbert Michel" height="1200" src="assets/foto/michel-norbert.webp" width="800"/></span>
<p><strong>Norbert Michel</strong></p>
<div class="sl-male">
<p>Terapeut pro děti a dospívající</p>
</div>
<div class="sl-male">
<p><span class="sl-sede">Online po celé ČR, osobní setkání - Brno, <a href="#">Setkání pod Vrbou</a>, <a href="#">tábory pro děti</a></span></p>
</div>
</div></div></div></section></main>

Online skupiny

Skupina s čárkovaným rámečkem, hlavní se zeleným plným. Třídy: sl-skupina, sl-skupina--hlavni.

HTML kód
<main class="obsah" id="obsah"><section class="sl-sek sl-sek--svetla sl-pt100 sl-pb100" id="co-vas-ceka"><div class="w"><div class="sl-skupiny"><div class="sl-skupina sl-skupina--hlavni">
<p class="sl-male sl-stitek"><strong>HLAVNÍ SKUPINA</strong></p>
<h3><strong>Online skupina pro pozůstalé rodiče</strong></h3>
<p>Podpůrná skupina pro maminky a tatínky, kteří po ztrátě partnera zůstali sami na výchovu dětí. Věnuje se <strong>tématům rodičovství, emocí a hledání opory</strong> v náročném období.</p>
<p>Sdílení zkušeností, vzájemná pomoc a posilování rodičovských kompetencí - v kruhu lidí, kteří situaci znají z vlastní zkušenosti.</p>
<ul class="sl-hvezdy">
<li><span class="sl-sede">Online videohovor</span></li>
<li><span class="sl-sede">Přibližně 1× měsíčně</span></li>
<li><span class="sl-sede">Cca 90 minut</span></li>
<li><span class="sl-sede">Menší skupina, ideálně do 5 osob</span></li>
<li><span class="sl-sede">Vede psychoterapeutka <a href="#">Lucie Kudrnová Vosečková</a></span></li>
</ul>
</div></div></div></section></main>

Termín tábora

Zvýrazněný termín na nazelenalém pozadí se zeleným rámečkem. Třída: sl-termin.

HTML kód
<main class="obsah" id="obsah"><section class="sl-sek sl-pt60 sl-pb0"><div class="w"><div class="sl-termin sl-termin--mapa" data-koren="../" data-ramecek="tabor">
<svg aria-label="Mapa ČR, zvýrazněný Jihomoravský kraj" class="sl-mapa" height="173" role="img" viewbox="0 0 300 173" width="300"><path d="M151 75l-2-1 1-1-5-3 2 0-1 0 1-1 0-2 1 0-1 0 1-1 1-1-5-2 3-3-2-2 1-4-1-1-2 1-4 0-2-4-2 0-1-2 2-1 0-3-2-5 2-1-3-1-1-2-1 0-2-3-2 1-1-2-1 1 0 2-3 0 1 2-1 1-4-1 0 2-1 0-1 3-5 0 0-2-2 1-1-1-1 1-1-1 0 4-2-1 0 3-3-1 1 5-5 0-1 2-3-1-1 1-6-1-1 1 0 2-2-1 0 2-3 1-1 2-2-2-3 3-3 0 0-1-3 3-3 0-2 2 0 3-1-1 0 2-3 1 1 2-1 2 5 0 1 0-1 1 2 2 4-1 2 3 2 0 0 1 4 1 0 4-1 0-1 8 1 0 1 4-1 0-3 5 0 5 1 0 0 2 4-1 3 2 4-1 1-3 2 0 0 2 2 0 4 0 0-2 2 0 4 3 3-1-1-2 3 2 0-1 4 1 1-1-1 2 4 1 2-3 2 0-1-3 2-2 3 3 2-1 1 3 2-1 0-1 2 0-1-2 4 1 2-1 2 1 1-2 2 1 1-2 0-2-3-1 2-5 5-1 2-2 2 0-1-2 4-2 0-3 2-2-1-2z"></path><path d="M95 69l1-2 1-2 2-1 2-1 2 0 2 0 2-2 2 1 2 1 2 2 3 2-1 3-1 2-2 2-3 1-3 1-2 1-2 0-2-1-2-2-1-2-1-2z"></path><path d="M130 121l-2 1-3-3 1-2-2-1 2-8-1-2 2 0-1-2-1 0-1-3-2 1-3-3-2 2 1 3-2 0-2 3-4-1 1-2-1 1-4-1 0 1-3-2 1 2-3 1-4-3-2 0 0 2-4 0-2 0 0-2-2 0-1 3-4 1-2-2-2 1 0-1-4 2 2 5-1 2 1 2-1 3-2 1 1 2-2 0 2 2-2 2 1 2-4 4-2-1 0 3 1 3-2 2-1 3 3 3 1 0 2 4 3 0 3 7 3 1 8 6-2 3 2 3 9 1 3 2 1-2 1 0 0-1 2 0 1-4 1 0 1 2 3 1 2-2 2 4 2-1 1-7 4-3 0-3 6 2 1-1-1-2 1-3 1-12 7 2 0 3 5-1 0-2 9 2 3 3 2-2 0-2-3 0 0-2-1 0 2-2 0-3 2 0 0-2-2-1 1-1-4 1-2-1 0 1-4-3 0-4-4 1-2-2-3 1 0-2-3 0 2 0 0-1z"></path><path d="M23 80l-1 0-3 4-1 4-3 2 2 3 4 2 0 4 1 0 2 6 2 1 0 6 5 2 1 4 5 1-1-2 3 1 4 2 0 3 6 6 1 3 6 3 3 3 0 4 5 3 0-2 2 0 0-4 2-2-1-6 2 1 3-2 0-2 1 0-1-2 2-2-2-2 2 0-1-2 2-1 1-3-1-2 1-2-2-4 1-3-1-1 0-5 2-1 0-3 2-1-1-4-1 0 1-8 1 0 0-4-4-1 0-1-2 0-2-3-4 1-2-2 1-1-1 0-5 0 1-3-1-1-1 1-1-2-1 1 0-1-2 1 1 1-3 2 0 4-6-3-4 4-2 0 0 2-2 2-6-2-3 1-1 3-2-2-2 2z"></path><path d="M23 80l1 1 2-2 2 2 1-3 3-1 6 2 2-2 0-2 2 0 4-4 6 3 0-4 2-1 0-1 1-1-1-2-2-1 2 0-1-1 1-1-3-3 2-1-2-1 1-2-2-1 2-1-1-4-4 1-1-3-6 0-6-5-1 2 0-1-3 1-1 2-2-1-7 1-1 4-4 1-1 6-2 0 0 5-2-1 1-3-3-1 1-1 0-1-2 0-1-4-4 0 2 3-2 2 4 4 1 6 3 2-1 1 3 1 0 1 5 2 0 1 2 1 0 3z"></path><path d="M101 30l-1-2 2-2 0-2 2-1 0-2 1-1 0-2 5 1 0-3 2 0 2-6-4 1 2-5-5-2 0-2 0 2-2-1-2 1-4-2-2 4 3 0-1 3 4 1-1 2-6 1-1 2-6 3-2 1-2-1-2 2-2-1 0 4-2 1-4-1-2 2-2-1-5 1-1 1 0 1 0 3-3 2-4-3 0 2-2 1 0 2-4-1-2 6-3-1-2 1-2 0-1 4-3 3 1 1 6 0 1 3 0-1 4 0 1 4-2 1 2 1-1 2 2 1-2 1 3 3-1 1 1 1-2 0 2 1 2 2 1-1 1 2 1 0 1-2 2 0 0-2 1 1 0-3 2-2 3 0 3-3 0 1 3 0 3-3 2 2 1-2 3-1 0-2 2 1 0-2 1-1 6 1 1-1 3 1 1-2 5 0-1-5 3 1 0-3 2 1-1-3 2-1-2-2z"></path><path d="M101 30l4 7 2 3 1-1 1 1 2-1 0 2 1 0 1-1 3 1 1-3 1 0 0-2 4 1 1-1-1-2 3 0 0-3 3 2 1-1 2 3 2 1 0 1 6 3 2-2 4 2 1-1 0 2 2 0 1-2-1-1 2-2 3 2 4 0-3-4 2-2-2-2 0-7-1-3-5-2-2 2-1-4-4-3 0-6-1-1-3 1 0-3-2 2-3-2-3 1-1 1 2 2-1 3 0 3-7 0-2 4-3 0-1-2-4-1-2 1-1 3-2-1-2 0 0 2-1 1 0 2-2 1 0 2-2 2z"></path><path d="M163 62l3 2 3-2 4 1 0 3 3 0 0 1 6 4 2-1 4 1-1-2 2-1-1-1 6-3 0-2 4 2-1-6-5-7-2 0-1-3-4 0-3-4 5-5 2 0 2-2 0-2 1-1-4-6-5 0-1 2-1 1-4-3-3 5-2-1 2-2-1-3-6 1-2-6-5 1-4-2-3-1 1 3 0 7 2 2-2 2 3 4-4 0-3-2-2 2 1 2-3 1 0-2-1 1-4-2-2 2-3-2-2 1 2 5 0 3-2 1 1 2 2 0 2 4 4 0 2-1 1 1-1 4 2 2-3 3 4 2 1 2 5-4 1 1 6 0z"></path><path d="M163 62l-4 3-4-1-1-1-4 3-2 0-1 1 1 0-2 3 1 0-2 0 5 3-1 1 4 2-2 7 4 3 3 0 4 2 1 0 0 2 4 1-1 1 3 3 2-1 2-3 5 4 1-1 5 2 2 3 2 1 3 2 1-2 5 1 0-3 7 1 4 1 0-3 2-2 0-2-2-1 0-3-3-4 0-3 2 0-3-9 2 1 2-3 0-5 3-6-2 0-2 3-3 4-10-5 0 2-6 3 1 1-2 1 0 2-3-1-2 1-6-4 0-1-3 0 0-3-4-1-3 2z"></path><path d="M173 139l1-1 4 1 1-1 0-1 3-1 1-1 1-1-2-2 1 0 0-3 2 0-2-3 1-2 2 0-2-2 2-2-3-3 0-3 2-2 2 0 0-1-1 0 1-1 3 0 0-1-1-2 1 1 1-2-2-2 1-2-2-2-2-1-2-3-5-2-1 1-5-4-2 3-2 1-3-3 1-1-4-1 0-2-1 0-4-2-3 0-4-3-4 2 1 2-2 0-2 2-5 1-2 4 0 2 3 0 0 2-1 1-2 0-1 2-2-1-2 1-3-1-1 1 1 1-2 0 0 3-2 1 1 2-2 8 2 1-1 2 3 3 2-1 4 2 0 1-2 0 3 0 0 2 3-1 2 2 4-1 0 4 4 3 0-1 2 1 4-1-1 1 2 1 0 2-2 0 0 3-2 2 1 0 0 2 3 0 0 2 1-1 1 1 1-1 2-1 1 2 1-3 3-2 3 1 0-3 1 1 1-1 1-1z"></path><path d="M226 84l1-1-2 1-2-2 3-5-2-3 0-2 3-3 0-5 3-3 2-1 1-2 2 1 1-4-2-1-2 1 0-4-2 1-2-1-2-2 0-2-3 0-1-1-5-2-1 1-4-2-1 3 2 1 1 5 3 1 1 5-1 1-1-2-5 3-3 6 0 5-2 3-2-1 3 9-2 0 0 3 3 4 0 3 2 1 0 2-2 2 1 2-1 2 0 1-2 0-1 2 4 1-1 2 0 3 1 2-1 1 3 2 2-3-2-3 2-2 1 1 4 6 0 2 5 3 2 4 0-2 4 0 3-3-1-3 1-2 2 1-1 1 3 0 2 2 1-2 0-1 5 0 1-1-1-2 2 0 1-1 1 1 3 0 0-3 3-1-1-1 3 0 0-3-1 1-1-4-5-5-1 1-1-1 0-5-5 0-4-3 0-5-2 0 1 3-2 0-1 2-2-1 2-2-2-1-4 1 0 2-2 0z"></path><path d="M226 84l0 2 2 0 0-2 4-1 2 1-2 2 2 1 1-2 2 0-1-3 2 0 0 5 4 3 5 0 0 5 1 1 1-1 5 5 1 4 1-1 1 1 2 1 1 2 6-1 4 2 4 0 1 2 2 2 0 2 1 0 3-1 4-6 9 1 4-2-2-11-3 0-1-2-4-1-2-7 1-2-1-1 0-3-4 1-3-2-4-1 1 1-2 1-1-3-3-1 0-2-3 1-1 0-2-4-2-1-1 2 2 0 0 2-2-1-4 3-2 0-2-3-2 0-2-5-2-2-2 1-2-4 7-3 0-2-1-1 1-3-3-2 0 2-3 2-7 0-2 4-2-1-1 2-2 1-3 3 0 5-3 5 2 3-3 4 2 3 2-1z"></path><path d="M224 136l2-1 0 4 7 2-1 2 2-1 2 2 3-1 2 2-1 1 3 1 2 4 3 0 3-5 5 0 1-6 5 0 2-2 2-3 1-11 2-3 8-2 1-4-1-1 0-2-2-2-1-2-4 0-4-2-6 1-1-3-2 1-1 2-3-1 1 1-3 1 0 3-3 0-1-1-1 1-2 0 1 2-1 1-5 0 0 1-1 2-2-2-3 0 0-2-2 2 1 3-3 3-4 0-2 3 1 4-1 1 3 0-1 3-3 2 0 2z"></path><path class="sl-mapa__kraj--vyber" d="M173 139l-2-2-2 2-1-1 0 3-3-1-4 5-1-2-2 1-1 1-2-1-2 3 3 1 3 3 3 0 1-1 3-1 2 3 3 1 0 1 2 2 5 2 9 1 1-1 2 2 3-6 3 1 1-1 2 2 3 0 1 4 2-1 3 2 4-1 2 7 5-10 2-1 1-3 4-4 5 3 2 2 4-2 3 2 5-3-2-4-3-1 1-1-2-2-3 1-2-2-2 1 1-2-1-1-6-1 0-4-4 1 0-2 3-2 1-3-3 0 1-1-2-4 2-2-1-3-5-2 1-1-1 0 0-2-4-6-3 1 2 3-2 3-3-2 1-1-1-2 0-3 1-2-4-1 1-3 2 1 0-1-4-2-7-1 0 3-5-1-2 2-1 2 2 2-1 2-1-1 1 2 0 1-3 0-1 1 1 0 0 1-2 0-2 2 0 3 3 3-2 2 2 2-2 0-1 2 2 3-2 0 0 3-1 0 2 2-1 1-1 1-3 1 0 1-1 1-4-1z"></path></svg>
<div class="sl-mriz sl-mriz--4">
<div class="sl-sloupec">
<p class="sl-male sl-stitek"><strong>MÍSTO</strong></p>
<p><strong><a href="#" rel="noopener" target="_blank">Rekreační středisko Prudká</a></strong></p>
<div class="sl-male">
<p>Doubravník u Tišnova</p>
</div>
</div>
<div class="sl-sloupec">
<p class="sl-male sl-stitek"><strong>TERMÍN 2027</strong></p>
<p><strong>17.-24. července 2027</strong></p>
<div class="sl-male">
<p>8 dní / 7 nocí</p>
</div>
</div>
<div class="sl-sloupec">
<p class="sl-male sl-stitek"><strong>KAPACITA</strong></p>
<p><strong>28 dětí</strong></p>
<div class="sl-male">
<p>Počet míst je omezený</p>
</div>
</div>
<div class="sl-sloupec">
<p class="sl-male sl-stitek"><strong>CENA</strong></p>
<p><strong>Bude upřesněna</strong></p>
<div class="sl-male">
<p>Možnost žádosti o finanční příspěvek</p>
</div>
</div>
</div>
</div></div></section></main>

Box s linkou vlevo

Světlý box s modrou linkou vlevo, bez rádiusu. Třídy: sl-cta, cl-cta.

HTML kód
<main class="obsah" id="obsah"><section class="sl-sek sl-pt80 sl-pb80" id="kontakt"><div class="w"><div class="sl-dva sl-dva--57"><div class="sl-sloupec"><div class="sl-cta">
<p>Víme, že mnozí klienti nemohou naši kancelář v Brně navštívit osobně, proto nabízíme návštěvu přímo u nich doma. Při ní získáte všechny potřebné informace k orientaci v úředních záležitostech a kontakty na příslušné instituce.</p>
</div></div></div></div></section></main>

Výzva partnerům

Čárkovaný box s ikonou, textem a tlačítkem. Třída: pa-cta.

HTML kód
<main class="obsah" id="obsah"><section class="pa"><div class="w"><div class="pa-cta">
<img alt="" class="pa-cta__ikona" height="100" src="assets/grafika/ikona-administrativni-podpora-04.svg" width="100"/>
<p>Hledáme další partnery, kteří by s námi chtěli pomáhat pozůstalým rodinám. Ať už jste firma, kulturní instituce, nebo jednotlivec, rádi si s vámi popovídáme o možnostech spolupráce.</p>
<a class="btn" href="#">Ozvěte se nám</a>
</div></div></section></main>

Obsah

Citát a podpis

Kulatá fotka, podpis a text ředitelky. Třídy: uv-podpis, uv-podpis__foto.

HTML kód
<main class="obsah" id="obsah"><section class="uv-poslani"><div class="uv-podpis w">
<img alt="Nikola Hezucká, ambasadorka Nadačního fondu Vrba" class="uv-podpis__foto" height="1350" src="assets/foto/nikola-hezucka-portret.webp" width="1080"/>
<div class="uv-podpis__text">
<img alt="Podpis Nikoly Hezucké" class="uv-podpis__jmeno" height="81" src="assets/grafika/podpis-hezucka.svg" width="356"/>
<p><strong>Nikola Hezucká</strong><br/>Ambasadorka Nadačního fondu Vrba</p>
</div>
</div></section></main>

Služby O nás

Řádky s fajfkou a šipkou, oddělené linkou. Třídy: on-sluzby, on-sluzby__radek, on-check.

HTML kód
<main class="obsah" id="obsah"><section class="on-pomoc">
<div class="on-pomoc__w w">
<div class="on-pomoc__text tx">
<blockquote><p>Každý rok je mezi námi více než 50 tisíc pozůstalých maminek a tatínků, kteří potřebují naši pomoc.</p></blockquote>
<p><strong>Nadační fond Vrba představuje fungující systém pomoci</strong> této znevýhodněné a opomíjené skupině společnosti v otázce finančního a právního poradenství, psychoterapeutických služeb a pomoci v domácnosti.</p>
<p class="on-pomoc__btn"><a class="btn" href="#">Naše projekty</a></p>
</div>
<ul class="on-sluzby">
<li><a class="on-sluzby__radek" href="#"><svg aria-hidden="true" class="on-check" viewbox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg><span>Administrativní a právní podpora</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a></li>
<li><a class="on-sluzby__radek" href="#"><svg aria-hidden="true" class="on-check" viewbox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg><span>Psychologická podpora</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a></li>
<li><a class="on-sluzby__radek" href="#"><svg aria-hidden="true" class="on-check" viewbox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg><span>Online podpůrné skupiny</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a></li>
<li><a class="on-sluzby__radek" href="#"><svg aria-hidden="true" class="on-check" viewbox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg><span>Setkání pod Vrbou</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a></li>
<li><a class="on-sluzby__radek" href="#"><svg aria-hidden="true" class="on-check" viewbox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg><span>Řemeslník do domácnosti</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a></li>
<li><a class="on-sluzby__radek" href="#"><svg aria-hidden="true" class="on-check" viewbox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg><span>Vrběnky - péče o děti</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a></li>
<li><a class="on-sluzby__radek" href="#"><svg aria-hidden="true" class="on-check" viewbox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg><span>Tábor pro děti</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a></li>
</ul>
</div>
</section></main>

Kroky odznáčku

Číslované kroky Odznáčku truchlení s kruhy. Třídy: od-kroky, od-cislo.

HTML kód
<main class="obsah" id="obsah"><section class="od-sekce od-sekce--svetla"><div class="w"><ol class="od-kroky">
<li>
<span class="od-cislo">01</span>
<h3>Objednáte si odznáček</h3>
<p>Vyberete variantu na magnet nebo s připínacím špendlíkem a zaplatíte kartou na <a href="#" rel="noopener" target="_blank">našem e-shopu</a>, nebo <a href="#">převodem na účet</a>.</p>
</li>
<li>
<span class="od-cislo">02</span>
<h3>Připnete si ho</h3>
<p>Ve dnech, kdy je to pro vás těžší. O výročí, svátcích nebo kdykoliv, kdy je toho zkrátka moc.</p>
</li>
<li>
<span class="od-cislo">03</span>
<h3>Okolí to pozná</h3>
<p>Lidé kolem vás vědí, že dnes potřebujete víc ohledu a pochopení. Nemusíte nic vysvětlovat.</p>
</li>
</ol></div></section></main>

Etický kodex

Základy kodexu jako karty a práva klientů s fajfkami na světlém pásu. Třídy: ek-zaklad, ek-prava__mriz, ek-check.

HTML kód
<main class="obsah" id="obsah"><section class="ek-prava">
<div class="w">
<h2 class="ek-nadpis">Respektujeme tato práva klientů</h2>
<ul class="ek-prava__mriz">
<li><svg aria-hidden="true" class="ek-check" viewbox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg><span>Právo být předem informován o průběhu a podmínkách poskytované služby.</span></li>
<li><svg aria-hidden="true" class="ek-check" viewbox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg><span>Právo odmítnout nabízenou službu nebo odstoupit od nabízené služby, a to i bez udání důvodu.</span></li>
<li><svg aria-hidden="true" class="ek-check" viewbox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg><span>Právo zůstat v anonymitě.</span></li>
<li><svg aria-hidden="true" class="ek-check" viewbox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg><span>Právo svobodně se vyjadřovat ke způsobu prožívání ztráty blízkého člověka a reagovat na práci aktivních členů a dobrovolníků sdružení.</span></li>
</ul>
</div>
</section></main>

Právní stránka

Boční box správce a rozbalovací otázky. Třídy: tx-dva, tx-bok, tx-faq.

HTML kód
<main class="obsah" id="obsah"><section class="tx-telo"><div class="w"><div class="tx-dva">
<aside class="tx-bok">
<p class="tx-bok__stitek">Správce údajů</p>
<p><strong>Nadační fond Vrba</strong><br/>Nedvědice 247, 592 62 Nedvědice<br/>IČO 05057281</p>
<p class="tx-bok__stitek">Máte dotaz?</p>
<p>Napište nám na <a href="#">info@nadacnifondvrba.cz</a></p>
</aside>
<div class="faq tx-faq">
<details class="faq__i"><summary>Kdo vaše údaje zpracovává?</summary><div class="faq__a">
<p>Správcem osobních údajů je Nadační fond Vrba, Nedvědice 247, 592 62 Nedvědice, IČO 05057281, zapsaný v nadačním rejstříku u Krajského soudu v Brně pod sp. zn. N 601. Údaje zpracováváme v souladu s obecným nařízením o ochraně osobních údajů (GDPR).</p>
</div></details>
<details class="faq__i"><summary>Co se děje s údaji z formulářů na webu?</summary><div class="faq__a">
<p>Formuláře na stránce Kontakt a u jednotlivých služeb odešlou jméno a příjmení, e-mail, telefon, informaci, zda jste naším klientem, a text zprávy. Podle formuláře také adresu nebo město a kraj, počet a věk dětí nebo popis vaší situace.</p>
<p>Formulář Napsat nám v okně nápovědy vpravo dole odešle jméno a příjmení, e-mail, telefon a text zprávy.</p>
<p>Údaje použijeme k odpovědi na vaši zprávu, k registraci klienta Nadačního fondu Vrba a k domluvě další pomoci. Zpracováváme je s vaším souhlasem, který dáváte při odeslání formuláře. Všechny informace jsou důvěrné.</p>
</div></details>
<details class="faq__i"><summary>A při přihlášce na Setkání pod Vrbou nebo tábor?</summary><div class="faq__a">
<p>V přihlášce vyplníte navíc své datum narození, celou adresu bydliště, jména a data narození dětí, u tábora i alergie dětí. Údaje použijeme jen k organizaci a vyhodnocení účasti a k zaslání informací k akci. Třetím stranám je nepředáváme.</p>
</div></details>
<details class="faq__i"><summary>Proč po Vrběnkách chceme rodné číslo a číslo účtu?</summary><div class="faq__a">
<p>Spolupráce s Vrběnkami probíhá na dohodu o provedení práce (DPP) přímo s Nadačním fondem Vrba, který zajišťuje smlouvy, výkazy a výplaty. Proto v registraci do programu Vrběnky chceme kromě jména, e-mailu a telefonu také rodné příjmení, adresu trvalého bydliště, případně doručovací adresu, místo narození, rodné číslo, zdravotní pojišťovnu a číslo účtu.</p>
<p>Tyto údaje potřebujeme k uzavření dohody a k vyplácení odměny. Jsou důvěrné a nikde je nezveřejňujeme.</p>
</div></details>
<details class="faq__i"><summary>Jak je to s údaji dárců?</summary><div class="faq__a">
<p>Údaje dárců zpracováváme, abychom mohli:</p>
<ul>
<li>uzavřít a plnit darovací smlouvu, tedy přijmout dar, dárce identifikovat a evidovat, spárovat platby a informovat o využití daru,</li>
<li>plnit právní povinnosti, které z darovací smlouvy vyplývají, včetně archivace,</li>
<li>vyřizovat žádosti, podněty nebo stížnosti dárců.</li>
</ul>
</div></details>
<details class="faq__i"><summary>Jak dlouho údaje uchováváme?</summary><div class="faq__a">
<p>Jen po dobu, která je nezbytná k naplnění účelu zpracování:</p>
<ul>
<li>údaje k darovací smlouvě po dobu její účinnosti a dalších 15 dní, které potřebujeme k jejich odstranění z našich systémů,</li>
<li>údaje potřebné ke splnění právních povinností po dobu, kterou vyžadují právní předpisy,</li>
<li>údaje k žádostem, podnětům a stížnostem po dobu jejich vyřízení, včetně doby potřebné k prokázání, že jsme je vyřídili v souladu s právními předpisy.</li>
</ul>
</div></details>
<details class="faq__i"><summary>Komu údaje předáváme?</summary><div class="faq__a">
<p>Údaje zpracováváme sami nebo s pomocí zpracovatelů, které jsme pečlivě vybrali. Jsou to poskytovatel externího cloudového úložiště a poskytovatel účetních služeb. Mají stejné povinnosti jako my.</p>
<p>Když si objednáte osobní odběr odznáčku v Praze, předáme obchodu RenKa fashion vaše jméno, e-mail, číslo objednávky a objednané zboží, aby vám ho mohl vydat. Jinak údaje nikomu dalšímu nepředáváme a neposíláme je mimo Evropskou unii. Automatizované zpracování, například formulářů, nevede k žádnému rozhodnutí, které by pro vás mělo právní účinky.</p>
</div></details>
<details class="faq__i"><summary>Jak údaje chráníme?</summary><div class="faq__a">
<p>Používáme přiměřená technická a organizační opatření, aby se k údajům nedostal nikdo nepovolaný a aby se neztratily, nezměnily ani nebyly zneužity. Dodržování postupů pravidelně kontrolujeme. Kdyby přesto došlo k porušení zabezpečení, které by pro vás znamenalo vysoké riziko, hned vás o tom budeme informovat.</p>
</div></details>
<details class="faq__i"><summary>Odkud údaje máme?</summary><div class="faq__a">
<p>Vždy přímo od vás, nejčastěji z formuláře na webu. Údaje, které vyplníte, považujeme za pravdivé a aktuální. Když se změní, dejte nám prosím vědět.</p>
</div></details>
<details class="faq__i"><summary>Jaká máte práva?</summary><div class="faq__a">
<p>Máte právo:</p>
<ul>
<li>vědět, jaké údaje o vás zpracováváme, a získat k nim přístup,</li>
<li>požádat o jejich opravu nebo výmaz,</li>
<li>požádat o omezení zpracování a o přenesení údajů,</li>
<li>vznést námitku proti zpracování, včetně zpracování pro přímý marketing,</li>
<li>nebýt předmětem rozhodnutí založeného jen na automatizovaném zpracování,</li>
<li>podat stížnost u Úřadu pro ochranu osobních údajů (<a href="#" rel="noopener" target="_blank">www.uoou.cz</a>) a případně se obrátit na soud.</li>
</ul>
<p>Uplatnění práv je zdarma. Jen u zjevně nedůvodné nebo opakované žádosti můžeme požádat o přiměřený poplatek nebo ji odmítnout. Svá práva uplatníte e-mailem na <a href="#">info@nadacnifondvrba.cz</a>.</p>
</div></details>
<details class="faq__i"><summary>Používá web cookies?</summary><div class="faq__a">
<p>Ne. Web nepoužívá sledovací ani reklamní cookies a neměří návštěvnost. Víc najdete na stránce <a href="#">Cookies</a>.</p>
</div></details>
</div>
</div></div></section></main>

Formuláře

Formulář

Pole 54 px s rámečkem #cdd5e0, rádius 8 px, tmavý fokus. Třídy: form, form__f, form__volba, field__err.

HTML kód
<main class="obsah" id="obsah"><section class="ko-dotaz"><div class="ko-dotaz__w w" id="napiste-nam"><form class="form" data-typ="kontakt" id="formular-kontakt">
<input name="typ" type="hidden" value="kontakt"/>
<input name="stranka" type="hidden" value="kontakt"/>
<p class="form__chyba" hidden="" role="alert">Formulář se nepodařilo odeslat. Zkontrolujte prosím vyplněné údaje a zkuste to znovu, nebo nám napište na <a href="#">info@nadacnifondvrba.cz</a>.</p>
<div class="form__radek"><div class="form__f"><label for="kontakt-jmeno">Jméno a příjmení</label><input aria-describedby="kontakt-jmeno-err" autocomplete="name" data-msg="Vyplňte jméno a příjmení." id="kontakt-jmeno" name="jmeno" required="" type="text"/><p class="field__err" hidden="" id="kontakt-jmeno-err"></p></div><div class="form__f"><label for="kontakt-email">E-mail</label><input aria-describedby="kontakt-email-err" autocomplete="email" data-msg="Vyplňte e-mail." data-msg-format="Zadejte e-mail ve tvaru jmeno@domena.cz." id="kontakt-email" name="email" required="" type="email"/><p class="field__err" hidden="" id="kontakt-email-err"></p></div></div>
<div class="form__radek"><div class="form__f"><label for="kontakt-telefon">Telefon</label><input aria-describedby="kontakt-telefon-err" autocomplete="tel" data-msg="Vyplňte telefon." data-msg-format="Zadejte platné telefonní číslo, např. 777 123 456." id="kontakt-telefon" name="telefon" required="" type="tel"/><p class="field__err" hidden="" id="kontakt-telefon-err"></p></div><div class="form__f"><label for="kontakt-mesto">Město</label><input aria-describedby="kontakt-mesto-err" autocomplete="address-level2" data-msg="Vyplňte město." id="kontakt-mesto" name="mesto" required="" type="text"/><p class="field__err" hidden="" id="kontakt-mesto-err"></p></div></div>
<div class="form__radek"><div class="form__f"><label for="kontakt-pocet-deti">Počet dětí</label><input id="kontakt-pocet-deti" name="pocet_deti" type="text"/></div><div class="form__f"><label for="kontakt-vek-deti">Věk dětí</label><input id="kontakt-vek-deti" name="vek_deti" type="text"/></div></div>
<div class="form__f"><label for="kontakt-kraj">Kraj</label><select aria-describedby="kontakt-kraj-err" data-msg="Vyberte kraj." id="kontakt-kraj" name="kraj" required=""><option value="">- Vyberte -</option><option>Hlavní město Praha</option><option>Jihočeský kraj</option><option>Jihomoravský kraj</option><option>Karlovarský kraj</option><option>Královéhradecký kraj</option><option>Liberecký kraj</option><option>Moravskoslezský kraj</option><option>Olomoucký kraj</option><option>Pardubický kraj</option><option>Plzeňský kraj</option><option>Středočeský kraj</option><option>Ústecký kraj</option><option>Vysočina</option><option>Zlínský kraj</option></select><p class="field__err" hidden="" id="kontakt-kraj-err"></p><p class="fo-napoveda">Pozůstalým nabízíme možnost osobního setkání, v rámci kterého poskytneme informace o tom, co musí zařídit.</p></div>
<fieldset aria-describedby="kontakt-klient-err" class="form__f fo-skupina" data-povinne-volba="Vyberte jednu z možností." id="kontakt-klient"><legend class="form__legenda">Jste naším klientem?</legend><div class="form__volba"><input id="kontakt-klient-v1" name="klient" type="radio" value="Nejsem klientem Nadačního fondu Vrba"/><label for="kontakt-klient-v1">Nejsem klientem Nadačního fondu Vrba</label></div><div class="form__volba"><input id="kontakt-klient-v2" name="klient" type="radio" value="Jsem registrován/a jako klient Nadačního fondu Vrba"/><label for="kontakt-klient-v2">Jsem registrován/a jako klient Nadačního fondu Vrba</label></div><p class="field__err" hidden="" id="kontakt-klient-err"></p></fieldset>
<div class="form__f"><label for="kontakt-zprava">Zpráva nebo dotaz</label><textarea aria-describedby="kontakt-zprava-err" data-msg="Vyplňte zprávu nebo dotaz." id="kontakt-zprava" name="zprava" required="" rows="5"></textarea><p class="field__err" hidden="" id="kontakt-zprava-err"></p></div>
<div class="form__volba fo-souhlas"><input aria-describedby="kontakt-souhlas-err" data-msg="Potvrďte prosím souhlas se zpracováním osobních údajů." id="kontakt-souhlas" name="souhlas" required="" type="checkbox" value="1"/><label for="kontakt-souhlas">Souhlasím se zpracováním <a href="#">osobních údajů</a> za účelem odpovědi na mou zprávu.</label><p class="field__err" hidden="" id="kontakt-souhlas-err"></p></div>
<div aria-hidden="true" class="form__hp"><label for="kontakt-web">Web</label><input autocomplete="off" id="kontakt-web" name="web" tabindex="-1" type="text"/></div>
<input name="kontrola" type="hidden" value=""/>
<button class="btn form__odeslat" type="submit">Odeslat</button>
</form></div></section></main>

Navigace

Pruh Podpořte nás

Tmavý pruh s bílým textem a třemi řádky podpory. Třídy: podpora, podpora__c, podpora__ucet.

HTML kód
<section aria-labelledby="podpora-nadpis" class="podpora">
<div class="w podpora__in">
<div class="podpora__t">
<h2 class="podpora__nadpis" id="podpora-nadpis">Podpořte nás</h2>
<p>Pomáháme pozůstalým rodinám s dětmi po celé ČR. Díky vašim darům můžeme pomáhat dál.</p>
</div>
<ul class="podpora__cesty">
<li><a class="podpora__c" href="#"><span class="podpora__ct"><strong>Odznáček truchlení</strong><small>Pro dny, kdy je to těžší</small></span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a></li>
<li><a class="podpora__c" href="#" rel="noopener" target="_blank"><span class="podpora__ct"><strong>Koruna pro Vrbu</strong><small>Sbírka na pomoc pozůstalým rodinám</small></span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a></li>
<li><button class="podpora__c" data-kopirovat="2500996405/2010" type="button"><span class="podpora__ct"><strong>Dar na účet</strong></span><span class="podpora__ucet">2500996405 / 2010</span><span class="ucet__stav"><svg aria-hidden="true" class="ucet__ikona" viewbox="0 0 24 24"><rect height="11" rx="2" width="11" x="9" y="9"></rect><path d="M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3"></path></svg><svg aria-hidden="true" class="ucet__hotovo" viewbox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg><span aria-live="polite" class="skryte ucet__hlaska">Kopírovat</span></span></button></li>
<li><a class="podpora__c" href="#" rel="noopener" target="_blank"><span class="podpora__ct"><strong>Vrbashop</strong><small>Nákupem podpoříte činnost Vrby</small></span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a></li>
</ul>
</div>
</section>

Patička

Bílá patička s posláním, kontakty a sloupci odkazů. Třídy: pata, pata__w, pata__c.

HTML kód
<footer class="pata">
<div class="pata__w w">
<div class="pata__o">
<p class="pata__poslani">Po celé ČR pomáháme pozůstalým maminkám, tatínkům a dětem vrátit se zpátky do života.</p>
<ul class="pata__kontakt">
<li class="pata__mail"><a href="#">info@nadacnifondvrba.cz</a></li>
<li><a href="#">+420 723 011 234</a></li>
<li>Kancelář Brno: Mezírka 775/1, 602 00 Brno</li>
</ul>
</div>
<details class="pata__c" open="">
<summary class="pata__nadpis">Služby</summary>
<ul class="pata__menu">
<li><a href="#">Administrativní podpora</a></li>
<li><a href="#">Psychologická podpora</a></li>
<li><a href="#">Vrběnky</a></li>
<li><a href="#">Řemeslník</a></li>
<li><a href="#">Setkání pod Vrbou</a></li>
<li><a href="#">Online podpůrné skupiny</a></li>
<li><a href="#">Tábor pro děti</a></li>
</ul>
</details>
<details class="pata__c" open="">
<summary class="pata__nadpis">Nadační fond Vrba</summary>
<ul class="pata__menu">
<li><a href="#">O nás</a></li>
<li><a href="#">Projekty</a></li>
<li><a href="#">Odznáček truchlení</a></li>
<li><a href="#">Aktuálně</a></li>
<li><a href="#">Partneři</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</details>
<details class="pata__c" open="">
<summary class="pata__nadpis">Dokumenty</summary>
<ul class="pata__menu">
<li><a href="#">Ke stažení</a></li>
<li><a href="#">Projekty EU</a></li>
<li><a href="#">Etický kodex</a></li>
<li><a href="#">Osobní údaje</a></li>
<li><a href="#">Cookies</a></li>
</ul>
</details>
</div>
<div class="w">
<div class="pata__spodek">
<p class="pata__copy"><span data-rok="">2026</span> © Nadační fond Vrba, IČO: 05057281, <span class="foot__credit">design <a href="#" rel="noopener" target="_blank">KACER STUDIO</a></span></p>
<ul class="pata__ikony">
<li><a aria-label="Facebook" class="site" href="#" rel="noopener" target="_blank"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M13.5 21v-7.5h2.6l.4-3h-3V8.6c0-.9.3-1.5 1.5-1.5h1.6V4.4c-.3 0-1.2-.1-2.3-.1-2.3 0-3.9 1.4-3.9 4v2.2H7.8v3h2.6V21h3.1z"></path></svg></a></li>
<li><a aria-label="Instagram" class="site" href="#" rel="noopener" target="_blank"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M12 7.2A4.8 4.8 0 1 0 12 16.8 4.8 4.8 0 0 0 12 7.2zm0 7.9a3.1 3.1 0 1 1 0-6.2 3.1 3.1 0 0 1 0 6.2zM17 5.9a1.1 1.1 0 1 0 0 2.3 1.1 1.1 0 0 0 0-2.3zM21.4 8c-.1-1.5-.4-2.8-1.5-3.9S17.5 2.7 16 2.6c-1.5-.1-6.2-.1-7.9 0-1.5.1-2.8.4-3.9 1.5S2.7 6.5 2.6 8c-.1 1.5-.1 6.2 0 7.9.1 1.5.4 2.8 1.5 3.9s2.4 1.4 3.9 1.5c1.5.1 6.2.1 7.9 0 1.5-.1 2.8-.4 3.9-1.5s1.4-2.4 1.5-3.9c.1-1.6.1-6.3 0-7.9zm-2 9.6a3.2 3.2 0 0 1-1.8 1.8c-1.3.5-4.3.4-5.6.4s-4.4.1-5.6-.4a3.2 3.2 0 0 1-1.8-1.8c-.5-1.3-.4-4.3-.4-5.6s-.1-4.4.4-5.6a3.2 3.2 0 0 1 1.8-1.8c1.3-.5 4.3-.4 5.6-.4s4.4-.1 5.6.4a3.2 3.2 0 0 1 1.8 1.8c.5 1.3.4 4.3.4 5.6s.1 4.4-.4 5.6z"></path></svg></a></li>
<li><a aria-label="YouTube" class="site" href="#" rel="noopener" target="_blank"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M21.6 7.2a2.5 2.5 0 0 0-1.8-1.8C18.2 5 12 5 12 5s-6.2 0-7.8.4a2.5 2.5 0 0 0-1.8 1.8C2 8.8 2 12 2 12s0 3.2.4 4.8a2.5 2.5 0 0 0 1.8 1.8C5.8 19 12 19 12 19s6.2 0 7.8-.4a2.5 2.5 0 0 0 1.8-1.8c.4-1.6.4-4.8.4-4.8s0-3.2-.4-4.8zM10 15V9l5.2 3L10 15z"></path></svg></a></li>
</ul>
</div>
</div>
</footer>

Stránky na živém webu