Vzdušný systém pro technické služby a řemesla. Velké bezpatkové nadpisy a modrá paleta od kobaltu po led.
Výchozí je světlé téma. Tmavé přepnete v liště nahoře.
Pravidla
Na stránce je nejvýš jedna kobaltová plocha v zorném poli, ať tlačítko zůstane nejsilnější.
Text nad fotkou stojí vždy na závoji nebo desce.
Každá sekce začíná štítkem s tečkou a nadpisem.
Fotokarty a projekty jdou přes celou šířku stránky, výpis novinek do 1640 px. Nadpisy, text a ostatní mřížky zůstávají v obsahu 1440 px.
Rádius 12 px mají fotky, karty a šipky, 4 px tlačítka, desky a pole formuláře. Plně zaoblené jsou jen kruhy a obrysové tlačítko na fotce.
Stín má jen navigace po odjetí a její rozbalovací nabídky, střed kolotoče a ovládání lightboxu.
Písmo: Plus Jakarta Sans na nadpisy, Teachers na text, Jost na tlačítka a čísla.
Telefon se píše ve tvaru +420 123 456 789.
Článek začíná bez velkého prvního písmene. Karta článku nemá odkaz Číst dál a článek nemá tlačítka Sdílet.
Pohyb a stavy
Texty se při posouvání neanimují. Pohybuje se jen psané slovo v úvodu s videem a běžící pásy, při omezeném pohybu stojí.
Hlavní tlačítko při najetí jen prohodí barvy, bez animace.
Fotky se při najetí nepřibližují, na kartách se jen podtrhne název.
Rámeček zaměření má jen pole formuláře. Odkazy se při ovládání klávesnicí podtrhnou.
Obrázky a ukázka
Fotky a video jsou z Pexels (seznam v zdroje/src/vanek/ZDROJE-OBRAZKU.md), ikony ze sady Tabler Icons (MIT), písma z Google Fonts.
Firma Severka je smyšlená, ukázkové reference a jména taky.
Barvy
Modrá škála
cobalt-600#0056baHlavní akce, navigace, štítky, ikony a desky. Jediná sytá modrá systému.
sky-200#b7d2e9Nebeský pás přes celou šířku.
ice-200#dae2eeLedový pás.
ice-50#eef3fbBěžící pás a nejjemnější plochy.
Neutrální
deep-900#07171fZávoj nad fotkou a tmavý pás. Skoro černá s nádechem do modra.
ink-950#020014Nadpisy.
slate-700#32455eBěžný text.
gray-50#f7f7f7Kruh s ikonou u kroků, klidná plocha.
white#ffffffPodklad stránky a text nad fotkou.
Barvy podle použití (světlé, tmavé)
surface-page#ffffff / #0a1220Podklad stránky a navigace.
surface-soft#f7f7f7 / #0f192bKlidný pás.
surface-card#ffffff / #131f33Rozbalovací nabídka v navigaci a ovládání lightboxu.
surface-ice#dae2ee / #1a2842Ledový pás.
surface-band#b7d2e9 / #1b3555Nebeský pás.
surface-marquee#eef3fb / #13233bBěžící pás.
text-primary#020014 / #f3f6fbNadpisy a text na všech plochách surface-*.
text-body#32455e / #c9d4e3Běžný text.
text-secondary#55667e / #9fb0c6Doplňkový text, role, data a poznámky.
tag-text#0056ba / #93c5ffText štítku nad nadpisem.
mark#0056ba / #6cb0ffTečka štítku, ikona citace, velké ikony výhod a odrážky v článku.
line#00000026 / #ffffff26Dělicí linky.
line-control#00000080 / #ffffff80Silnější linky a ovládací prvky, drží 3:1.
action#0056ba / #6cb0ffVýplň hlavního tlačítka, při najetí se prohodí s on-action.
on-action#ffffff / #06121fText a ikona na hlavním tlačítku.
nav-current#0056ba / #0056baSloupec aktuální položky navigace a datum na kartě článku, v obou tématech stejný.
plate#0056baf0 / #00418cf0Deska s textem nad fotkou na kartě. Bílý text přes 6:1.
focus-ring#0056ba / #6cb0ffRámeček aktivního pole a otevřeného seznamu ve formuláři. Jinde systém rámečky zaměření nepoužívá.
danger#b81f36 / #ff8a98Text a linka chyby ve formuláři.
on-dark#ffffff / #ffffffText nad fotkou a na tmavém pásu.
on-dark-2#ffffffc9 / #ffffffc9Doplňkový text nad fotkou.
on-dark-line#ffffff4d / #ffffff4dLinky nad fotkou.
Typografie
Rozměry
Mezery a šířky
Název
Hodnota
Ukázka
Použití
space-8
8px
Mezi štítkem a řádkem textu.
space-16
16px
Nadpis a popis na kartě.
space-24
24px
Vnitřní okraj karty a desky.
space-32
32px
Mezera mřížky a boční okraj stránky.
space-48
48px
Velké bloky uvnitř sekce.
space-64
64px
Nadpis sekce a obsah.
section
clamp(72px,8.9vw,128px)
Svislé odsazení sekce.
wrap
1440px
Šířka obsahu na velkých obrazovkách.
wrap-text
720px
Souvislý text článku.
nav-height
76px
Výška navigace.
Rádiusy
Název
Hodnota
Ukázka
Použití
radius-4
4px
Tlačítko, deska, pole formuláře, roh s datem a čtverec v postupu.
radius-12
12px
Karty, fotky a šipky.
radius-full
999px
Kruhy: tečka štítku, kroky postupu a iniciály v referencích.
Komponenty
Základy
Tlačítka a odkazy
Hlavní tlačítko je kobaltová plocha s malým rádiusem, při najetí se barvy jen prohodí, bez animace. Zaoblené obrysové tlačítko patří jen na fotku, tenké obrysové na světlou plochu. Odkaz se šipkou stojí v hlavičce sekce vpravo.
Vlevo štítek a nadpis, vpravo věta a odkaz zarovnané doprava. Varianta na střed je pro sekce bez doplňkového textu.
HTML kód
<header class="vk-head"><div class="vk-head__title"><span class="vk-tag">Naše služby</span><h2 class="vk-h2">Klima postavené pro váš dům</h2></div><div class="vk-head__side"><p>Montáž, servis, čištění a revize od jedné firmy.</p><a class="vk-link" href="#">Všechny služby<svg aria-hidden="true" class="vk-icon" viewbox="0 0 24 24"><path d="M17 7l-10 10"></path> <path d="M8 7l9 0l0 9"></path></svg></a></div></header><header class="vk-head vk-head--center"><div class="vk-head__title"><span class="vk-tag">Proč my</span><h2 class="vk-h2">Na co se u nás můžete spolehnout</h2></div></header>
Formulář
Pravidla jako na statických webech. Jméno a e-mail jsou na celý řádek, telefon s místem realizace a výběr služeb s typem objektu po dvou, pak nepovinná zpráva, souhlas a tlačítko. Povinné jsou jméno, e-mail, telefon, místo realizace a souhlas. Služby (více možností) a typ objektu (jedna možnost) se vybírají v rozbalovacím seznamu přilepeném k poli. Chyba se ukáže pod polem po jeho opuštění a pak průběžně, odeslání skočí na první chybné pole. Pod tlačítkem je na dvou řádcích poznámka o nezávaznosti a termínu odpovědi. Po odeslání se formulář vymění za poděkování.
HTML kód
<form class="vk-form" data-vk-form="" novalidate=""><div class="vk-field"><label for="vk-jmeno">Jméno a příjmení (firma)</label><input aria-describedby="vk-jmeno-err" autocomplete="name" data-msg="Vyplňte jméno a příjmení." id="vk-jmeno" maxlength="200" name="jmeno" required="" type="text"/><p class="vk-field__error" hidden="" id="vk-jmeno-err"></p></div><div class="vk-field"><label for="vk-email">E-mail</label><input aria-describedby="vk-email-err" autocomplete="email" data-msg="Vyplňte e-mail." data-msg-format="Zadejte e-mail ve tvaru jmeno@domena.cz." id="vk-email" maxlength="200" name="email" required="" type="email"/><p class="vk-field__error" hidden="" id="vk-email-err"></p></div><div class="vk-form__row"><div class="vk-field"><label for="vk-telefon">Telefon</label><input aria-describedby="vk-telefon-err" autocomplete="tel" data-msg="Vyplňte telefon." data-msg-format="Zadejte telefon, např. 123 456 789 nebo +420 123 456 789." id="vk-telefon" maxlength="200" name="telefon" required="" type="tel"/><p class="vk-field__error" hidden="" id="vk-telefon-err"></p></div><div class="vk-field"><label for="vk-misto">Místo realizace</label><input aria-describedby="vk-misto-err" autocomplete="address-level2" data-msg="Vyplňte místo realizace." id="vk-misto" maxlength="200" name="misto" required="" type="text"/><p class="vk-field__error" hidden="" id="vk-misto-err"></p></div></div><div class="vk-form__row"><div class="vk-field"><span class="vk-field__label" id="vk-sluzby">Mám zájem o</span><details class="vk-ms"><summary aria-describedby="vk-sluzby">- vyberte -</summary><div aria-labelledby="vk-sluzby" class="vk-ms__list" role="group"><div class="vk-ms__group"><label><input name="sluzby[]" type="checkbox" value="Klimatizace"/>Klimatizace</label><label><input name="sluzby[]" type="checkbox" value="Tepelné čerpadlo"/>Tepelné čerpadlo</label><label><input name="sluzby[]" type="checkbox" value="Rekuperace"/>Rekuperace</label></div><div class="vk-ms__group"><label><input name="sluzby[]" type="checkbox" value="Servis a revize"/>Servis a revize</label><label><input name="sluzby[]" type="checkbox" value="Čištění a výměna filtrů"/>Čištění a výměna filtrů</label></div><div class="vk-ms__group"><label><input name="sluzby[]" type="checkbox" value="Něco jiného, nechám si poradit"/>Něco jiného, nechám si poradit</label></div></div></details></div><div class="vk-field"><span class="vk-field__label" id="vk-objekt">Typ objektu</span><details class="vk-ms"><summary aria-describedby="vk-objekt">- vyberte -</summary><div aria-labelledby="vk-objekt" class="vk-ms__list" role="group"><div class="vk-ms__group"><label><input name="objekt" type="radio" value="Rodinný dům"/>Rodinný dům</label><label><input name="objekt" type="radio" value="Byt"/>Byt</label><label><input name="objekt" type="radio" value="Bytový dům nebo SVJ"/>Bytový dům nebo SVJ</label><label><input name="objekt" type="radio" value="Firma nebo provozovna"/>Firma nebo provozovna</label><label><input name="objekt" type="radio" value="Jiný objekt"/>Jiný objekt</label></div></div></details></div></div><div class="vk-field"><label for="vk-zprava">Zpráva</label><textarea id="vk-zprava" maxlength="5000" name="zprava" rows="5"></textarea></div><div class="vk-field vk-consent"><input aria-describedby="vk-souhlas-err" data-msg="Potvrďte prosím souhlas se zpracováním osobních údajů." id="vk-souhlas" name="souhlas" required="" type="checkbox" value="1"/><label for="vk-souhlas">Souhlasím se zpracováním <a href="#">osobních údajů</a> za účelem odpovědi na moji poptávku.</label><p class="vk-field__error" hidden="" id="vk-souhlas-err"></p></div><div aria-hidden="true" class="vk-form__hp"><label for="vk-web">Web</label><input autocomplete="off" id="vk-web" name="web" tabindex="-1" type="text"/></div><input name="kontrola" type="hidden" value=""/><p class="vk-form__error" hidden="" role="alert">Poptávku se nepodařilo odeslat. Zkontrolujte prosím vyplněná pole nebo nám zavolejte na <a href="#">+420 123 456 789</a>.</p><div class="vk-form__send"><button class="vk-btn" type="submit">Odeslat poptávku<svg aria-hidden="true" class="vk-icon" viewbox="0 0 24 24"><path d="M17 7l-10 10"></path> <path d="M8 7l9 0l0 9"></path></svg></button><p>Odeslání poptávky je nezávazné a zdarma.<br/>Ozveme se do druhého pracovního dne.</p></div></form><div class="vk-form__ok" hidden="" tabindex="-1"><p class="vk-h3">Děkujeme, poptávku jsme dostali.</p><p>Ozveme se vám e-mailem nebo telefonicky a domluvíme se na dalším postupu. V ukázce se nic neodesílá.</p><p>Spěcháte? Volejte <a href="#">+420 123 456 789</a>.</p></div>
Navigace
Lišta s oznámením
Kobaltový pruh nad navigací s ikonou kalendáře, krátkým oznámením a křížkem. Při posouvání odjede a navigace se přilepí k hornímu okraji. Po zavření zmizí na všech stránkách až do zavření prohlížeče. Na telefonu je bez ikony. Patří sem jen jedna věta, třeba termíny nebo změna provozu.
Pevná bílá lišta přes celou šířku stránky. Aktuální položka je plný kobaltový sloupec přes celou výšku lišty. Vpravo výzva jako obyčejný text ve stejném stylu jako položky menu, při najetí se podtrhne. Domů má podnabídku s oběma úvodními variantami. Do 991 px se položky schovají pod ikonu.
Závěr každé stránky na bílém podkladu. Vlevo štítek, velký nadpis, linka, perex a velké hlavní tlačítko, vpravo telefon, e-mail a provozovna. Pod linkou copyright a sítě jako text. Na stránce Kontakt zůstává jen spodní řádek, výzvu tam nahrazuje formulář.
Fotka přes celou šířku, zleva závoj kvůli textu, zprava obří průsvitný kruh. Číslovaný přepínač snímků stojí svisle na pravém okraji.
HTML kód
<section class="vk-hero" data-vk-slider=""><div class="vk-slides"><div class="vk-slide is-active"><span aria-hidden="true" class="vk-cover mat-interier"></span><span class="vk-hero__veil"></span><div class="vk-wrap vk-hero__body"><span class="vk-tag vk-tag--light">Hladký start</span><h1 class="vk-h1"><em>Chlazení</em> bez hluku.</h1><p class="vk-lede vk-hero__copy">Navrhneme chlazení i topení na míru domu a odladíme je tak, abyste o nich věděli jen podle teploty.</p></div></div><div class="vk-slide"><span aria-hidden="true" class="vk-cover mat-pohoda"></span><span class="vk-hero__veil"></span><div class="vk-wrap vk-hero__body"><span class="vk-tag vk-tag--light">Čistý vzduch</span><h2 class="vk-h1"><em>Dýchejte</em> doma jako venku.</h2><p class="vk-lede vk-hero__copy">Rekuperace přivede čerstvý vzduch bez průvanu a vrátí teplo, které byste jinak vyvětrali.</p></div></div><div class="vk-slide"><span aria-hidden="true" class="vk-cover mat-technik-detail"></span><span class="vk-hero__veil"></span><div class="vk-wrap vk-hero__body"><span class="vk-tag vk-tag--light">Úspora</span><h2 class="vk-h1"><em>Topení</em> s nižším účtem.</h2><p class="vk-lede vk-hero__copy">Tepelné čerpadlo spočítáme podle skutečných ztrát domu, ne podle nejdražší položky v ceníku.</p></div></div><div class="vk-slide"><span aria-hidden="true" class="vk-cover mat-cerpadla"></span><span class="vk-hero__veil"></span><div class="vk-wrap vk-hero__body"><span class="vk-tag vk-tag--light">Servis</span><h2 class="vk-h1"><em>Jedna</em> firma na všechno.</h2><p class="vk-lede vk-hero__copy">Montáž, revize i pravidelná údržba. Technik přijede do dvou pracovních dnů.</p></div></div></div><span aria-hidden="true" class="vk-hero__orb"></span><div class="vk-hero__index"><button aria-label="Snímek 1" class="is-active" data-slide="" type="button">01</button><button aria-label="Snímek 2" class="" data-slide="" type="button">02</button><button aria-label="Snímek 3" class="" data-slide="" type="button">03</button><button aria-label="Snímek 4" class="" data-slide="" type="button">04</button></div></section>
Úvod s videem
Hlavní varianta: video přes celou šířku se závojem, malý nadpis, velká věta s psaným posledním slovem a obrysové tlačítko. V katalogu je místo videa jeho první snímek.
Fotka s datem v kobaltovém rohu, rubrika, nadpis a perex. Pás článků se posouvá šipkami.
HTML kód
<div class="vk-railbox" data-vk-railbox=""><div aria-label="Články" class="vk-rail vk-rail--3" tabindex="0"><article class="vk-post"><a class="vk-post__media" href="#"><span aria-hidden="true" class="vk-media mat-loznice-svetla" style="--ar:16/10"></span><span class="vk-post__date">12. 5.</span></a><span class="vk-post__meta">Novinky</span><h3 class="vk-h4"><a href="#">Jak vybrat klimatizaci do podkroví</a></h3><p>Podkroví se přehřívá jinak než zbytek domu. Vybíráme podle výkonu, hluku a místa na venkovní jednotku.</p></article><article class="vk-post"><a class="vk-post__media" href="#"><span aria-hidden="true" class="vk-media mat-termostat" style="--ar:16/10"></span><span class="vk-post__date">28. 4.</span></a><span class="vk-post__meta">Rady</span><h3 class="vk-h4"><a href="#">Chytrý termostat: první nastavení</a></h3><p>Regulace ušetří i bez výměny stroje. Co nastavit hned první den.</p></article><article class="vk-post"><a class="vk-post__media" href="#"><span aria-hidden="true" class="vk-media mat-cerpadlo-dum" style="--ar:16/10"></span><span class="vk-post__date">9. 4.</span></a><span class="vk-post__meta">Rady</span><h3 class="vk-h4"><a href="#">Studená fronta a tepelné čerpadlo</a></h3><p>Co dělá čerpadlo při minus patnácti a proč není důvod k panice.</p></article><article class="vk-post"><a class="vk-post__media" href="#"><span aria-hidden="true" class="vk-media mat-cerpadla" style="--ar:16/10"></span><span class="vk-post__date">21. 3.</span></a><span class="vk-post__meta">Novinky</span><h3 class="vk-h4"><a href="#">Dotace na výměnu kotle v roce 2026</a></h3><p>Kolik můžete získat, co je potřeba doložit a kde se lidé nejčastěji zaseknou.</p></article><article class="vk-post"><a class="vk-post__media" href="#"><span aria-hidden="true" class="vk-media mat-technik-detail" style="--ar:16/10"></span><span class="vk-post__date">4. 3.</span></a><span class="vk-post__meta">Rady</span><h3 class="vk-h4"><a href="#">Čisté rozvody, čistý vzduch</a></h3><p>Jak poznat zanesené potrubí a kdy už nestačí vyměnit filtr.</p></article></div><div class="vk-railbox__nav"><button aria-label="Předchozí článek" class="vk-round" data-rail="-1" type="button"><svg aria-hidden="true" class="vk-icon" viewbox="0 0 24 24"><path d="M5 12l14 0"></path> <path d="M5 12l6 6"></path> <path d="M5 12l6 -6"></path></svg></button><button aria-label="Další článek" class="vk-round" data-rail="1" type="button"><svg aria-hidden="true" class="vk-icon" viewbox="0 0 24 24"><path d="M5 12l14 0"></path> <path d="M13 18l6 -6"></path> <path d="M13 6l6 6"></path></svg></button></div></div>
Karta článku s výňatkem
Do výpisu novinek: stejná karta jako v pásu článků. Tři sloupce do šířky 1640 px s většími mezerami.
HTML kód
<div class="vk-grid vk-grid--3 vk-grid--news"><article class="vk-post"><a class="vk-post__media" href="#"><span aria-hidden="true" class="vk-media mat-loznice-svetla" style="--ar:16/10"></span><span class="vk-post__date">12. 5.</span></a><span class="vk-post__meta">Novinky</span><h3 class="vk-h4"><a href="#">Jak vybrat klimatizaci do podkroví</a></h3><p>Podkroví se přehřívá jinak než zbytek domu. Vybíráme podle výkonu, hluku a místa na venkovní jednotku.</p></article><article class="vk-post"><a class="vk-post__media" href="#"><span aria-hidden="true" class="vk-media mat-termostat" style="--ar:16/10"></span><span class="vk-post__date">28. 4.</span></a><span class="vk-post__meta">Rady</span><h3 class="vk-h4"><a href="#">Chytrý termostat: první nastavení</a></h3><p>Regulace ušetří i bez výměny stroje. Co nastavit hned první den.</p></article><article class="vk-post"><a class="vk-post__media" href="#"><span aria-hidden="true" class="vk-media mat-cerpadlo-dum" style="--ar:16/10"></span><span class="vk-post__date">9. 4.</span></a><span class="vk-post__meta">Rady</span><h3 class="vk-h4"><a href="#">Studená fronta a tepelné čerpadlo</a></h3><p>Co dělá čerpadlo při minus patnácti a proč není důvod k panice.</p></article><article class="vk-post"><a class="vk-post__media" href="#"><span aria-hidden="true" class="vk-media mat-cerpadla" style="--ar:16/10"></span><span class="vk-post__date">21. 3.</span></a><span class="vk-post__meta">Novinky</span><h3 class="vk-h4"><a href="#">Dotace na výměnu kotle v roce 2026</a></h3><p>Kolik můžete získat, co je potřeba doložit a kde se lidé nejčastěji zaseknou.</p></article><article class="vk-post"><a class="vk-post__media" href="#"><span aria-hidden="true" class="vk-media mat-technik-detail" style="--ar:16/10"></span><span class="vk-post__date">4. 3.</span></a><span class="vk-post__meta">Rady</span><h3 class="vk-h4"><a href="#">Čisté rozvody, čistý vzduch</a></h3><p>Jak poznat zanesené potrubí a kdy už nestačí vyměnit filtr.</p></article><article class="vk-post"><a class="vk-post__media" href="#"><span aria-hidden="true" class="vk-media mat-interier" style="--ar:16/10"></span><span class="vk-post__date">17. 2.</span></a><span class="vk-post__meta">Novinky</span><h3 class="vk-h4"><a href="#">Rekuperace do starého domu</a></h3><p>Jde to i bez bourání. Tři způsoby, jak schovat rozvody ve stávající stavbě.</p></article></div>
Projekty s filtrem
Filtr nad mřížkou ve stejném stylu jako záložky, aktuální položka je tmavá a podtržená. Karta je jen fotka a název.
Fotka produktu, pod ní název a jedna věta. Tři sloupce v šířce obsahu, při najetí se podtrhne název.
HTML kód
<div class="vk-grid vk-grid--3"><a class="vk-shelfitem" href="#"><span class="vk-shelfitem__stage"><span aria-hidden="true" class="vk-media mat-cerpadlo-zahrada"></span></span><b class="vk-h4">Severka Duo 60</b><span class="vk-muted">Topení i chlazení pro rodinný dům</span></a><a class="vk-shelfitem" href="#"><span class="vk-shelfitem__stage"><span aria-hidden="true" class="vk-media mat-cerpadlo-dum"></span></span><b class="vk-h4">Severka Teplo 80</b><span class="vk-muted">Tepelné čerpadlo do 300 m²</span></a><a class="vk-shelfitem" href="#"><span class="vk-shelfitem__stage"><span aria-hidden="true" class="vk-media mat-loznice"></span></span><b class="vk-h4">Severka Tichá 25</b><span class="vk-muted">Nástěnná jednotka do ložnice</span></a><a class="vk-shelfitem" href="#"><span class="vk-shelfitem__stage"><span aria-hidden="true" class="vk-media mat-strecha"></span></span><b class="vk-h4">Severka Hala 120</b><span class="vk-muted">Výkon pro firmy a dílny</span></a><a class="vk-shelfitem" href="#"><span class="vk-shelfitem__stage"><span aria-hidden="true" class="vk-media mat-loznice-svetla"></span></span><b class="vk-h4">Severka Spánek</b><span class="vk-muted">Nejtišší jednotka do 25 m²</span></a><a class="vk-shelfitem" href="#"><span class="vk-shelfitem__stage"><span aria-hidden="true" class="vk-media mat-interier"></span></span><b class="vk-h4">Rekuperace Dech</b><span class="vk-muted">Čerstvý vzduch bez ztráty tepla</span></a></div>
Obsah
Záložky s ukazateli
Podtržená aktuální záložka a tenké ukazatele s procenty. Vedle stojí koláž čtyř fotek s posunutými sloupci.
HTML kód
<div class="vk-about"><div class="vk-collage"><div><span aria-hidden="true" class="vk-media mat-interier" style="--ar:3/4;--pos:72% 50%"></span><span aria-hidden="true" class="vk-media mat-ovladac" style="--ar:16/9"></span></div><div><span aria-hidden="true" class="vk-media mat-loznice-svetla" style="--ar:16/9"></span><span aria-hidden="true" class="vk-media mat-cerpadlo-zahrada" style="--ar:3/4;--pos:48% 50%"></span></div></div><div class="vk-tabs" data-vk-tabs=""><div aria-label="O firmě" class="vk-tabs__list" role="tablist"><button aria-controls="vzorek-p0" aria-selected="true" id="vzorek-t0" role="tab" type="button">Historie</button><button aria-controls="vzorek-p1" aria-selected="false" id="vzorek-t1" role="tab" tabindex="-1" type="button">Poslání</button><button aria-controls="vzorek-p2" aria-selected="false" id="vzorek-t2" role="tab" tabindex="-1" type="button">Vize</button></div><div aria-labelledby="vzorek-t0" class="vk-tabs__pane" id="vzorek-p0" role="tabpanel"><p>V roce 2009 jsme začínali se dvěma montéry a dodávkou. Dnes máme <strong>dvacet techniků</strong> a vlastní sklad náhradních dílů v Brně.</p><p>Pořád platí to první pravidlo: <strong>nejdřív spočítat, potom vrtat</strong>. Díky němu se k nám zákazníci vracejí i po deseti letech.</p></div><div aria-labelledby="vzorek-t1" class="vk-tabs__pane" hidden="" id="vzorek-p1" role="tabpanel"><p>Chceme, aby se doma dalo <strong>dýchat a spát</strong> i v červenci. Bez hluku, průvanu a děsivých účtů.</p><p>Proto nabízíme jen to, co bychom si dali do vlastního domu.</p></div><div aria-labelledby="vzorek-t2" class="vk-tabs__pane" hidden="" id="vzorek-p2" role="tabpanel"><p>Do roku 2030 chceme nahradit <strong>tisíc starých kotlů</strong> tepelnými čerpadly a ukázat, že úspora a pohodlí nejdou proti sobě.</p></div><div class="vk-bars"><div class="vk-bar"><div class="vk-bar__label"><span>Montáže bez reklamace</span><b>96 %</b></div><span class="vk-bar__line"><i style="--value:96%"></i></span></div><div class="vk-bar"><div class="vk-bar__label"><span>Vracející se zákazníci</span><b>82 %</b></div><span class="vk-bar__line"><i style="--value:82%"></i></span></div><div class="vk-bar"><div class="vk-bar__label"><span>Spokojenost po prvním roce</span><b>94 %</b></div><span class="vk-bar__line"><i style="--value:94%"></i></span></div></div></div></div>
Postup v kruzích
Svislý postup, kruh 84 px s ikonou a číselným odznakem. Levý sloupec s nadpisem se při posouvání drží.
HTML kód
<div class="vk-flow"><div class="vk-flow__head"><header class="vk-head vk-head--left"><div class="vk-head__title"><span class="vk-tag">Náš postup</span><h2 class="vk-h2">Od prvního hovoru po tichý chod</h2></div><div class="vk-head__side"><p>Bez překvapení v ceně a bez nečekaných prací navíc.</p></div></header><p style="margin-top:32px"><a class="vk-btn" href="#">Ozvěte se<svg aria-hidden="true" class="vk-icon" viewbox="0 0 24 24"><path d="M17 7l-10 10"></path> <path d="M8 7l9 0l0 9"></path></svg></a></p></div><ol class="vk-flow__list"><li class="vk-flow__step"><span class="vk-flow__icon"><svg aria-hidden="true" class="vk-icon" viewbox="0 0 24 24"><path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2"></path></svg><b>1</b></span><div class="vk-flow__text"><h3 class="vk-h5">První hovor</h3><p>Zavoláte nebo napíšete, co vás trápí. Odpovíme do jednoho dne.</p></div></li><li class="vk-flow__step"><span class="vk-flow__icon"><svg aria-hidden="true" class="vk-icon" viewbox="0 0 24 24"><path d="M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path> <path d="M16 3l0 4"></path> <path d="M8 3l0 4"></path> <path d="M4 11l16 0"></path> <path d="M8 15h2v2h-2z"></path></svg><b>2</b></span><div class="vk-flow__text"><h3 class="vk-h5">Domluva termínu</h3><p>Termín si vyberete sami, klidně i v sobotu.</p></div></li><li class="vk-flow__step"><span class="vk-flow__icon"><svg aria-hidden="true" class="vk-icon" viewbox="0 0 24 24"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path> <path d="M21 21l-6 -6"></path></svg><b>3</b></span><div class="vk-flow__text"><h3 class="vk-h5">Prohlídka a výpočet</h3><p>Změříme dům, spočítáme ztráty a ukážeme varianty s cenou.</p></div></li><li class="vk-flow__step"><span class="vk-flow__icon"><svg aria-hidden="true" class="vk-icon" viewbox="0 0 24 24"><path d="M7 10h3v-3l-3.5 -3.5a6 6 0 0 1 8 8l6 6a2 2 0 0 1 -3 3l-6 -6a6 6 0 0 1 -8 -8l3.5 3.5"></path></svg><b>4</b></span><div class="vk-flow__text"><h3 class="vk-h5">Montáž a předání</h3><p>Hotovo obvykle za jeden den. Uklidíme a vše vysvětlíme.</p></div></li></ol></div>
Časová osa
Svislá linka uprostřed, tečka u každého roku, fotka a text se střídají.
HTML kód
<div class="vk-timeline"><div class="vk-timeline__row"><span aria-hidden="true" class="vk-media mat-obyvak" style="--ar:16/10"></span><div class="vk-timeline__text"><span class="vk-muted">2009</span><h3 class="vk-h4">Založení firmy</h3><p>Dva montéři, jedna dodávka a první klimatizace v Brně-Židenicích.</p></div></div><div class="vk-timeline__row"><span aria-hidden="true" class="vk-media mat-cerpadlo-zahrada" style="--ar:16/10"></span><div class="vk-timeline__text"><span class="vk-muted">2013</span><h3 class="vk-h4">První tepelná čerpadla</h3><p>Přidali jsme topení a začali počítat ztráty domů.</p></div></div><div class="vk-timeline__row"><span aria-hidden="true" class="vk-media mat-technik-detail" style="--ar:16/10"></span><div class="vk-timeline__text"><span class="vk-muted">2018</span><h3 class="vk-h4">Vlastní servis</h3><p>Sklad dílů a technik u zákazníka do dvou pracovních dnů.</p></div></div><div class="vk-timeline__row"><span aria-hidden="true" class="vk-media mat-interier" style="--ar:16/10"></span><div class="vk-timeline__text"><span class="vk-muted">2024</span><h3 class="vk-h4">Rekuperace</h3><p>Domy těsní, tak učíme zákazníky i stroje dobře větrat.</p></div></div></div>
Reference
Vždy jedna reference na střed, posun šipkami nebo prstem. Místo fotek iniciály, když zákazník fotku nedodal.
HTML kód
<div class="vk-railbox" data-vk-railbox=""><div aria-label="Reference" class="vk-rail vk-rail--1" tabindex="0"><figure class="vk-quote"><svg aria-hidden="true" class="vk-icon" viewbox="0 0 24 24"><path d="M10 6C6 7 3.500 10 3.500 14.200V18H10v-6.500H6.800c.2-1.700 1.400-3 3.200-3.600zM20.500 6c-4 1-6.500 4-6.500 8.200V18h6.500v-6.500h-3.200c.2-1.700 1.400-3 3.200-3.600z"></path></svg><p>Doma je konečně ticho. Jednotku v ložnici neslyšíme, a přitom se v červenci dá normálně spát.</p><figcaption class="vk-person"><span aria-hidden="true" class="vk-avatar">MV</span><div><b>Marta Vlčková</b><span>Rodinný dům, Kuřim</span></div></figcaption></figure><figure class="vk-quote"><svg aria-hidden="true" class="vk-icon" viewbox="0 0 24 24"><path d="M10 6C6 7 3.500 10 3.500 14.200V18H10v-6.500H6.800c.2-1.700 1.400-3 3.200-3.600zM20.500 6c-4 1-6.500 4-6.500 8.200V18h6.500v-6.500h-3.200c.2-1.700 1.400-3 3.200-3.600z"></path></svg><p>Spočítali nám tři varianty a doporučili tu levnější. To se mi u řemeslníků ještě nestalo.</p><figcaption class="vk-person"><span aria-hidden="true" class="vk-avatar">TH</span><div><b>Tomáš Holub</b><span>Byt, Brno</span></div></figcaption></figure><figure class="vk-quote"><svg aria-hidden="true" class="vk-icon" viewbox="0 0 24 24"><path d="M10 6C6 7 3.500 10 3.500 14.200V18H10v-6.500H6.800c.2-1.700 1.400-3 3.200-3.600zM20.500 6c-4 1-6.500 4-6.500 8.200V18h6.500v-6.500h-3.200c.2-1.700 1.400-3 3.200-3.600z"></path></svg><p>Servis přijel druhý den ráno a závadu našel za půl hodiny. Od té doby jim volám s každou maličkostí.</p><figcaption class="vk-person"><span aria-hidden="true" class="vk-avatar">PS</span><div><b>Ing. Petr Sýkora</b><span>Provozní ředitel, Lesana</span></div></figcaption></figure><figure class="vk-quote"><svg aria-hidden="true" class="vk-icon" viewbox="0 0 24 24"><path d="M10 6C6 7 3.500 10 3.500 14.200V18H10v-6.500H6.800c.2-1.700 1.400-3 3.200-3.600zM20.500 6c-4 1-6.500 4-6.500 8.200V18h6.500v-6.500h-3.200c.2-1.700 1.400-3 3.200-3.600z"></path></svg><p>V kanceláři jsme přestali řešit, kdo má otevřené okno. Teplota i vzduch sedí pořád.</p><figcaption class="vk-person"><span aria-hidden="true" class="vk-avatar">JD</span><div><b>Jana Dvořáková</b><span>Účetní kancelář, Blansko</span></div></figcaption></figure></div><div class="vk-railbox__nav"><button aria-label="Předchozí reference" class="vk-round" data-rail="-1" type="button"><svg aria-hidden="true" class="vk-icon" viewbox="0 0 24 24"><path d="M5 12l14 0"></path> <path d="M5 12l6 6"></path> <path d="M5 12l6 -6"></path></svg></button><span aria-live="polite" class="vk-railbox__count" data-rail-count="">1/4</span><button aria-label="Další reference" class="vk-round" data-rail="1" type="button"><svg aria-hidden="true" class="vk-icon" viewbox="0 0 24 24"><path d="M5 12l14 0"></path> <path d="M13 18l6 -6"></path> <path d="M13 6l6 6"></path></svg></button></div></div>
Časté dotazy
Fotka vlevo, otázky vpravo. Otevřená je vždy nejvýš jedna, odpověď se plynule vysune a zasune, plus se otočí na křížek. Funguje i bez skriptu.
HTML kód
<div class="vk-faq"><span aria-hidden="true" class="vk-media mat-ovladac" style="--ar:1/1"></span><div class="vk-acc"><details name="faq" open=""><summary>Jak často je potřeba klimatizaci servisovat?<svg aria-hidden="true" class="vk-icon" viewbox="0 0 24 24"><path d="M12 5l0 14"></path> <path d="M5 12l14 0"></path></svg></summary><div class="vk-acc__body">Jednou ročně, nejlépe před létem. Vyčistíme výměník, zkontrolujeme tlak a vystavíme revizi, kterou zákon vyžaduje od 3 kg chladiva.</div></details><details name="faq"><summary>Jaký výkon potřebuji do svého domu?<svg aria-hidden="true" class="vk-icon" viewbox="0 0 24 24"><path d="M12 5l0 14"></path> <path d="M5 12l14 0"></path></svg></summary><div class="vk-acc__body">Záleží na zateplení, oknech a orientaci. Přijedeme, změříme a výkon spočítáme. Příliš silná jednotka bývá hlučnější a dražší.</div></details><details name="faq"><summary>Proč klimatizace fouká teplý vzduch?<svg aria-hidden="true" class="vk-icon" viewbox="0 0 24 24"><path d="M12 5l0 14"></path> <path d="M5 12l14 0"></path></svg></summary><div class="vk-acc__body">Nejčastěji je zanesený filtr nebo chybí chladivo. Vyčistěte filtr, a když to nepomůže, zavolejte nám.</div></details><details name="faq"><summary>Jak dlouho trvá montáž?<svg aria-hidden="true" class="vk-icon" viewbox="0 0 24 24"><path d="M12 5l0 14"></path> <path d="M5 12l14 0"></path></svg></summary><div class="vk-acc__body">Běžná jednotka zabere jeden den. Tepelné čerpadlo obvykle dva až tři dny včetně zapojení do otopné soustavy.</div></details><details name="faq"><summary>Jakou dáváte záruku?<svg aria-hidden="true" class="vk-icon" viewbox="0 0 24 24"><path d="M12 5l0 14"></path> <path d="M5 12l14 0"></path></svg></summary><div class="vk-acc__body">Sedm let na stroje a pět let na práci, pokud k nám jednou ročně chodíte na servis.</div></details></div></div>
Mozaika
Čtyři sloupce fotek různých poměrů v šířce obsahu. Na kliknutí se fotka otevře v lightboxu se šipkami, počítadlem a ovládáním klávesami.
Velká věta na ledové ploše a fotka do krajů stránky. Rozděluje dlouhé stránky.
HTML kód
<section class="vk-statement"><p>Chlazení začíná výpočtem. Dobře navržený systém běží tiše, spotřebuje méně a vydrží o deset let déle.</p><span aria-hidden="true" class="vk-media mat-cerpadla"></span></section>
Kolotoč projektů
Tři projekty, prostřední vpředu, boční natočené v prostoru. Šipky stojí mimo fotky a posun je otočení celého kolotoče. Při najetí se podtrhne název. Na nebeském pásu.
Rozdělený blok přes celou šířku, obě strany začínají nahoře. Vlevo na klidné ploše štítek, perex, kontakty v řádcích a pod nimi právní údaje, vpravo nadpis a formulář. Nad blokem je hlavička podstránky, patička je zkrácená na spodní řádek.
HTML kód
<section class="vk-contactsplit"><div class="vk-contactsplit__side"><span class="vk-tag">Kontakty</span><p class="vk-contactsplit__sub">Ať vás trápí vedro, účet za topení nebo hluk ze stroje, zavolejte. Poradíme i po telefonu.</p><dl class="vk-contactsplit__list"><div><dt>Telefon</dt><dd><a href="#">+420 123 456 789</a></dd></div><div><dt>E-mail</dt><dd><a href="#">info@severka.example</a></dd></div><div><dt>Adresa</dt><dd>Větrná 12, Brno</dd></div><div><dt>Otevřeno</dt><dd>Po až Pá 7 až 16</dd></div></dl><p class="vk-contactsplit__legal">Severka s.r.o., IČO 12345678, DIČ CZ12345678. Zapsaná v obchodním rejstříku vedeném Krajským soudem v Brně, oddíl C, vložka 12345.</p></div><div class="vk-contactsplit__main"><h2 class="vk-h3">Nezávazná poptávka</h2><form class="vk-form" data-vk-form="" novalidate=""><div class="vk-field"><label for="vk-jmeno">Jméno a příjmení (firma)</label><input aria-describedby="vk-jmeno-err" autocomplete="name" data-msg="Vyplňte jméno a příjmení." id="vk-jmeno" maxlength="200" name="jmeno" required="" type="text"/><p class="vk-field__error" hidden="" id="vk-jmeno-err"></p></div><div class="vk-field"><label for="vk-email">E-mail</label><input aria-describedby="vk-email-err" autocomplete="email" data-msg="Vyplňte e-mail." data-msg-format="Zadejte e-mail ve tvaru jmeno@domena.cz." id="vk-email" maxlength="200" name="email" required="" type="email"/><p class="vk-field__error" hidden="" id="vk-email-err"></p></div><div class="vk-form__row"><div class="vk-field"><label for="vk-telefon">Telefon</label><input aria-describedby="vk-telefon-err" autocomplete="tel" data-msg="Vyplňte telefon." data-msg-format="Zadejte telefon, např. 123 456 789 nebo +420 123 456 789." id="vk-telefon" maxlength="200" name="telefon" required="" type="tel"/><p class="vk-field__error" hidden="" id="vk-telefon-err"></p></div><div class="vk-field"><label for="vk-misto">Místo realizace</label><input aria-describedby="vk-misto-err" autocomplete="address-level2" data-msg="Vyplňte místo realizace." id="vk-misto" maxlength="200" name="misto" required="" type="text"/><p class="vk-field__error" hidden="" id="vk-misto-err"></p></div></div><div class="vk-form__row"><div class="vk-field"><span class="vk-field__label" id="vk-sluzby">Mám zájem o</span><details class="vk-ms"><summary aria-describedby="vk-sluzby">- vyberte -</summary><div aria-labelledby="vk-sluzby" class="vk-ms__list" role="group"><div class="vk-ms__group"><label><input name="sluzby[]" type="checkbox" value="Klimatizace"/>Klimatizace</label><label><input name="sluzby[]" type="checkbox" value="Tepelné čerpadlo"/>Tepelné čerpadlo</label><label><input name="sluzby[]" type="checkbox" value="Rekuperace"/>Rekuperace</label></div><div class="vk-ms__group"><label><input name="sluzby[]" type="checkbox" value="Servis a revize"/>Servis a revize</label><label><input name="sluzby[]" type="checkbox" value="Čištění a výměna filtrů"/>Čištění a výměna filtrů</label></div><div class="vk-ms__group"><label><input name="sluzby[]" type="checkbox" value="Něco jiného, nechám si poradit"/>Něco jiného, nechám si poradit</label></div></div></details></div><div class="vk-field"><span class="vk-field__label" id="vk-objekt">Typ objektu</span><details class="vk-ms"><summary aria-describedby="vk-objekt">- vyberte -</summary><div aria-labelledby="vk-objekt" class="vk-ms__list" role="group"><div class="vk-ms__group"><label><input name="objekt" type="radio" value="Rodinný dům"/>Rodinný dům</label><label><input name="objekt" type="radio" value="Byt"/>Byt</label><label><input name="objekt" type="radio" value="Bytový dům nebo SVJ"/>Bytový dům nebo SVJ</label><label><input name="objekt" type="radio" value="Firma nebo provozovna"/>Firma nebo provozovna</label><label><input name="objekt" type="radio" value="Jiný objekt"/>Jiný objekt</label></div></div></details></div></div><div class="vk-field"><label for="vk-zprava">Zpráva</label><textarea id="vk-zprava" maxlength="5000" name="zprava" rows="5"></textarea></div><div class="vk-field vk-consent"><input aria-describedby="vk-souhlas-err" data-msg="Potvrďte prosím souhlas se zpracováním osobních údajů." id="vk-souhlas" name="souhlas" required="" type="checkbox" value="1"/><label for="vk-souhlas">Souhlasím se zpracováním <a href="#">osobních údajů</a> za účelem odpovědi na moji poptávku.</label><p class="vk-field__error" hidden="" id="vk-souhlas-err"></p></div><div aria-hidden="true" class="vk-form__hp"><label for="vk-web">Web</label><input autocomplete="off" id="vk-web" name="web" tabindex="-1" type="text"/></div><input name="kontrola" type="hidden" value=""/><p class="vk-form__error" hidden="" role="alert">Poptávku se nepodařilo odeslat. Zkontrolujte prosím vyplněná pole nebo nám zavolejte na <a href="#">+420 123 456 789</a>.</p><div class="vk-form__send"><button class="vk-btn" type="submit">Odeslat poptávku<svg aria-hidden="true" class="vk-icon" viewbox="0 0 24 24"><path d="M17 7l-10 10"></path> <path d="M8 7l9 0l0 9"></path></svg></button><p>Odeslání poptávky je nezávazné a zdarma.<br/>Ozveme se do druhého pracovního dne.</p></div></form><div class="vk-form__ok" hidden="" tabindex="-1"><p class="vk-h3">Děkujeme, poptávku jsme dostali.</p><p>Ozveme se vám e-mailem nebo telefonicky a domluvíme se na dalším postupu. V ukázce se nic neodesílá.</p><p>Spěcháte? Volejte <a href="#">+420 123 456 789</a>.</p></div></div></section>
Detailní stránky
Text článku
Sloupec 720 px, výrok mezi dvěma linkami s odkazem na kontakt.
HTML kód
<div class="vk-wrap"><div class="vk-prose"><p class="vk-lede">Podkroví se v létě chová jinak než zbytek domu. Střecha se rozpálí, teplo stoupá a pod šikminou je večer o pět stupňů víc než v přízemí.</p><p>Proto nestačí koupit <strong>nejsilnější jednotku</strong> v akci. Silný stroj se rychle zapne a zase vypne, vzduch nestihne proschnout a v místnosti je chladno a vlhko zároveň.</p><h2>Začněte výpočtem</h2><p>Změříme plochu, sklon střechy, okna a zateplení. Z toho vyjde potřebný výkon jednotky. Obvykle je nižší, než čekáte.</p><ul><li>střešní okna bez stínění přidají až 30 % zátěže,</li><li>jednotku montujte na štítovou stěnu, ne pod šikminu,</li><li>myslete na odvod kondenzátu, v podkroví bývá nejtěžší.</li></ul><blockquote><p>Dobře navržená klimatizace běží skoro pořád a skoro neslyšně. Špatně navržená dělá hluk a pak mlčí.</p><a class="vk-link" href="#">Nechte si spočítat výkon<svg aria-hidden="true" class="vk-icon" viewbox="0 0 24 24"><path d="M17 7l-10 10"></path> <path d="M8 7l9 0l0 9"></path></svg></a></blockquote><h2>Kam s venkovní jednotkou</h2><p>Nejlépe na stinnou stranu domu a co nejblíž vnitřní. Každý metr potrubí navíc stojí peníze i výkon. Na střechu ji dávejte, jen když to jinak nejde, servis pak bývá dražší.</p></div></div>
Hlavička článku
Štítek, nadpis a datum na střed, pod nimi fotka v šířce obsahu.
<div class="vk-wrap vk-projecthead"><div class="vk-projecthead__title"><span class="vk-tag">Topení</span><h1 class="vk-h1">Vila v Kuřimi</h1></div><dl class="vk-facts"><div><dt>Klient</dt><dd>Rodina Vlčkova</dd></div><div><dt>Rozsah</dt><dd>Topení a chlazení</dd></div><div><dt>Rok</dt><dd>2025</dd></div><div><dt>Plocha</dt><dd>220 m²</dd></div></dl></div>
Poznámky k projektu
Popisek vlevo, nadpis a text vpravo, oddělené linkou.
HTML kód
<div class="vk-note"><span class="vk-note__label">Návrh systému</span><div class="vk-note__body"><h2 class="vk-h3">Teplo i chlad z jednoho stroje</h2><p>Místo kotle a dvou klimatizací stačilo jedno čerpadlo vzduch-voda a stropní chlazení v ložnicích.</p></div></div><div class="vk-note"><span class="vk-note__label">Zapojení</span><div class="vk-note__body"><h2 class="vk-h3">Ovládání z jednoho místa</h2><p>Termostaty v každé místnosti a aplikace, kterou zvládnou i prarodiče.</p></div></div><div class="vk-note"><span class="vk-note__label">Dopad</span><div class="vk-note__body"><h2 class="vk-h3">O polovinu nižší účet</h2><p>První rok spotřeba klesla z 31 na 15 MWh. Dům je tichý a teplota kolísá o půl stupně.</p></div></div><div class="vk-note"><span class="vk-note__label">Náklady</span><div class="vk-note__body"><h2 class="vk-h3">Návratnost za devět let</h2><p>S dotací vyšla instalace na 268 tisíc korun, bez ní by to bylo o třetinu víc.</p></div></div>
Produkt
Fotka s náhledy vlevo, kliknutím se otevřou v lightboxu, název, věta, řádek tří parametrů oddělených linkami a tlačítko vpravo.
HTML kód
<div class="vk-product"><div data-lb=""><img alt="Severka Duo 60 u rodinného domu" class="vk-product__main" src="materialy/cerpadlo-zahrada.webp"/><div class="vk-thumbs"><img alt="Řada tepelných čerpadel u domu" src="materialy/cerpadla.webp"/><img alt="Tepelné čerpadlo u novostavby" src="materialy/cerpadlo-dum.webp"/><img alt="Vnitřní jednotka v obývacím pokoji" src="materialy/obyvak.webp"/><img alt="Dálkové ovládání" src="materialy/ovladac.webp"/></div></div><div class="vk-product__copy"><span class="vk-tag">Pro rodinné domy</span><h1 class="vk-h2">Severka Duo 60</h1><p class="vk-lede">Topí v zimě, chladí v létě a venku ji skoro neuslyšíte. Sada venkovní a vnitřní jednotky pro domy do 200 m².</p><div class="vk-tiles"><div class="vk-tile"><b>12 kW</b><span>Topný výkon</span></div><div class="vk-tile"><b>30 dB(A)</b><span>Hluk vnitřní jednotky</span></div><div class="vk-tile"><b>A+++</b><span>Energetická třída</span></div></div><a class="vk-btn" href="#">Chci nabídku<svg aria-hidden="true" class="vk-icon" viewbox="0 0 24 24"><path d="M17 7l-10 10"></path> <path d="M8 7l9 0l0 9"></path></svg></a></div></div><div aria-label="Zvětšená fotka" aria-modal="true" class="lb" hidden="" id="lb" role="dialog"><button aria-label="Zavřít" class="lb__x" type="button"><svg aria-hidden="true" class="vk-icon" viewbox="0 0 24 24"><path d="M18 6l-12 12"></path> <path d="M6 6l12 12"></path></svg></button><button aria-label="Předchozí fotka" class="lb__prev" type="button"><svg aria-hidden="true" class="vk-icon" viewbox="0 0 24 24"><path d="M5 12l14 0"></path> <path d="M5 12l6 6"></path> <path d="M5 12l6 -6"></path></svg></button><button aria-label="Další fotka" class="lb__next" type="button"><svg aria-hidden="true" class="vk-icon" viewbox="0 0 24 24"><path d="M5 12l14 0"></path> <path d="M13 18l6 -6"></path> <path d="M13 6l6 6"></path></svg></button><div class="lb__stage"><img alt=""/><p class="lb__cap"></p></div><div class="lb__count"></div></div>
Parametry v rozbalovacích řádcích
Technické údaje jako seznam název a hodnota uvnitř řádku.