Pevný systém pro stavebnictví, techniku a služby se strojem. Oranžová, inkoustová a šedá plocha, úzké verzálky a ostré rohy.
Výchozí je světlé téma. Tmavé přepnete v liště nahoře.
Pravidla
Rohy jsou všude ostré, systém nemá žádné zaoblení ani stíny.
Na oranžové je text vždy inkoustový, nikdy bílý. Na inkoustové jsou nadpisy bílé a text šedý.
Plochy se střídají v pořadí oranžová, inkoustová, šedá. Vedle sebe nestojí dvě stejné.
Linky a čísla jsou oranžové. Silné linky mají 3 až 4 px, dělicí 1 px.
Nadpisy a tlačítka jsou vždy verzálky, text píšeme normálně a verzálky nastaví CSS.
Text nad fotkou stojí vždy na závoji.
Písmo: Barlow Condensed na nadpisy, čísla a telefon v hlavičce, Barlow na text a tlačítka.
Telefon se píše ve tvaru +420 123 456 789.
Pohyb a stavy
Obsah se při posouvání neanimuje. Tlačítko při najetí prohodí barvy, šipka se nehýbe a fotky se nepřibližují.
Na kartách a řádcích se při najetí podtrhne text.
Prvky ovládané klávesnicí mají oranžový rámeček 3 px.
Obrázky a ukázka
Fotky v ukázce nahrazují generované textury suti, štěrku, betonu a oceli ze souboru zdroje/src/crusher/textury.py. Ikony jsou ze sady Phosphor (MIT), písma z Google Fonts.
Firma Crusher je smyšlená, ukázkové ceny, stroj a údaje taky.
Barvy
Hlavní barvy
orange-500#ff5e0fHlavička, hlavní tlačítko, linky, ikony a jedna plocha v sekci. Text na ní je vždy ink-900.
orange-400#ff7a33Štítek a odkaz při najetí na inkoustové ploše.
Neutrální
ink-900#111318Text, tmavé tlačítko a inkoustové pásy.
ink-800#1c1f26Plocha o stupeň světlejší na inkoustovém pásu.
gray-100#f2f2f0Klidná plocha karet a polovin.
steel-300#c3c8d2Běžný text na inkoustové ploše.
steel-400#a8adb8Doplňkový text na inkoustové ploše.
slate-600#4a4f59Doplňkový text na světlé ploše.
white#ffffffPodklad stránky, záložka s logem a pole formuláře.
Barvy podle použití (světlé, tmavé)
surface-page#ffffff / #111318Podklad stránky.
surface-soft#f2f2f0 / #1c1f26Klidná plocha.
text-primary#111318 / #ffffffNadpisy a text.
text-muted#4a4f59 / #c3c8d2Doplňkový text.
line#11131824 / #ffffff29Dělicí linky.
line-control#11131885 / #ffffff85Rámeček ovládacích prvků, drží 3:1.
action#ff5e0f / #ff5e0fVýplň hlavního tlačítka.
on-action#111318 / #111318Text a ikona na oranžové.
mark#ff5e0f / #ff7a33Linky štítků, ikony a čísla.
danger#a3200a / #ff9a85Text a rámeček chyby ve formuláři.
Typografie
Rozměry
Mezery a šířky
Název
Hodnota
Ukázka
Použití
space-8
8px
Mezi nadpisem a popisem.
space-16
16px
Vnitřní skupiny.
space-24
24px
Mezera mřížky karet.
space-32
32px
Odstup velkých prvků.
space-48
48px
Nadpis sekce a obsah.
pad-card
clamp(24px,2.5vw,40px)
Vnitřní okraj karty.
pad-pane
clamp(40px,5vw,80px)
Vnitřní okraj poloviny a úvod.
gutter
clamp(18px,4vw,48px)
Boční okraj stránky.
section
clamp(48px,6vw,88px)
Odsazení pásu.
section-large
clamp(72px,9vw,120px)
Odsazení vzdušné sekce.
wrap
1320px
Šířka obsahu.
header-height
82px
Výška hlavičky.
Rádiusy
Název
Hodnota
Ukázka
Použití
radius-0
0
Všechny prvky mají ostré rohy, systém žádné zaoblení nepoužívá.
Komponenty
Základy
Tlačítka
Verzálky, rámeček 3 px a ostré rohy. Hlavní je oranžové, na oranžové ploše inkoustové. Při najetí se barvy prohodí, bez animace pozice. Obrysová varianta patří na fotku nebo vedle hlavního tlačítka.
Štítek, nadpis a nepovinný úvodní odstavec, vše zarovnané vlevo.
HTML kód
<header class="cr-head"><p class="cr-kick">Ceník</p><h2 class="cr-d2">Cena bez překvapení</h2><p class="cr-lede cr-muted">Platíte hodiny práce a kilometry dopravy.</p></header>
Navigace
Horní lišta
Inkoustová lišta s e-mailem, oblastí a provozní dobou. Pod 900 px zůstává jen e-mail.
HTML kód
<div class="cr-util"><div class="cr-wrap"><a class="cr-util__item" href="#"><svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM203.43,64,128,133.15,52.57,64ZM216,192H40V74.19l82.59,75.71a8,8,0,0,0,10.82,0L216,74.19V192Z"></path></svg>info@crusher.example</a><span class="cr-util__item cr-util__hide"><svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><path d="M128,64a40,40,0,1,0,40,40A40,40,0,0,0,128,64Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,128Zm0-112a88.1,88.1,0,0,0-88,88c0,31.4,14.51,64.68,42,96.25a254.19,254.19,0,0,0,41.45,38.3,8,8,0,0,0,9.18,0A254.19,254.19,0,0,0,174,200.25c27.45-31.57,42-64.85,42-96.25A88.1,88.1,0,0,0,128,16Zm0,206c-16.53-13-72-60.75-72-118a72,72,0,0,1,144,0C200,161.23,144.53,209,128,222Z"></path></svg>Olomouc a okolí 120 km</span><span class="cr-util__item cr-util__hide"><svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"></path></svg>Po až ne, i o víkendech</span></div></div>
Hlavička
Lepivá oranžová lišta. Logo stojí na bílé záložce až k okraji stránky, vpravo telefon a inkoustové tlačítko. Podnabídka je inkoustová. Pod 1120 px se položky schovají do Menu.
Fotka a plocha vedle sebe přes celou šířku. Plocha je oranžová nebo šedá, strany lze prohodit. Obsah: štítek, nadpis, věta, odrážky s fajfkou a tlačítko.
HTML kód
<section class="cr-split"><div class="cr-split__img cr-cover mat-sterk"></div><div class="cr-pane cr-pane--orange"><div class="cr-pane__in"><p class="cr-kick">Proč na stavbě</p><h2 class="cr-d2">Odvoz a skládkovné si ušetříte</h2><p class="cr-lede">Materiál zpracujeme na místě. Recyklát zůstane na stavbě a hned se dá použít.</p><ul class="cr-checks"><li><svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span>Bez odvozu a skládkovného</span></li><li><svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span>Recyklát máte po ruce</span></li><li><svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span>Nic předem netřídíte ani nečistíte</span></li><li><svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span>Jezdíme i o víkendech</span></li></ul><a class="cr-btn cr-btn--ink" href="#">Chci nabídku<svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><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"></path></svg></a></div></div></section><section class="cr-split cr-split--flip"><div class="cr-split__img cr-cover mat-ocel"></div><div class="cr-pane cr-pane--grey"><div class="cr-pane__in"><p class="cr-kick">Technické parametry</p><h2 class="cr-d2">Crusher CR 250</h2><p class="cr-lede">Dvouhřídelový drtič na pásovém podvozku s rádiovým ovládáním. Zvládne i silně armovaný železobeton.</p><ul class="cr-checks"><li><svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span>Magnetický separátor v základní výbavě</span></li><li><svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span>Automatická reverzace chrání nástroje</span></li><li><svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span>Výstupní frakci nastavíme podle použití</span></li><li><svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span>Pásy projedou i rozbitým staveništěm</span></li></ul><a class="cr-btn cr-btn--orange" href="#">Více o stroji<svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><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"></path></svg></a></div></div></section>
Výzva
Oranžový pás s nadpisem vlevo a dvěma tlačítky vpravo. Na konci podstránek.
HTML kód
<section class="cr-cta"><div class="cr-wrap"><div><h2 class="cr-d2">Máte na stavbě hromadu suti?</h2><p>Zavolejte, řekneme vám cenu na vaši zakázku.</p></div><div class="cr-actions"><a class="cr-btn cr-btn--ink" href="#">Chci nabídku<svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><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"></path></svg></a><a class="cr-btn cr-btn--ghost" href="#">+420 123 456 789</a></div></div></section>
Karty
Dlaždice výhod
Čtyři sloupce s oranžovou linkou 3 px nahoře, ikona 40 px, nadpis a věta.
HTML kód
<div class="cr-tiles"><article class="cr-tile"><svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><path d="M224.91,69.75a6,6,0,0,0-9.63-2.16l-41.07,37.9L154.7,101.3l-4.19-19.51,37.9-41.07a6,6,0,0,0-2.16-9.63,70,70,0,0,0-89.77,94.39l-61.39,53c-.11.09-.21.19-.32.3A30,30,0,0,0,77.2,221.23c.11-.11.21-.21.3-.32l53-61.39a70,70,0,0,0,94.39-89.77ZM160,154a58,58,0,0,1-28-7.22,6,6,0,0,0-7.45,1.33L68.57,212.88a18,18,0,0,1-25.45-25.45l64.76-55.94A6,6,0,0,0,109.2,124a58,58,0,0,1,64-84.53L139.58,75.93a6,6,0,0,0-1.45,5.33l5.65,26.35a6,6,0,0,0,4.61,4.61l26.35,5.65a6,6,0,0,0,5.33-1.45L216.49,82.8A58.06,58.06,0,0,1,160,154Z"></path></svg><h3 class="cr-d3">Drtíme u vás</h3><p>Beton, cihly, asfalt i kámen zpracujeme rovnou na stavbě.</p></article><article class="cr-tile"><svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><path d="M112.6,158.43a58,58,0,1,0-57.2,0A93.83,93.83,0,0,0,5.21,196.72a6,6,0,0,0,10.05,6.56,82,82,0,0,1,137.48,0,6,6,0,0,0,10-6.56A93.83,93.83,0,0,0,112.6,158.43ZM38,108a46,46,0,1,1,46,46A46.06,46.06,0,0,1,38,108Zm211,97a6,6,0,0,1-8.3-1.74A81.8,81.8,0,0,0,172,166a6,6,0,0,1,0-12,46,46,0,1,0-17.08-88.73,6,6,0,1,1-4.46-11.14,58,58,0,0,1,50.14,104.3,93.83,93.83,0,0,1,50.19,38.29A6,6,0,0,1,249,205Z"></path></svg><h3 class="cr-d3">Strojník v ceně</h3><p>S drtičem přijede vyškolený strojník, vy řešíte jen nakládku.</p></article><article class="cr-tile"><svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><path d="M253.57,117.78l-14-35a13.93,13.93,0,0,0-13-8.8H190V64a6,6,0,0,0-6-6H32A14,14,0,0,0,18,72V184a14,14,0,0,0,14,14H50.6a30,30,0,0,0,58.8,0h53.2a30,30,0,0,0,58.8,0H240a14,14,0,0,0,14-14V120A6,6,0,0,0,253.57,117.78ZM190,86h36.58a2,2,0,0,1,1.86,1.26L239.14,114H190ZM30,72a2,2,0,0,1,2-2H178v68H30ZM80,210a18,18,0,1,1,18-18A18,18,0,0,1,80,210Zm82.6-24H109.4a30,30,0,0,0-58.8,0H32a2,2,0,0,1-2-2V150H178v15.48A30.1,30.1,0,0,0,162.6,186ZM192,210a18,18,0,1,1,18-18A18,18,0,0,1,192,210Zm50-26a2,2,0,0,1-2,2H221.4A30.05,30.05,0,0,0,192,162c-.67,0-1.34,0-2,.07V126h52Z"></path></svg><h3 class="cr-d3">Nafta v ceně</h3><p>Naftu vozíme každý den, spotřebu ani tankování neřešíte.</p></article><article class="cr-tile"><svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><path d="M222,48V96a6,6,0,0,1-6,6H168a6,6,0,0,1,0-12h33.52L183.47,72a81.51,81.51,0,0,0-57.53-24h-.46A81.5,81.5,0,0,0,68.19,71.28a6,6,0,1,1-8.38-8.58,93.38,93.38,0,0,1,65.67-26.76H126a93.45,93.45,0,0,1,66,27.53l18,18V48a6,6,0,0,1,12,0ZM187.81,184.72a81.5,81.5,0,0,1-57.29,23.34h-.46a81.51,81.51,0,0,1-57.53-24L54.48,166H88a6,6,0,0,0,0-12H40a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V174.48l18,18.05a93.45,93.45,0,0,0,66,27.53h.52a93.38,93.38,0,0,0,65.67-26.76,6,6,0,1,0-8.38-8.58Z"></path></svg><h3 class="cr-d3">Recyklát je váš</h3><p>Použijete ho na násypy a podklady, nebo ho prodáte dál.</p></article></div>
Řádky s šipkou
Vlevo nadpis, vpravo seznam odkazů oddělených linkou. Při najetí se nadpis podtrhne oranžově, šipka stojí.
HTML kód
<div class="cr-rows"><header><p class="cr-kick">Pro koho</p><h2 class="cr-d2" style="margin-top:12px">Komu drtíme nejčastěji</h2></header><div class="cr-rows__list"><a class="cr-row" href="#"><div><h3 class="cr-d3">Stavební firmy</h3><p>Demolice a rekonstrukce</p></div><svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><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"></path></svg></a><a class="cr-row" href="#"><div><h3 class="cr-d3">Obce a města</h3><p>Cesty, sběrné dvory a úklid po stavbě</p></div><svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><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"></path></svg></a><a class="cr-row" href="#"><div><h3 class="cr-d3">Soukromí stavebníci</h3><p>Bourání u domu a terénní úpravy</p></div><svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><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"></path></svg></a></div></div>
Trojice ploch
Tři karty vedle sebe vždy v pořadí oranžová, inkoustová, šedá. Celá karta je odkaz, při najetí se podtrhne Více.
HTML kód
<div class="cr-trio"><a class="cr-card cr-card--orange" href="#"><p class="cr-kick">Suť</p><h3 class="cr-d3">Stavební suť</h3><p>Cihly, tašky a smíšená suť z demolic. Recyklát jde rovnou do násypů a podkladních vrstev.</p><span class="cr-card__more"><span>Více</span><svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><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"></path></svg></span></a><a class="cr-card cr-card--ink" href="#"><p class="cr-kick">Beton</p><h3 class="cr-d3">Beton a železobeton</h3><p>Panely, základy i silně armovaný beton. Magnetický separátor oddělí železo, takže nic předem nečistíte.</p><span class="cr-card__more"><span>Více</span><svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><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"></path></svg></span></a><a class="cr-card cr-card--grey" href="#"><p class="cr-kick">Asfalt</p><h3 class="cr-d3">Vybouraný asfalt</h3><p>Lámanou i frézovanou živici podrtíme na frakci, kterou použijete do nových podkladů.</p><span class="cr-card__more"><span>Více</span><svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><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"></path></svg></span></a></div>
Ceny
Stejná trojice ploch s velkou cenou v úzkém písmu a jednotkou ve verzálkách.
HTML kód
<div class="cr-trio"><article class="cr-card cr-card--orange"><p class="cr-kick">Pronájem drtiče</p><h3 class="cr-d3">S obsluhou</h3><p class="cr-price">5 200 Kč</p><p class="cr-price__unit">Za hodinu, bez DPH</p><p>Strojník a nafta jsou v ceně. U delšího pronájmu cenu snížíme.</p></article><article class="cr-card cr-card--ink"><p class="cr-kick">Doprava</p><h3 class="cr-d3">Do 120 km</h3><p class="cr-price">48 Kč</p><p class="cr-price__unit">Za kilometr tam i zpět, bez DPH</p><p>Stroj dovezeme vlastním nákladním autem.</p></article><article class="cr-card cr-card--grey"><p class="cr-kick">Delší akce</p><h3 class="cr-d3">Na míru</h3><p class="cr-price">Dohodou</p><p class="cr-price__unit">Víkend, týden i celá stavba</p><p>Čím delší pronájem, tím nižší hodinová cena.</p></article></div>
Ceník po položkách
Větší plocha pro hlavní cenu a menší pro dopravu, vedle sebe v poměru 3:2.
HTML kód
<div class="cr-rates"><article class="cr-rate cr-card--orange"><p class="cr-kick">Pronájem drtiče</p><h2 class="cr-d2">S obsluhou</h2><p class="cr-rate__value">5 200 <small>Kč</small></p><p class="cr-rate__unit">Za hodinu práce, bez DPH</p><div class="cr-rate__more"><h3 class="cr-d3">V ceně máte</h3><ul class="cr-checks"><li><svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span>Vyškoleného strojníka</span></li><li><svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span>Naftu po celou dobu práce</span></li><li><svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span>Magnetický separátor</span></li><li><svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span>Nastavení výstupní frakce</span></li></ul></div></article><article class="cr-rate cr-card--grey"><p class="cr-kick">Doprava</p><h2 class="cr-d2">Do 120 km</h2><p class="cr-rate__value">48 <small>Kč</small></p><p class="cr-rate__unit">Za kilometr tam i zpět, bez DPH</p><div class="cr-rate__more"><p>Stroj dovezeme vlastním nákladním autem. Nakládací stroj zajišťuje zákazník.</p></div></article></div>
Obsah
Počítadla
Čtyři čísla s oranžovou svislou linkou 4 px. Jednotka je menší a oranžová.
HTML kód
<div class="cr-stats"><div class="cr-stat"><b>24<em>h</em></b><span>Ozveme se do</span></div><div class="cr-stat"><b>2,4<em>m</em></b><span>Šířka při převozu</span></div><div class="cr-stat"><b>120<em>km</em></b><span>Dojezd od Olomouce</span></div><div class="cr-stat"><b>7<em>dní</em></b><span>V týdnu, i o víkendech</span></div></div>
Kroky
Čtyři kroky s velkým oranžovým číslem, nadpisem a větou.
HTML kód
<div class="cr-steps"><article class="cr-step"><b>01</b><h3 class="cr-d3">Zavoláte</h3><p>Řeknete nám, kdy, kde a co budete drtit. Odpovíme do 24 hodin.</p></article><article class="cr-step"><b>02</b><h3 class="cr-d3">Nabídka</h3><p>Spočítáme cenu včetně dopravy a obsluhy, bez skrytých poplatků.</p></article><article class="cr-step"><b>03</b><h3 class="cr-d3">Přivezeme</h3><p>V domluvený den přijedeme a za pár minut je stroj připravený.</p></article><article class="cr-step"><b>04</b><h3 class="cr-d3">Podrtíme</h3><p>Zpracujeme materiál a stroj odvezeme. Recyklát zůstane vám.</p></article></div>
Mozaika
Fotky a dvě textové plochy v mřížce se spárou 6 px. Fotky se při najetí nepřibližují.
HTML kód
<section class="cr-mosaic"><div class="cr-cover mat-bloky cr-mosaic__wide cr-mosaic__tall"></div><div class="cr-mosaic__note cr-mosaic__note--orange cr-mosaic__wide"><h2 class="cr-d3">Stroj v akci</h2><p>Jak drcení přímo na stavbě vypadá.</p></div><div class="cr-cover mat-ocel"></div><div class="cr-cover mat-sterk"></div><div class="cr-cover mat-beton cr-mosaic__wide"></div><div class="cr-mosaic__note cr-mosaic__note--ink cr-mosaic__wide"><b>Obsluha v ceně</b><p>Strojník i nafta jsou v ceně. Nakládací stroj zajišťuje zákazník.</p></div></section>
Časté dotazy
Inkoustový pás. Otevřená odpověď je celá oranžová a otevřená je vždy jen jedna. Plus se změní na minus.
HTML kód
<section class="cr-faq"><div class="cr-wrap"><p class="cr-kick">Časté dotazy</p><h2 class="cr-d2">Na co se ptáte nejčastěji</h2><div class="cr-faq__list"><details name="faq-vzorek" open=""><summary>Podrtí stroj i železobeton?<span aria-hidden="true" class="cr-faq__x"></span></summary><p class="cr-faq__a">Ano. Magnetický separátor oddělí železo, takže armaturu předem neřešíte.</p></details><details name="faq-vzorek"><summary>Vejde se drtič na menší stavbu?<span aria-hidden="true" class="cr-faq__x"></span></summary><p class="cr-faq__a">Při převozu má šířku 2,4 metru a na stavbě se pohybuje po vlastních pásech. Stačí mu běžná příjezdová cesta.</p></details><details name="faq-vzorek"><summary>Kolik tím ušetřím?<span aria-hidden="true" class="cr-faq__x"></span></summary><p class="cr-faq__a">Záleží na množství a vzdálenosti skládky. Pošlete nám objem a místo, spočítáme to s vámi.</p></details><details name="faq-vzorek"><summary>Jak velké kusy stroj zvládne?<span aria-hidden="true" class="cr-faq__x"></span></summary><p class="cr-faq__a">Běžné kusy z demolice podrtí bez přípravy. Velké panely je potřeba předem rozlámat bagrem.</p></details><details name="faq-vzorek"><summary>Můžu si drtič pronajmout jen na víkend?<span aria-hidden="true" class="cr-faq__x"></span></summary><p class="cr-faq__a">Ano, jezdíme i o víkendech. Stačí se domluvit aspoň několik dní předem.</p></details><details name="faq-vzorek"><summary>Kdy se drcení nevyplatí?<span aria-hidden="true" class="cr-faq__x"></span></summary><p class="cr-faq__a">U malých objemů pod zhruba padesát tun bývá levnější odvoz. Řekneme vám to rovnou po telefonu.</p></details></div></div></section>
Tabulka parametrů
Název vlevo, hodnota tučně vpravo. První řádek má oranžovou linku 3 px, ostatní jemnou.
HTML kód
<table class="cr-table"><tbody><tr><th scope="row">Typ</th><td>Dvouhřídelový pomaloběžný drtič</td></tr><tr><th scope="row">Výkon</th><td>Až 120 tun za hodinu</td></tr><tr><th scope="row">Podvozek</th><td>Pásový, rádiové ovládání</td></tr><tr><th scope="row">Šířka při převozu</th><td>2,4 m</td></tr><tr><th scope="row">Hmotnost</th><td>24 tun</td></tr><tr><th scope="row">Výstupní frakce</th><td>0 až 150 mm podle nastavení</td></tr></tbody></table>
Text
Souvislý text do 760 px. Odrážky jsou oranžové čárky.
HTML kód
<div class="cr-prose"><h2 class="cr-d3">Jaké údaje zpracováváme</h2><p>Jméno, e-mail, telefon a místo stavby, které nám pošlete v poptávce.</p><h2 class="cr-d3">Proč je zpracováváme</h2><ul><li>Abychom odpověděli na vaši poptávku</li><li>Abychom vystavili doklady a splnili povinnosti ze zákona</li></ul><h2 class="cr-d3">Kde se ptát</h2><p>Dotazy posílejte na <a href="#">info@crusher.example</a>. Odpovídáme do pěti pracovních dnů.</p></div>
Výzvy a formuláře
Formulář
Pole mají rámeček 3 px, ostré rohy a popisek ve verzálkách nad polem, text uvnitř pole se nepoužívá. Jméno se jmenuje Jméno a příjmení (firma). E-mail, telefon, místo a souhlas jsou povinné. Výběry se rozbalují přilepené k poli. Chyba je bílý text na tmavě červené pod polem, ukáže se po opuštění pole a pak průběžně. Odeslání skočí na první chybné pole a po něm se formulář vymění za poděkování.
HTML kód
<div class="cr-pane--orange" style="padding:32px"><form class="cr-form" data-cr-form="" novalidate=""><div class="cr-field cr-form__full"><label for="cr-jmeno">Jméno a příjmení (firma)</label><input aria-describedby="cr-jmeno-err" autocomplete="name" class="cr-input" data-msg="Vyplňte jméno a příjmení." id="cr-jmeno" maxlength="200" name="jmeno" required="" type="text"/><p class="cr-field__err" hidden="" id="cr-jmeno-err"></p></div><div class="cr-field"><label for="cr-email">E-mail</label><input aria-describedby="cr-email-err" autocomplete="email" class="cr-input" data-msg="Vyplňte e-mail." data-msg-format="Zadejte e-mail ve tvaru jmeno@domena.cz." id="cr-email" maxlength="200" name="email" required="" type="email"/><p class="cr-field__err" hidden="" id="cr-email-err"></p></div><div class="cr-field"><label for="cr-telefon">Telefon</label><input aria-describedby="cr-telefon-err" autocomplete="tel" class="cr-input" data-msg="Vyplňte telefon." data-msg-format="Zadejte telefon, např. 123 456 789 nebo +420 123 456 789." id="cr-telefon" maxlength="200" name="telefon" required="" type="tel"/><p class="cr-field__err" hidden="" id="cr-telefon-err"></p></div><div class="cr-field cr-form__full"><label for="cr-misto">Místo stavby</label><input aria-describedby="cr-misto-err" autocomplete="address-level2" class="cr-input" data-msg="Vyplňte místo stavby." id="cr-misto" maxlength="200" name="misto" required="" type="text"/><p class="cr-field__err" hidden="" id="cr-misto-err"></p></div><div class="cr-field"><span class="cr-field__label" id="cr-material">Co potřebujete podrtit</span><details class="cr-ms"><summary aria-describedby="cr-material">- vyberte -</summary><div aria-labelledby="cr-material" class="cr-ms__list" role="group"><div class="cr-ms__group"><label><input name="material[]" type="checkbox" value="Stavební suť"/>Stavební suť</label><label><input name="material[]" type="checkbox" value="Beton a železobeton"/>Beton a železobeton</label><label><input name="material[]" type="checkbox" value="Vybouraný asfalt"/>Vybouraný asfalt</label></div><div class="cr-ms__group"><label><input name="material[]" 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="cr-field"><span class="cr-field__label" id="cr-mnozstvi">Přibližné množství</span><details class="cr-ms"><summary aria-describedby="cr-mnozstvi">- vyberte -</summary><div aria-labelledby="cr-mnozstvi" class="cr-ms__list" role="group"><div class="cr-ms__group"><label><input name="mnozstvi" type="radio" value="Do 50 tun"/>Do 50 tun</label><label><input name="mnozstvi" type="radio" value="50 až 200 tun"/>50 až 200 tun</label><label><input name="mnozstvi" type="radio" value="200 až 1 000 tun"/>200 až 1 000 tun</label><label><input name="mnozstvi" type="radio" value="Přes 1 000 tun"/>Přes 1 000 tun</label><label><input name="mnozstvi" type="radio" value="Zatím nevím"/>Zatím nevím</label></div></div></details></div><div class="cr-field cr-form__full"><label for="cr-zprava">Zpráva</label><textarea class="cr-input" id="cr-zprava" maxlength="5000" name="zprava" rows="5"></textarea></div><div class="cr-field cr-consent cr-form__full"><input aria-describedby="cr-souhlas-err" data-msg="Potvrďte prosím souhlas se zpracováním osobních údajů." id="cr-souhlas" name="souhlas" required="" type="checkbox" value="1"/><label for="cr-souhlas">Souhlasím se zpracováním <a href="#">osobních údajů</a> za účelem odpovědi na moji poptávku.</label><p class="cr-field__err" hidden="" id="cr-souhlas-err"></p></div><div aria-hidden="true" class="cr-form__hp"><label for="cr-web">Web</label><input autocomplete="off" id="cr-web" name="web" tabindex="-1" type="text"/></div><input name="kontrola" type="hidden" value=""/><p class="cr-form__error cr-form__full" 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="cr-form__full"><button class="cr-btn cr-btn--ink" type="submit">Odeslat poptávku<svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><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"></path></svg></button></div></form><div class="cr-form__ok" hidden="" tabindex="-1"><h3 class="cr-d3">Děkujeme, poptávku jsme dostali.</h3><p>Ozveme se do 24 hodin a spočítáme cenu včetně dopravy. V ukázce se nic neodesílá.</p><p>Spěcháte? Volejte <a href="#">+420 123 456 789</a>.</p></div></div>
Poptávka vedle fotky
Hlavní blok konce úvodní stránky a stránky Kontakt: fotka a oranžová polovina s formulářem.
HTML kód
<section class="cr-split" id="poptavka"><div class="cr-split__img cr-cover mat-bloky"></div><div class="cr-pane cr-pane--orange"><div class="cr-pane__in"><p class="cr-kick">Nezávazná poptávka</p><h2 class="cr-d2">Ozveme se do 24 hodin</h2><p class="cr-lede">Napište, co a kde potřebujete podrtit. Spočítáme cenu včetně dopravy.</p><form class="cr-form" data-cr-form="" novalidate=""><div class="cr-field cr-form__full"><label for="cr-jmeno">Jméno a příjmení (firma)</label><input aria-describedby="cr-jmeno-err" autocomplete="name" class="cr-input" data-msg="Vyplňte jméno a příjmení." id="cr-jmeno" maxlength="200" name="jmeno" required="" type="text"/><p class="cr-field__err" hidden="" id="cr-jmeno-err"></p></div><div class="cr-field"><label for="cr-email">E-mail</label><input aria-describedby="cr-email-err" autocomplete="email" class="cr-input" data-msg="Vyplňte e-mail." data-msg-format="Zadejte e-mail ve tvaru jmeno@domena.cz." id="cr-email" maxlength="200" name="email" required="" type="email"/><p class="cr-field__err" hidden="" id="cr-email-err"></p></div><div class="cr-field"><label for="cr-telefon">Telefon</label><input aria-describedby="cr-telefon-err" autocomplete="tel" class="cr-input" data-msg="Vyplňte telefon." data-msg-format="Zadejte telefon, např. 123 456 789 nebo +420 123 456 789." id="cr-telefon" maxlength="200" name="telefon" required="" type="tel"/><p class="cr-field__err" hidden="" id="cr-telefon-err"></p></div><div class="cr-field cr-form__full"><label for="cr-misto">Místo stavby</label><input aria-describedby="cr-misto-err" autocomplete="address-level2" class="cr-input" data-msg="Vyplňte místo stavby." id="cr-misto" maxlength="200" name="misto" required="" type="text"/><p class="cr-field__err" hidden="" id="cr-misto-err"></p></div><div class="cr-field"><span class="cr-field__label" id="cr-material">Co potřebujete podrtit</span><details class="cr-ms"><summary aria-describedby="cr-material">- vyberte -</summary><div aria-labelledby="cr-material" class="cr-ms__list" role="group"><div class="cr-ms__group"><label><input name="material[]" type="checkbox" value="Stavební suť"/>Stavební suť</label><label><input name="material[]" type="checkbox" value="Beton a železobeton"/>Beton a železobeton</label><label><input name="material[]" type="checkbox" value="Vybouraný asfalt"/>Vybouraný asfalt</label></div><div class="cr-ms__group"><label><input name="material[]" 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="cr-field"><span class="cr-field__label" id="cr-mnozstvi">Přibližné množství</span><details class="cr-ms"><summary aria-describedby="cr-mnozstvi">- vyberte -</summary><div aria-labelledby="cr-mnozstvi" class="cr-ms__list" role="group"><div class="cr-ms__group"><label><input name="mnozstvi" type="radio" value="Do 50 tun"/>Do 50 tun</label><label><input name="mnozstvi" type="radio" value="50 až 200 tun"/>50 až 200 tun</label><label><input name="mnozstvi" type="radio" value="200 až 1 000 tun"/>200 až 1 000 tun</label><label><input name="mnozstvi" type="radio" value="Přes 1 000 tun"/>Přes 1 000 tun</label><label><input name="mnozstvi" type="radio" value="Zatím nevím"/>Zatím nevím</label></div></div></details></div><div class="cr-field cr-form__full"><label for="cr-zprava">Zpráva</label><textarea class="cr-input" id="cr-zprava" maxlength="5000" name="zprava" rows="5"></textarea></div><div class="cr-field cr-consent cr-form__full"><input aria-describedby="cr-souhlas-err" data-msg="Potvrďte prosím souhlas se zpracováním osobních údajů." id="cr-souhlas" name="souhlas" required="" type="checkbox" value="1"/><label for="cr-souhlas">Souhlasím se zpracováním <a href="#">osobních údajů</a> za účelem odpovědi na moji poptávku.</label><p class="cr-field__err" hidden="" id="cr-souhlas-err"></p></div><div aria-hidden="true" class="cr-form__hp"><label for="cr-web">Web</label><input autocomplete="off" id="cr-web" name="web" tabindex="-1" type="text"/></div><input name="kontrola" type="hidden" value=""/><p class="cr-form__error cr-form__full" 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="cr-form__full"><button class="cr-btn cr-btn--ink" type="submit">Odeslat poptávku<svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><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"></path></svg></button></div></form><div class="cr-form__ok" hidden="" tabindex="-1"><h3 class="cr-d3">Děkujeme, poptávku jsme dostali.</h3><p>Ozveme se do 24 hodin a spočítáme cenu včetně dopravy. V ukázce se nic neodesílá.</p><p>Spěcháte? Volejte <a href="#">+420 123 456 789</a>.</p></div></div></div></section>
Stránka nenalezena
Ikona, číslo 404, věta a jedno obrysové tlačítko zpět.
HTML kód
<section class="cr-wrap cr-lost"><svg aria-hidden="true" class="cr-icon" viewbox="0 0 256 256"><path d="M128,28A100,100,0,1,0,228,128,100.11,100.11,0,0,0,128,28Zm0,192a92,92,0,1,1,92-92A92.1,92.1,0,0,1,128,220Zm-4-84V80a4,4,0,0,1,8,0v56a4,4,0,0,1-8,0Zm12,36a8,8,0,1,1-8-8A8,8,0,0,1,136,172Z"></path></svg><p class="cr-num">404</p><h1 class="cr-d2">Tady není co drtit</h1><p class="cr-lede cr-muted">Stránka, kterou hledáte, tu není.</p><a class="cr-btn cr-btn--ghost" href="#">Zpět na úvod</a></section>