Okruh spojuje velkou typografii, kovovou paletu a klidný papírový podklad. Stránka působí lidsky a sebejistě, čísla a postupy jí dávají technickou věrohodnost. Soubory načtěte v pořadí tokens.css, bundle.css, bundle.js. Všechny třídy mají předponu hm-.
Obsah a tón
Pište česky, přímo a v první osobě množného čísla: „Vyzvedneme, smažeme, opravíme.“ Zákazníkovi vykejte.
Nadpis je věta nebo tvrzení, ne kategorie: „Pět kroků od skladu k dalšímu majiteli“, ne „Náš proces“.
Nadpisy a texty pište s velkým písmenem jen na začátku věty. Verzálky nastavuje jen CSS, a jen ve štítcích, tazích a tlačítcích.
Akce popisuje, co se stane: „Nacenit techniku“, ne „Více“. Tlačítko má nejvýš tři slova.
Čísla ukazujte jen doložená. Emoji nepoužívejte.
Spojte nezlomitelnou mezerou předložky a spojky k, s, v, z, o, u, a, i s následujícím slovem. Totéž platí mezi číslem a jednotkou.
Barvy
Stránku postavte na surface-page. Karty dejte na surface-card, navigaci na surface-raised.
Text je text-primary, doplňkový text-secondary. Odkazy a hlavní akce drží text-link a action-primary.
Tmavý pás band-deep je výjimka, na stránce nese nejvýš postup. Ostatní sekce stojí na surface-page a oddělují je mezery a linky.
Třída hm-dark a tmavé pásy samy přepnou barvy pro vše uvnitř. Barvy uvnitř pásu nepřepisujte ručně.
lime-300 je jediný signální akcent. Patří do oznamovací lišty a k hlavní akci na tmavém.
Zlato je materiál, ne stav. Ikony, odrážky a loga mají mark-green. Chybu značí danger v textu i rámečku pole, vždy se slovním vysvětlením.
Čistou černou a bílou nepoužívejte. Nejtmavší je ink-900, nejsvětlejší paper-50.
Typografie
Celý systém má jednu rodinu: Instrument Sans. Štítky a tlačítka jsou verzálky s kladným prostrkáním.
Na stránce je jeden h1. Úvod podstránek má styl h2, sekce h3, malé sekce h4, karty h7.
Nadpisy jsou vždy medium 500 s výrazně záporným prostrkáním. Běžný text je regular 400.
Řádkování h1 a h2 je 1, ne méně. Při 0,93 se české háčky nad verzálkami (Č, Š, Ž, Ř) dotýkají předchozího řádku.
Souvislý text sázejte ve text-reading do šířky container-small. První odstavec článku má 24 px.
Rozvržení
Obsah je v hm-container (nejvýš container-main, boční okraj site-padding, na telefonu 16 px). Obsahové stránky používají hm-container--content, text hm-container--small.
Rytmus sekcí je section-80, vzdušné sekce section-120, závěrečná výzva section-160. Na telefonu se vše sníží na section-64.
Patička stojí vždy na konci okna, i když je obsah krátký.
Odstup nadpisu od obsahu je title-s. Karty v mřížce mají mezeru space-16, uvnitř space-32.
Sekce s nadpisem a akcí používá hm-head: nadpis vlevo, akce vpravo, dole zarovnané.
Krátký blok stojí v hm-split: nadpis vlevo v poměru 5, obsah vpravo v poměru 7.
Plochy a tvar
Stín má jen panel při překrývání během skrolu. Jinde hierarchii nesou plocha, linka a pás.
Karty a obrázky mají radius-16, tlačítka a pole radius-8, štítky radius-24, kulatá tlačítka radius-full.
Karta s výplní znamená samostatný objekt. Karta s obrysem (hm-card--outline) znamená položku seznamu a čte se s okolím.
Sklo patří jen na tmavé pásy a materiály: hm-glass-card s blur-16, hm-btn--glass s blur-32.
Obraz
Fotografie jsou příroda a materiál z velké blízkosti nebo z ptačí perspektivy, a skuteční lidé při práci. Fotky z fotobank s úsměvem u počítače nepoužívejte.
Do doby, než budou fotky, použijte materiály mat-moss, mat-gold, mat-stone, mat-metal, a rozostřené plochy mat-haze, mat-dusk.
Text na obrázku vždy stojí na závoji scrim-strong. Úvod i hm-image-card ho mají v sobě.
Motiv systému je prstenec: postup, stavové grafy a kulatá tlačítka z něj vycházejí.
Pohyb
Přechody trvají 0,2 s, přetáčení prstence 0,8 s, vše s křivkou --ease.
Obsah se při skrolu nikdy neanimuje, prvky stojí na místě od začátku.
Běžící pruh log jede pomalu, při najetí a při prefers-reduced-motion stojí.
Stav při najetí: tlačítko prohodí výplň a text, šipka se nehýbe, obrázek se nepřibližuje, na kartách se podtrhne nadpis. Odkaz v textu je podtržený a při najetí podtržení ztratí. Rámečky zaměření se nepoužívají, při ovládání klávesnicí se odkazy podtrhnou a tlačítka ztlumí.
Ikonografie
Ikony jsou sada Phosphor v tloušťce Regular, soubory a licence MIT jsou v zdroje/src/ikony/. Velké ikony na kartách mají tloušťku Light, největší ikony 64 px tloušťku Thin. Šipky mají tloušťku Bold. Vlastní kreslené ikony nepoužíváme.
V HTML je vkládejte přímo jako <svg class="hm-icon">, aby dědily currentColor. Velikost nastavte proměnnou --s.
Logo je jméno prostým písmem, h6 nebo 20 px medium, a vlevo od něj tučný zelený kruh jen jako obrys.
Barvy
paper
paper-50#fffdf6
paper-100#fcfaf5
paper-200#f0eee9
ink
ink-900#1f1915
lime
lime-300#d4fd80
green
green-300#c3dfd6
green-500#1d725d
green-700#0b5548
green-900#074036
gold
gold-300#ddb06a
gold-700#ba7d21
copper
copper-300#db927a
copper-700#a84c2e
Barvy podle použití
Světlé, tmavé
Název
Použití
surface-page
Podklad celé stránky.
surface-raised
Navigace, jeviště prstence, panely nad stránkou.
surface-card
Karty s výplní na surface-page.
band-deep
Hluboký zelený pás a zvýrazněný tarif, stejný v obou tématech.
tint-green
Výplň prstence.
text-primary
Hlavní text na všech surface-*.
text-secondary
Doplňkový text na surface-page, surface-raised a surface-card.
text-link
Odkazy v textu na surface-*.
line
Dělicí linky a obrysy karet, které nenesou význam.
line-strong
Obrys štítků, zvýrazněné linky.
line-control
Obrys polí a sekundárních tlačítek, drží 3:1 na surface-page a surface-card.
action-primary
Výplň hlavního tlačítka.
on-action-primary
Text a ikona na action-primary.
mark-green
Tečka štítku, ikony, odrážky a loga.
menu-surface
Rozbalovací a mobilní nabídka. Nemění se nad fotkou ani na tmavém pásu.
menu-text
Text a ikony na menu-surface.
menu-line
Obrys nabídky, odděluje ji od obsahu pod ní.
menu-hover
Podklad položky nabídky při najetí.
on-dark-secondary
Doplňkový text na band-deep a na materiálech se závojem.
on-dark-line
Dělicí linky na tmavém.
on-dark-line-strong
Obrysy prvků na tmavém, drží 3:1 na band-deep.
on-dark-glass
Skleněná výplň na tmavém nebo materiálu. Vždy s blur-16.
glass-milk
Jemná výplň skleněného tlačítka. Vždy s blur-32.
glass-milk-line
Rámeček skleněného tlačítka.
scrim
Slabý závoj nad materiálem kvůli navigaci.
scrim-strong
Silný závoj pod textem na materiálu.
danger
Text a linka chyby ve formuláři.
Typografie
Nadpisy
Vyřazenou techniku vracíme do provozu
h1, 120px / 1, řez 500, prostrkání -6px. Jediný na stránce, v úvodu.
Štítek pojmenuje sekci nad nadpisem, značka zařadí kartu.
Dodáváte krátký text, nejvýš tři slova. Třídy: hm-label s tečkou v barvě mark-green, hm-label--pill přidá rámeček a patří nad nadpisy, hm-label--plain je bez tečky. hm-tag zařazuje položku. V jedné sekci je jeden štítek.
Navigace s oznamovací lištou, rozbalovací nabídkou a hlavní akcí.
Dodáváte jméno, 4 až 6 odkazů a jednu akci. Jedna položka smí mít širokou nabídku. Třídy: hm-announce, hm-nav, hm-nav--over pro průhlednou variantu nad úvodem. Navigace je lepivá a přes celou šířku, varianta nad úvodem po odskrolování dostane plochu. Lišta je nepovinná a smí být jen jedna. Pod 991 px se odkazy sbalí pod tlačítko, chování zajišťuje bundle.js.
Nově v Brně: výkup firemní techniky do 48 hodin.Zjistit víc
Rozbalená nabídka přes celou šířku stránky pro položku se službami.
Dodáváte čtyři položky s ikonou, názvem a jednou větou a dole jednu výzvu s odkazem. Třídy: hm-nav__dd--mega, hm-nav__mega, hm-nav__tile, hm-nav__mega-foot. Otevírá se najetím nebo klávesnicí, dlaždice se při najetí podbarví. Ikony mají tloušťku Light v barvě mark-green. Pod 991 px se v menu zobrazí jen názvy položek pod sebou.
Karta funkce s velkou ikonou nahoře a textem dole.
Dodáváte ikonu, nadpis a jednu až dvě věty. Třídy: hm-card hm-feature. Patří do hm-row, řady přes celou šířku stránky se šipkami a tažením myší, nebo do mřížky po třech až čtyřech. Nepřidávejte do ní tlačítko.
Dodáváte doložené číslo s jednotkou a jednu větu. Třídy: hm-card hm-card--outline hm-stat. Dávejte je po třech až čtyřech.
68 %
kusů se vrátí do provozu po opravě.
48 h
od soupisu po závaznou nabídku.
1 120 t
elektroodpadu bez skládky.
HTML kód
<div class="hm-grid" style="--cols:3;padding:16px">
<article class="hm-card hm-card--outline hm-stat"><span class="h3 hm-stat__value">68 %</span>
<p class="hm-muted">kusů se vrátí do provozu po opravě.</p>
</article>
<article class="hm-card hm-card--outline hm-stat"><span class="h3 hm-stat__value">48 h</span>
<p class="hm-muted">od soupisu po závaznou nabídku.</p>
</article>
<article class="hm-card hm-card--outline hm-stat"><span class="h3 hm-stat__value">1 120 t</span>
<p class="hm-muted">elektroodpadu bez skládky.</p>
</article>
</div>
Karta s fotkou
Obrázková karta s textem na závoji, vede na podstránku.
Dodáváte obrázek nebo třídu mat-*, nadpis a krátký popis. Třídy: hm-image-card a uvnitř hm-media__zoom. Poměr stran nastavte proměnnou --ar, výchozí je 1/1. Text je vždy dole.
Dodáváte skutečný citát, jméno, roli a malý obrázek. Třídy: hm-card hm-quote-card, hm-author. Citát má nejvýš dvě věty. Patří do hm-row.
Hotovo bylo za tři dny a protokol přišel se sériovými čísly.
Klára HorákováIT, logistika
Audit to vzal bez jediné otázky.
Marek DvořákBezpečnost, banka
Místo faktury za likvidaci jsme dostali peníze.
Tereza MaláFinance, výroba
HTML kód
<div class="hm-grid" style="--cols:3;padding:16px">
<article class="hm-card hm-quote-card">
<div class="hm-stack-gap"><span class="hm-quote-card__mark" aria-hidden="true"><svg class="hm-icon" viewBox="0 0 256 256" aria-hidden="true"><path d="M116,72v88a48.05,48.05,0,0,1-48,48,8,8,0,0,1,0-16,32,32,0,0,0,32-32v-8H40a16,16,0,0,1-16-16V72A16,16,0,0,1,40,56h60A16,16,0,0,1,116,72ZM216,56H156a16,16,0,0,0-16,16v64a16,16,0,0,0,16,16h60v8a32,32,0,0,1-32,32,8,8,0,0,0,0,16,48.05,48.05,0,0,0,48-48V72A16,16,0,0,0,216,56Z"/></svg></span>
<p class="hm-quote-card__text">Hotovo bylo za tři dny a protokol přišel se sériovými čísly.</p>
</div>
<div class="hm-author"><span class="hm-author__pic mat-moss"></span><span><span class="hm-author__name">Klára Horáková</span><span class="hm-label hm-label--plain hm-muted">IT, logistika</span></span>
</div>
</article>
<article class="hm-card hm-quote-card">
<div class="hm-stack-gap"><span class="hm-quote-card__mark" aria-hidden="true"><svg class="hm-icon" viewBox="0 0 256 256" aria-hidden="true"><path d="M116,72v88a48.05,48.05,0,0,1-48,48,8,8,0,0,1,0-16,32,32,0,0,0,32-32v-8H40a16,16,0,0,1-16-16V72A16,16,0,0,1,40,56h60A16,16,0,0,1,116,72ZM216,56H156a16,16,0,0,0-16,16v64a16,16,0,0,0,16,16h60v8a32,32,0,0,1-32,32,8,8,0,0,0,0,16,48.05,48.05,0,0,0,48-48V72A16,16,0,0,0,216,56Z"/></svg></span>
<p class="hm-quote-card__text">Audit to vzal bez jediné otázky.</p>
</div>
<div class="hm-author"><span class="hm-author__pic mat-metal"></span><span><span class="hm-author__name">Marek Dvořák</span><span class="hm-label hm-label--plain hm-muted">Bezpečnost, banka</span></span>
</div>
</article>
<article class="hm-card hm-quote-card">
<div class="hm-stack-gap"><span class="hm-quote-card__mark" aria-hidden="true"><svg class="hm-icon" viewBox="0 0 256 256" aria-hidden="true"><path d="M116,72v88a48.05,48.05,0,0,1-48,48,8,8,0,0,1,0-16,32,32,0,0,0,32-32v-8H40a16,16,0,0,1-16-16V72A16,16,0,0,1,40,56h60A16,16,0,0,1,116,72ZM216,56H156a16,16,0,0,0-16,16v64a16,16,0,0,0,16,16h60v8a32,32,0,0,1-32,32,8,8,0,0,0,0,16,48.05,48.05,0,0,0,48-48V72A16,16,0,0,0,216,56Z"/></svg></span>
<p class="hm-quote-card__text">Místo faktury za likvidaci jsme dostali peníze.</p>
</div>
<div class="hm-author"><span class="hm-author__pic mat-gold"></span><span><span class="hm-author__name">Tereza Malá</span><span class="hm-label hm-label--plain hm-muted">Finance, výroba</span></span>
</div>
</article>
</div>
Karta článku
Karta příběhu nebo článku, obrázek nahoře a štítky nad nadpisem.
Dodáváte obrázek, nadpis a jeden až dva štítky. Třídy: hm-story, hm-story__meta, hm-story__tags, hm-story__title. Při najetí se podtrhne nadpis. Atribut data-cat zapojí kartu do filtru.
Hlavní článek s obrázkem vedle textu, stojí nad výpisem příběhů.
Dodáváte obrázek, typ zprávy, nadpis, perex a sekundární tlačítko. Třídy: hm-news hm-news--lead. Na stránce je jeden. Ostatní články patří do karty článku.
<div style="padding:16px">
<a class="hm-news hm-news--lead" href="#clanek"><span class="hm-media mat-gold" style="--ar:4/3"></span><span class="hm-news__body"><span class="hm-label hm-label--plain hm-news__type">Tisková zpráva</span><span class="h4">Okruh otevírá druhý servis a přijímá 15 techniků</span><span class="text-reading hm-muted">Druhý servis v Praze nám umožní vracet techniku rychleji. Hledáme patnáct techniků, kteří radši opraví, než vyhodí. Nový servis zvládne dvojnásobek kusů za měsíc a zkrátí čekání na odvoz i nabídku. Otevíráme ho v lednu, s vlastním skladem dílů a přímým napojením na brněnskou dílnu. Firmy z Čech tak techniku předají osobně a ještě ten den vědí, co s ní bude dál.</span><span class="hm-btn hm-btn--secondary">Přečíst článek <svg class="hm-icon" viewBox="0 0 256 256" aria-hidden="true"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"/></svg></span></span>
</a>
</div>
Karta člověka
Karta člověka s fotkou, jménem a rolí.
Dodáváte portrét, jméno a roli. Třídy: hm-person. Dokud fotky nejsou, použijte hm-person__plate nebo mat-* s iniciálami v hm-person__initials. Portréty mají poměr 4/5, plochy s iniciálami 1/1. V celé řadě je jedno pozadí.
Dodáváte ikonu, nadpis, jednu větu, kulatou fotku, jméno, telefon a e-mail. Třídy: hm-card hm-contact, člověk hm-contact__person s fotkou hm-face a odkazy hm-contact__link. Na hm-footer použijte místo ní hm-glass-card.
Cenová karta tarifu se seznamem toho, co obsahuje.
Dodáváte název, jednu větu, cenu, akci a seznam. Třídy: hm-card hm-price, zvýrazněný tarif hm-price--featured hm-dark s hm-btn--accent. Zvýrazněný je nejvýš jeden, prostřední. V hm-grid sdílejí karty řádky, takže ceny, tlačítka a seznamy lícují. Cenu pište s mezerou, „9 900 Kč“.
Rozbalovací otázky a odpovědi na nativním prvku details.
Dodáváte dvojice otázka a odpověď. Třída: hm-faq, vedle nadpisu v hm-split. Otevřená je vždy jen jedna otázka, první může být otevřená od začátku. Odpověď se plynule vysouvá a zasouvá. Odpověď má nejvýš tři věty, delší text patří na vlastní stránku.
Dotazy
Ptáte se, odpovídáme
Od kolika kusů techniku vykupujete?
Od deseti kusů. Menší množství přijmeme k recyklaci zdarma, ale nenaceňujeme ho.
Jak prokážete, že jsou data smazaná?
Ke každému sériovému číslu dostanete protokol o smazání. Disky, které nejdou smazat, fyzicky zničíme a doložíme to fotkou.
Kdo techniku odveze?
Náš řidič s vlastním autem. Odvoz je od 30 kusů v ceně po celé České republice.
Co se stane s tím, co nejde opravit?
Rozebereme to na součástky a materiály. Měď, hliník a plasty předáváme certifikovaným zpracovatelům.
Můžu sledovat, kde je můj kus?
Ano. Každý kus má záznam v přehledu: příjem, smazání, oprava a prodej nebo recyklace.
HTML kód
<div class="hm-split" style="padding:24px">
<div class="hm-head__title"><span class="hm-label hm-label--pill">Dotazy</span>
<h2 class="h4">Ptáte se, odpovídáme</h2>
</div>
<div class="hm-faq">
<details name="faq-6" open>
<summary>Od kolika kusů techniku vykupujete?<svg class="hm-icon" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/></svg>
</summary>
<p class="hm-faq__a">Od deseti kusů. Menší množství přijmeme k recyklaci zdarma, ale nenaceňujeme ho.</p>
</details>
<details name="faq-6">
<summary>Jak prokážete, že jsou data smazaná?<svg class="hm-icon" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/></svg>
</summary>
<p class="hm-faq__a">Ke každému sériovému číslu dostanete protokol o smazání. Disky, které nejdou smazat, fyzicky zničíme a doložíme to fotkou.</p>
</details>
<details name="faq-6">
<summary>Kdo techniku odveze?<svg class="hm-icon" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/></svg>
</summary>
<p class="hm-faq__a">Náš řidič s vlastním autem. Odvoz je od 30 kusů v ceně po celé České republice.</p>
</details>
<details name="faq-6">
<summary>Co se stane s tím, co nejde opravit?<svg class="hm-icon" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/></svg>
</summary>
<p class="hm-faq__a">Rozebereme to na součástky a materiály. Měď, hliník a plasty předáváme certifikovaným zpracovatelům.</p>
</details>
<details name="faq-6">
<summary>Můžu sledovat, kde je můj kus?<svg class="hm-icon" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/></svg>
</summary>
<p class="hm-faq__a">Ano. Každý kus má záznam v přehledu: příjem, smazání, oprava a prodej nebo recyklace.</p>
</details>
</div>
</div>
Běžící loga
Běžící pruh referencí přes celou šířku stránky, mezi dvěma linkami.
Dodáváte loga klientů se souhlasem. Třídy: hm-logos, dvakrát hm-marquee__t, druhá kopie s aria-hidden, položky hm-logo. Při najetí se zastaví. Všechna loga mají barvu mark-green.
Dodáváte HTML s nadpisy h2, h3, odstavci, seznamy, tabulkou a obrázky. Třída: hm-prose v hm-container--small. Styly bere z prvků, první odstavec je větší a číslovaný seznam má zelená kolečka. Tabulku obalte do hm-prose__table, součet patří do tfoot, tlačítka do hm-actions. Popisek obrázku patří do figcaption.
Střední škola v Brně měla v učebnách 240 notebooků starých sedm let. Nikdo nevěděl, co se starými.
Co bylo potřeba vyřešit
Protokol ke každému sériovému číslu
Odvoz o prázdninách
Jak to probíhalo
Přímo v učebnách jsme sepsali všechny kusy.
O prázdninách jsme techniku odvezli.
Škola dostala protokoly a vyúčtování.
Výsledek
Kusů
Co se s nimi stalo
Zpět do provozu
163
Po smazání dat slouží dál.
Na materiál
77
Kovy a plasty putovaly k recyklaci.
Celkem
240
Všechny kusy mají protokol.
Co z toho zůstalo
Z 240 kusů se 163 vrátilo do provozu. Kontakt najdete na stránce Kontakt.
<div class="hm-container hm-container--small" style="padding-block:24px">
<div class="hm-prose">
<p>Střední škola v Brně měla v učebnách 240 notebooků starých sedm let. Nikdo nevěděl, co se starými.</p>
<h2>Co bylo potřeba vyřešit</h2>
<ul>
<li>Protokol ke každému sériovému číslu</li>
<li>Odvoz o prázdninách</li>
</ul>
<h2>Jak to probíhalo</h2>
<ol>
<li>Přímo v učebnách jsme sepsali všechny kusy.</li>
<li>O prázdninách jsme techniku odvezli.</li>
<li>Škola dostala protokoly a vyúčtování.</li>
</ol>
<div class="hm-prose__table">
<table>
<thead>
<tr>
<th>Výsledek</th>
<th>Kusů</th>
<th>Co se s nimi stalo</th>
</tr>
</thead>
<tbody>
<tr>
<td>Zpět do provozu</td>
<td>163</td>
<td>Po smazání dat slouží dál.</td>
</tr>
<tr>
<td>Na materiál</td>
<td>77</td>
<td>Kovy a plasty putovaly k recyklaci.</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Celkem</td>
<td>240</td>
<td>Všechny kusy mají protokol.</td>
</tr>
</tfoot>
</table>
</div>
<h3>Co z toho zůstalo</h3>
<p>Z 240 kusů se <strong>163 vrátilo do provozu</strong>. Kontakt najdete na stránce <a href="#">Kontakt</a>.</p>
<div class="hm-actions">
<a class="hm-btn" href="#">Nacenit techniku</a>
<a class="hm-btn hm-btn--secondary" href="#">Vzor protokolu</a>
</div>
</div>
</div>
Kontaktní údaje
Kontaktní údaje s ikonami, oddělené linkami.
Dodáváte telefon, e-mail, adresu a provozní dobu. Třídy: hm-contact-list, telefon hm-contact-list__tel. Telefon a e-mail jsou větší než ostatní řádky, telefon je podtržený.
Dodáváte město, roli, adresu, provozní dobu a odkaz. Třídy: hm-offices, hm-office. Vedle nadpisu patří do hm-contact-main. Na telefonu se řádek složí pod sebe.
Obrázek nebo materiálová textura se zaoblením a poměrem stran.
Dodáváte fotku jako <img> uvnitř, nebo třídu mat-moss, mat-gold, mat-stone, mat-metal, mat-haze, mat-dusk. Třída hm-media, poměr proměnnou --ar. Přidejte hm-media__zoom, když je obrázek klikací. Materiály jsou náhrada do doby, než budou fotky.
Postup o pěti krocích se zeleným sloupcem a otáčivým prstencem. Nejvýraznější prvek systému.
Dodáváte tři až šest kroků: štítek, nadpis, text, ikonu a materiál do data-mat. Třídy: hm-process, hm-ring. Atribut data-hm-process="scroll" řídí prstenec skrolem, click klikáním. Proměnná --n na hm-ring musí odpovídat počtu kroků. Na stránce je jen jeden.
Bílé panely s kroky se při skrolu vrství přes sebe na rozostřené ploše.
Dodáváte číslo, nadpis, text a obrázek každého kroku. Třídy: hm-panels, hm-panel. Plocha je mat-haze. Panel je v obou tématech světlý. Použijte tři až čtyři. Pokud kroky netvoří pořadí, zvolte kartu výhody.
Dodáváte nadpis jako konkrétní slib a jednu akci. Třídy: hm-cta a plocha mat-dusk nebo fotka se závojem. Patří na úvodní stránku, podstránky ho nemají.
Patička se zavoláním zpět, skleněnými kartami, sloupci odkazů a právním řádkem.
Dodáváte jméno, popis, dvě hlavní cesty, tři sloupce odkazů bez nadpisů a právní řádek. Třída: hm-footer s plochou mat-haze, pole hm-newsletter sbírá telefon. Karty hm-glass-card mají nadpis a šipku v hm-glass-card__head.
Formulář s popisky nad poli, chybou pod polem a poděkováním.
Dodáváte pole a akci odeslání. Třídy: hm-form, hm-field, hm-input, hm-ms pro rozbalovací výběr se zaškrtávacími poli nebo přepínači, hm-consent pro souhlas, hm-form__full a hm-form__ok hned za formulářem.
Popisek je vždy vidět, pole nemají text uvnitř. Jméno se jmenuje Jméno a příjmení (firma).
E-mail i telefon jsou vždy povinné. Zpráva je nepovinná, souhlas povinný.
data-hm-form zapne kontrolu podle atributů data-msg a data-msg-format. Chyba se ukáže pod polem po jeho opuštění a pak průběžně. Odeslání se zastaví a kurzor skočí na první chybné pole.
Skryté pole web a kontrola slouží jako antispam. Skutečné odeslání dodáváte sami.
Děkujeme, zprávu jsme dostali.
Ozveme se vám e-mailem nebo telefonicky do jednoho pracovního dne. V ukázce se nic neodesílá.
Dodáváte tlačítka s data-cat a seznam karet se shodným data-cat. Atribut data-hm-filter nese id seznamu, tlačítko s data-cat="all" vrací vše. Aktivní tlačítko má is-active, počet položek stojí v hm-filter__n.