# Design system Okruh Tento soubor popisuje design system Okruh. Při návrhu nebo kódu se drž jeho pravidel, používej jen uvedené barvy, písma a komponenty a jejich HTML přebírej beze změny tříd. Nevymýšlej nové barvy ani styly. Velká typografie, teplé papírové plochy, hluboká zelená a limetkový akcent. Písmo: Instrument Sans. Ukázkový web: https://www.romankacerek.cz/dev/designsystem/okruh/ukazka/. Katalog: https://www.romankacerek.cz/dev/designsystem/okruh/. Sestaveno 11. 11. 2026. ## Soubory Načti je v tomto pořadí: - https://www.romankacerek.cz/dev/designsystem/okruh/assets/tokens.css - https://www.romankacerek.cz/dev/designsystem/okruh/assets/bundle.css - https://www.romankacerek.cz/dev/designsystem/okruh/assets/bundle.js Relativní cesty v HTML níže vedou do https://www.romankacerek.cz/dev/designsystem/okruh/assets/. ## Pravidla 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 ``, 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 | Název | Hodnota | V tmavém tématu | Použití | | --- | --- | --- | --- | | paper-50 | #fffdf6 | #fffdf6 | Nejsvětlejší papír. Karty na stránce a text na tmavých pásech. | | paper-100 | #fcfaf5 | #fcfaf5 | Zvýšená plocha: navigace, panely, karty FAQ. | | paper-200 | #f0eee9 | #f0eee9 | Podklad stránky a klidné plochy ve světlém tématu. | | ink-900 | #1f1915 | #1f1915 | Text a inkoustové pásy. Teplá téměř černá, nikdy čistá černá. | | lime-300 | #d4fd80 | #d4fd80 | Jediný signální akcent: oznamovací lišta a hlavní akce na tmavém. | | green-300 | #c3dfd6 | #c3dfd6 | Dorovnání prstencového grafu. | | green-500 | #1d725d | #1d725d | Značky a ikony. Text na papíru 4.5:1 a víc. | | green-700 | #0b5548 | #0b5548 | Hlavní akce a odkazy ve světlém tématu. | | green-900 | #074036 | #074036 | Hluboký zelený pás. Nosná barva značky. | | gold-300 | #ddb06a | #ddb06a | Dorovnání prstencového grafu. | | gold-700 | #ba7d21 | #ba7d21 | Prstencový graf a ilustrace. | | copper-300 | #db927a | #db927a | Dorovnání prstencového grafu. | | copper-700 | #a84c2e | #a84c2e | Prstencový graf a ilustrace. | | surface-page | #f0eee9 | #0c0a08 | Podklad celé stránky. | | surface-raised | #fcfaf5 | #13100d | Navigace, jeviště prstence, panely nad stránkou. | | surface-card | #fffdf6 | #1a1613 | Karty s výplní na surface-page. | | band-deep | #074036 | #074036 | Hluboký zelený pás a zvýrazněný tarif, stejný v obou tématech. | | tint-green | #f0eee9 | #0f3a32 | Výplň prstence. | | text-primary | #1f1915 | #fffdf6 | Hlavní text na všech surface-*. | | text-secondary | #1f1915a3 | #fffdf6a3 | Doplňkový text na surface-page, surface-raised a surface-card. | | text-link | #0b5548 | #d4fd80 | Odkazy v textu na surface-*. | | line | #1f191529 | #fffdf629 | Dělicí linky a obrysy karet, které nenesou význam. | | line-strong | #1f191552 | #fffdf652 | Obrys štítků, zvýrazněné linky. | | line-control | #1f191585 | #fffdf685 | Obrys polí a sekundárních tlačítek, drží 3:1 na surface-page a surface-card. | | action-primary | #0b5548 | #d4fd80 | Výplň hlavního tlačítka. | | on-action-primary | #fffdf6 | #1f1915 | Text a ikona na action-primary. | | mark-green | #1d725d | #d4fd80 | Tečka štítku, ikony, odrážky a loga. | | menu-surface | #fffdf6 | #1a1613 | Rozbalovací a mobilní nabídka. Nemění se nad fotkou ani na tmavém pásu. | | menu-text | #1f1915 | #fffdf6 | Text a ikony na menu-surface. | | menu-line | #1f191552 | #fffdf652 | Obrys nabídky, odděluje ji od obsahu pod ní. | | menu-hover | #f0eee9 | #fffdf61a | Podklad položky nabídky při najetí. | | on-dark-secondary | #fffdf6b8 | #fffdf6b8 | Doplňkový text na band-deep a na materiálech se závojem. | | on-dark-line | #fffdf629 | #fffdf629 | Dělicí linky na tmavém. | | on-dark-line-strong | #fffdf685 | #fffdf685 | Obrysy prvků na tmavém, drží 3:1 na band-deep. | | on-dark-glass | #fffdf629 | #fffdf629 | Skleněná výplň na tmavém nebo materiálu. Vždy s blur-16. | | glass-milk | #ffffff14 | #ffffff14 | Jemná výplň skleněného tlačítka. Vždy s blur-32. | | glass-milk-line | #ffffff40 | #ffffff40 | Rámeček skleněného tlačítka. | | scrim | #1f191566 | #1f191566 | Slabý závoj nad materiálem kvůli navigaci. | | scrim-strong | #1f1915a3 | #1f1915a3 | Silný závoj pod textem na materiálu. | | danger | #b3262c | #ff9095 | Text a linka chyby ve formuláři. | ## Typografie | Styl | Hodnoty | Použití | | --- | --- | --- | | h1 | 120px / 1, řez 500, prostrkání -6px | Jediný na stránce, v úvodu. | | h2 | 96px / 1, řez 500, prostrkání -3px | Úvod podstránek. | | h3 | 64px / 1.05, řez 500, prostrkání -2px | Nadpis sekce a velká čísla. | | h4 | 48px / 1.05, řez 500, prostrkání -2px | Nadpis menší sekce. | | h5 | 40px / 1.1, řez 500, prostrkání -1px | Citáty a úvodní odstavce sekcí. | | h6 | 32px / 1.125, řez 500, prostrkání -.5px | Kroky postupu, cena. | | h7 | 24px / 1.166, řez 500, prostrkání -.5px | Nadpis karty. | | text-large | 20px / 1.4, řez 500, prostrkání -.4px | Úvodní odstavec a otázky FAQ. | | text-reading | 18px / 1.5, řez 400, prostrkání -.2px | Souvislý text. Měřítko do 750 px. | | text-body | 16px / 1.5, řez 400, prostrkání -.25px | Výchozí text rozhraní. | | text-small | 14px / 1.42, řez 400, prostrkání 0 | Poznámky, popisky, právní řádky. | | label-large | 11px / 1.333, řez 600, prostrkání 1px | Štítek nad nadpisem, vždy verzálky. | | label-small | 11px / 1.2, řez 500, prostrkání .5px | Tagy, vždy verzálky. | | button-large | 16px / 1.5, řez 500, prostrkání .5px | Úvod a závěrečná výzva. | | button-small | 15px / 1.42, řez 500, prostrkání .5px | Výchozí tlačítko. | ## Mezery | Název | Hodnota | Použití | | --- | --- | --- | | space-4 | 4px | Mezi tagy. | | space-8 | 8px | Nadpis a popis na kartě, tlačítka vedle sebe. | | space-12 | 12px | Vnitřní skupiny na kartě. | | space-16 | 16px | Mezera mřížky karet a bloky formuláře. | | space-24 | 24px | Řádky formuláře. | | space-32 | 32px | Vnitřní okraj karty a sloupce rozvržení. | | space-48 | 48px | Velké bloky uvnitř sekce. | | space-64 | 64px | Hlavní svislý rytmus patičky. | | section-64 | 64px | Odsazení sekce na telefonu. | | section-80 | 80px | Výchozí odsazení sekce. | | section-96 | 96px | Výzva na telefonu. | | section-120 | 120px | Vzdušná sekce. | | section-160 | 160px | Závěrečná výzva. | | title-s | 64px | Odstup nadpisu sekce od obsahu. | | site-padding | 32px | Boční okraj na desktopu, na telefonu 16 px. | ## Rádiusy | Název | Hodnota | Použití | | --- | --- | --- | | radius-4 | 4px | Drobnosti uvnitř karet. | | radius-8 | 8px | Tlačítka, pole, skleněné karty. | | radius-12 | 12px | Rozbalovací nabídka. | | radius-16 | 16px | Karty a obrázky. | | radius-24 | 24px | Štítky a tagy. | | radius-full | 999px | Kulatá tlačítka a prstenec. | ## Kontejnery | Název | Hodnota | Použití | | --- | --- | --- | | container-main | 1800px | Nejširší obsah. | | container-content | 1280px | Obsahové stránky a karty výhod. | | container-small | 750px | Souvislý text a formuláře. | ## Body zlomu | Název | Hodnota | Použití | | --- | --- | --- | | bp-tablet | 991px | Sloupce se skládají, navigace se sbalí. | | bp-phone | 767px | Jeden sloupec, boční okraj 16 px. | | bp-small | 479px | Malý telefon, zmenšený h1 a h2. | ## Komponenty: Akce ### Tlačítka Tlačítko spouští jednu akci nebo vede na další stránku. Dodáváte text a volitelně ikonu. Třídy: `hm-btn` a modifikátor `--secondary`, `--accent`, `--glass`, `--large`, `--round`. - Na stránce je jedna hlavní akce v sekci, ostatní jsou `--secondary`. - `--accent` patří do úvodu a zvýrazněnému tarifu. `--glass` jen na tmavý pás nebo materiál. - `--round` je šipka u řady karet. Potřebuje `aria-label`, pokud není uvnitř odkazu. - Text nepište verzálkami, nastaví je CSS. ```html
Nacenit technikuJak to fungujeObjednatVelké
Na tmavémSkloObrys
``` ### Štítky Š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. ```html
PostupŘízený druhý životBez značkyStudieŠkolství
``` ## Komponenty: Navigace ### Hlavička 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`. ```html
Nově v Brně: výkup firemní techniky do 48 hodin.Zjistit víc
Okruh
Nacenit techniku
Okruh
Nacenit techniku
``` ### Široká nabídka 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. ```html
Okruh
Nacenit techniku
``` ### Úvod Úvod otevírá stránku ve třech variantách podle toho, co stránka prodává. - `hm-hero--photo`: úvodní stránka, přes celou šířku na materiálu nebo fotce, `h1` vlevo dole, text a akce vpravo. - `hm-hero--band`: podstránka se službou, text uprostřed a pod ním obrázek se všemi rohy a mezerou dole. - `hm-hero--left`: obsahová stránka, nadpis zarovnaný vlevo. Dodáváte nadpis, jednu nebo dvě akce a obrázek. Nepřidávejte třetí akci. ```html
Okruh

Vyřazenou techniku vracíme do provozu

Vykupujeme, opravujeme a recyklujeme firemní techniku.

Nacenit technikuJak to funguje
Řešení

Od vyřazeného kusu k další práci

U každého kusu víte, co se s ním stalo.

O nás

Okruh je dílna, sklad a tým

``` ## Komponenty: Karty ### Karta s ikonou 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. ```html

Data jsou pryč

Ke každému sériovému číslu dostanete protokol.

Odvoz po celé ČR

Od 30 kusů jezdíme zdarma.

Férová cena předem

Oceníme kus po kuse podle stavu.

``` ### Karta výhody Obrysová karta výhody se zelenou ikonou. Dodáváte ikonu, nadpis a text. Třídy: `hm-card hm-card--outline hm-benefit`. Při najetí dostane plochu `surface-card` bez rámečku. ```html

Bezpečnost dat

Mažeme podle uznávané metody a doložíme to.

Plná přehlednost

Víte, který kus jde do prodeje.

Menší uhlíková stopa

Oprava v Brně šetří dopravu.

``` ### Karta s číslem Karta s jedním velkým číslem a vysvětlením. 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. ```html
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.

``` ### 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. ```html
BrnoHlavní servis a skladPrahaPříjem technikyOstravaOtevíráme na jaře
``` ### Karta s citátem Karta s citátem zákazníka a podpisem. 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`. ```html

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
``` ### 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. ```html
ŠkolstvíJak jsme pomohli škole vyměnit 240 notebookůPrůmyslStudieZ vyřazených serverů 1,2 tuny čisté mědiNávodProtokol o smazání dat: co v něm má být
``` ### Karta zprávy 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. ```html
Tisková zprávaOkruh otevírá druhý servis a přijímá 15 techniků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.Přečíst článek
``` ### 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í. ```html
JNJana NovákováVedení firmy
PSPetr SvobodaVedoucí servisu
LKLucie KolářováBezpečnost dat
TBTomáš BenešLogistika
``` ### Kontaktní karta Karta rozcestníku pro konkrétní typ dotazu. 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`. ```html

Výkup techniky

Naceníme do dvou dnů.Tomáš Beneš+420 123 456 789vykup@okruh.cz

Média a tisk

Rádi poskytneme čísla.Jana Nováková+420 123 456 789media@okruh.cz

Práce u nás

Hledáme techniky do servisu.Petr Svoboda+420 123 456 789kariera@okruh.cz
``` ### Cenová karta 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č“. ```html

Základ

Pro malé kanceláře.

0 Kč
Objednat Základ

Provoz

Pro firmy s pravidelnou obměnou.

9 900 Kč/rok
Objednat Provoz

Korporace

Pro velké organizace s vlastními pravidly.

Na míru
Domluvit schůzku
``` ## Komponenty: Obsah ### Časté dotazy 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. ```html
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.

``` ### 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`. ```html
``` ### Text článku Souvislý text článku nebo právní stránky. 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`. ```html

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

Jak to probíhalo

  1. Přímo v učebnách jsme sepsali všechny kusy.
  2. O prázdninách jsme techniku odvezli.
  3. Škola dostala protokoly a vyúčtování.
VýsledekKusůCo se s nimi stalo
Zpět do provozu163Po smazání dat slouží dál.
Na materiál77Kovy a plasty putovaly k recyklaci.
Celkem240Všechny kusy mají protokol.

Co z toho zůstalo

Z 240 kusů se 163 vrátilo do provozu. Kontakt najdete na stránce Kontakt.

Nacenit technikuVzor protokolu
``` ### 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ý. ```html
``` ### Provozovny Řádky provozoven s adresou a navigací. 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. ```html

Brno

Dílna a sklad

Vídeňská 12, 639 00 Brno

Po až pá 8.00 až 16.30

Navigovat

Praha

Příjem techniky

Průmyslová 8, 108 00 Praha

Po až pá 9.00 až 16.00

Navigovat
``` ### Časová osa Stručná historie po letech, řádky oddělené linkou. Dodáváte rok a jednu větu. Třída: `hm-timeline__row`. Vedle nadpisu patří do `hm-split`. ```html
2015

První opravené notebooky a jedna místnost v Brně.

2019

Vlastní servis a certifikované mazání dat.

2023

Certifikace ISO 27001 a první velké firmy.

``` ### Ke stažení Seznam dokumentů ke stažení a záznam změn. Dodáváte název a odkaz na soubor. Třídy: `hm-doclist` s `hm-btn--secondary`, pro historii `hm-log`. Název v seznamu je celý, ne „PDF ke stažení“. ```html
Certifikát ISO 27001 Vzor protokolu o smazání
30. srpna 2026v2.1Doplněna doba držení protokolů.
``` ### Obrázky a materiály Obrázek nebo materiálová textura se zaoblením a poměrem stran. Dodáváte fotku jako `` 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. ```html
``` ## Komponenty: Pásy ### Postup s prstencem 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. ```html
Postup

Pět kroků od skladu k dalšímu majiteli

``` ### Vrstvené panely 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. ```html
01

Soupis a příjem

Každý kus dostane štítek.

02

Smazání a test

Hodnoty jdou do přehledu.

``` ### Závěrečná výzva Závěrečná výzva přes celou šířku před patičkou. 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í. ```html

Pošlete nám soupis,
cenu máte do 48 hodin

Nacenit techniku
``` ### Patička 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`. ```html ``` ## Komponenty: Formuláře ### Formulář 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. ```html
Čeho se to týká
- vyberte -
Kolik je to kusů
- vyberte -
``` ### Filtr Filtr karet podle kategorie. 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`. ```html
```