Svěží systém pro potraviny a čistou techniku. Tmavá plocha a jedna výrazná limetková, tučné písmo s těsným prostrkáním a měkké rohy.
Výchozí je světlé téma. Tmavé přepnete v liště nahoře.
Pravidla
Limetka je jediná výrazná barva. Text na ní je vždy inkoustový, nikdy bílý.
Na bílé limetka nedrží kontrast, proto čísla a ikony mají mark. Jako plochu ji používejte bez omezení.
Hlavní nadpisy končí tečkou v akcentní barvě.
Rádius je 6 px, plně kulaté jsou jen štítky, kruh tlačítka a kruhy s ikonou.
Stín mají jen bílé karty s číslem a karta formuláře.
Velké bledé slovo a běžící pás jsou ozdoba, na stránce je jich nejvýš pár.
Písmo: Plus Jakarta Sans, nadpisy řez 800, text řez 500.
Telefon se píše ve tvaru +420 123 456 789.
Pohyb a stavy
Obsah se při posouvání neanimuje. Při najetí se roztáhne kruh tlačítka, šipka se nehýbe a fotky se nepřibližují.
Navigace po odjetí zbělá. Běžící pás se při najetí zastaví a při omezeném pohybu stojí.
Rámečky zaměření se nepoužívají, při ovládání klávesnicí se odkazy podtrhnou.
Obrázky a ukázka
Fotky v ukázce nahrazují generované textury listů, mlhy, plodů a ledu ze souboru zdroje/src/fresh/textury.py. Ikony jsou ze sady Phosphor (MIT), písmo z Google Fonts.
Firma Fresh je smyšlená, ukázkové údaje, produkty a čísla taky.
Barvy
Hlavní barvy
lime-400#96eb64Hlavní plocha úvodu, kruh tlačítka, štítek a běžící pás. Text na ní je vždy ink-900.
green-700#2f7d10Čísla a ikony na bílé, kde limetka nedrží kontrast.
Neutrální
ink-900#191919Nadpisy, navigace a tmavé pásy.
ink-800#222222Plocha o stupeň světlejší na tmavém pásu.
slate-500#575a7bBěžný text na světlé ploše. Nádech do fialova je záměrný.
mist-100#f3f4f6Klidná plocha a aktivní řádek.
ghost-100#eef0f4Velká bledá slova na pozadí.
white#ffffffPodklad stránky a text na tmavém.
Barvy podle použití (světlé, tmavé)
surface-page#ffffff / #191919Podklad stránky.
surface-soft#f3f4f6 / #222222Klidná plocha.
surface-card#ffffff / #222222Karta se stínem.
surface-ghost#eef0f4 / #262626Velká bledá slova.
text-primary#191919 / #ffffffNadpisy.
text-body#575a7b / #c3c5d3Běžný text.
line#19191926 / #ffffff26Dělicí linky.
line-control#19191985 / #ffffff85Rámeček polí a kruhů, drží 3:1.
mark#2f7d10 / #96eb64Čísla řádků, ikony a fajfky na stránce.
accent#96eb64 / #96eb64Kruh tlačítka a výplně, stejná v obou tématech.
on-accent#191919 / #191919Text a ikona na limetkové.
danger#b3261e / #ff9c94Text 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.
space-32
32px
Odstup velkých prvků.
space-48
48px
Nadpis sekce a obsah.
gutter
clamp(16px,2.6vw,48px)
Boční okraj stránky.
section
clamp(64px,8vw,120px)
Odsazení sekce.
wrap
1320px
Šířka obsahu.
nav-height
76px
Výška navigace.
Rádiusy
Název
Hodnota
Ukázka
Použití
radius-6
6px
Karty, fotky a pole.
radius-full
999px
Štítky, kruh tlačítka a kruhy s ikonou.
Komponenty
Základy
Tlačítko s kruhem
Limetkový kruh 50 px se šipkou a text ve verzálkách vedle něj. Při najetí se kruh roztáhne pod celé tlačítko a šipka stojí. Na limetkové ploše je kruh inkoustový.
Vlevo štítek a nadpis, který končí tečkou v barvě mark. Vpravo nepovinný odstavec.
HTML kód
<header class="fr-head"><div class="fr-head__title"><span class="fr-tag">Využití</span><h2 class="fr-d2">Kde všude mlha pomáhá<span class="fr-dot">.</span></h2></div><p class="fr-lede">Stejná technologie funguje v obchodě, ve skladu i ve výrobě.</p></header>
Navigace
Navigace
Tmavá lišta přes celou šířku, odkazy uprostřed a tlačítko vpravo. Po odjetí o 40 px zbělá. Pod 1100 px se položky schovají do Menu.
Tmavý podklad, limetková karta s kruhem v rohu a vedle fotka. Štítek, nadpis s tečkou, věta a tlačítko. Pod úvodem je pruh se dvěma krátkými sděleními.
HTML kód
<section class="fr-hero"><div class="fr-hero__grid"><div class="fr-hero__card"><div class="fr-hero__meta"><span class="fr-tag fr-tag--ink">Proč Fresh</span><span>Až o 90 % méně energie</span></div><h1 class="fr-d1">Čerstvé zboží vydrží déle<span class="fr-dot">.</span></h1><p class="fr-hero__lead">Tichá ultrazvuková mlha drží kolem ovoce, zeleniny a ryb správnou vlhkost. Odepíšete méně zboží a vitríny zůstanou suché.</p><a class="fr-btn fr-btn--on-lime" href="#"><span class="fr-btn__ic"><svg aria-hidden="true" class="fr-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>Domluvit konzultaci</a></div><div class="fr-cover fr-hero__media mat-mlha"></div></div><div class="fr-hero__strip"><div><svg aria-hidden="true" class="fr-icon" viewbox="0 0 256 256"><path d="M208,44H48A12,12,0,0,0,36,56v56c0,51.16,24.73,82.12,45.47,99.1,22.4,18.32,44.55,24.5,45.48,24.76a4,4,0,0,0,2.1,0c.93-.26,23.08-6.44,45.48-24.76,20.74-17,45.47-47.94,45.47-99.1V56A12,12,0,0,0,208,44Zm4,68c0,38.44-14.23,69.63-42.29,92.71A132.45,132.45,0,0,1,128,227.82a132.23,132.23,0,0,1-41.71-23.11C58.23,181.63,44,150.44,44,112V56a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-41.17-10.83a4,4,0,0,1,0,5.66l-56,56a4,4,0,0,1-5.66,0l-24-24a4,4,0,0,1,5.66-5.66L112,154.34l53.17-53.17A4,4,0,0,1,170.83,101.17Z"></path></svg><div><b>Potravinářská nerezová ocel</b><small>Bez stojaté vody v nádržích</small></div></div><a href="#"><span>Až o 40 % méně odpisů</span><svg aria-hidden="true" class="fr-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></section>
Hlavička podstránky
Tmavý pás, vlevo štítek a nadpis, vpravo věta.
HTML kód
<section class="fr-pagehero"><div class="fr-wrap"><div class="fr-pagehero__title"><span class="fr-tag">Produkty</span><h1 class="fr-d1">Sady pro každou velikost provozu<span class="fr-dot">.</span></h1></div><p class="fr-lede">Vybíráme podle délky vitrín a typu zboží.</p></div></section>
Běžící pás
Limetkový pás s obrysovými verzálkami. Při najetí se zastaví, při omezeném pohybu stojí.
Limetková karta s kruhem v rohu, nadpis vlevo a tlačítko vpravo. Na konci stránky.
HTML kód
<section class="fr-cta"><div class="fr-cta__in"><div><h2 class="fr-d2">Chcete méně odepisovat<span class="fr-dot">?</span></h2><p>Přijedeme, změříme a spočítáme, kolik zboží vám mlha zachrání.</p></div><div class="fr-actions"><a class="fr-btn fr-btn--on-lime" href="#"><span class="fr-btn__ic"><svg aria-hidden="true" class="fr-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>Domluvit konzultaci</a></div></div></section>
Karty a řádky
Úvod s fotkami
Dvě fotky přes sebe vlevo. Vpravo štítek, nadpis, text, velké číslo oddělené linkou a odrážky.
HTML kód
<div class="fr-intro"><div class="fr-intro__media"><span class="fr-cover mat-plody"></span><span class="fr-cover mat-mlha"></span></div><div class="fr-intro__copy"><span class="fr-tag">Čerstvost</span><h2 class="fr-d2">Chráníme zboží, šetříme marži<span class="fr-dot">.</span></h2><p>Běžné mlžení stříká velké kapky, které odkapávají a dělají nepořádek. Ultrazvuková mlha je tak jemná, že se při dotyku odpaří a zboží zůstane svěží bez mokrých ploch.</p><div class="fr-intro__facts"><div class="fr-intro__num"><b>40</b>% méně<br/>odpisů</div><ul class="fr-checks"><li><svg aria-hidden="true" class="fr-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>Velikost kapky 5 až 40 mikronů</span></li><li><svg aria-hidden="true" class="fr-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>Vlhkost bez hromadění vody</span></li><li><svg aria-hidden="true" class="fr-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>Zboží si drží hmotnost a vzhled</span></li></ul></div><a class="fr-btn" href="#"><span class="fr-btn__ic"><svg aria-hidden="true" class="fr-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>Domluvit konzultaci</a></div></div>
Řádky s číslem
Číslo, velký nadpis ve verzálkách, text a kruh s fajfkou. Při najetí se kruh vyplní limetkovou.
HTML kód
<div class="fr-rows"><article class="fr-row"><span class="fr-row__no">01</span><h3 class="fr-d3">Déle čerstvé</h3><p>Zelenina, ovoce, ryby a maso zůstávají hydratované. Vystavit je můžete o dny déle, ne jen o hodiny.</p><span class="fr-row__ic"><svg aria-hidden="true" class="fr-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></article><article class="fr-row"><span class="fr-row__no">02</span><h3 class="fr-d3">Méně odpisů</h3><p>Zboží si drží hmotnost i vzhled, takže méně slevujete a méně vyhazujete. Systém se zaplatí z ušetřených odpisů.</p><span class="fr-row__ic"><svg aria-hidden="true" class="fr-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></article><article class="fr-row"><span class="fr-row__no">03</span><h3 class="fr-d3">Lepší vitrína</h3><p>Jemný opar přitáhne pozornost zákazníků k čerstvému zboží a vitrína vypadá jako z trhu.</p><span class="fr-row__ic"><svg aria-hidden="true" class="fr-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></article><article class="fr-row"><span class="fr-row__no">04</span><h3 class="fr-d3">Nízká spotřeba</h3><p>Jedna jednotka bere jen 2 až 3 watty a vejde se do stávajícího ostrůvku. Nádrž nemá, takže ji ani nečistíte.</p><span class="fr-row__ic"><svg aria-hidden="true" class="fr-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></article></div>
Tmavá mřížka
Buňky oddělené tenkými spárami na tmavém pásu, ikona 48 px v limetkové. Při najetí se buňka jemně zazelená.
HTML kód
<div class="fr-dark" style="padding:32px"><div class="fr-cells"><article class="fr-cell"><svg aria-hidden="true" class="fr-icon" viewbox="0 0 256 256"><path d="M221.76,69.66l-88-48.18a12,12,0,0,0-11.52,0l-88,48.18A12,12,0,0,0,28,80.18v95.64a12,12,0,0,0,6.24,10.52l88,48.18a11.95,11.95,0,0,0,11.52,0l88-48.18A12,12,0,0,0,228,175.82V80.18A12,12,0,0,0,221.76,69.66ZM126.08,28.5a3.94,3.94,0,0,1,3.84,0L216.67,76,178.5,96.89a4,4,0,0,0-.58-.4l-88-48.18Zm1.92,96L39.33,76,81.56,52.87l88.67,48.54Zm-89.92,54.8a4,4,0,0,1-2.08-3.5V83.29l88,48.16v94.91Zm179.84,0h0l-85.92,47V131.45l40-21.89V152a4,4,0,0,0,8,0V105.18l40-21.89v92.53A4,4,0,0,1,217.92,179.32Z"></path></svg><h3 class="fr-d4">Supermarkety</h3><p>Ovoce, zelenina, ryby i maso vydrží v prodejně celý den čerstvé a méně váží na odpisech.</p></article><article class="fr-cell"><svg aria-hidden="true" class="fr-icon" viewbox="0 0 256 256"><path d="M251.71,118.52l-14-35A12,12,0,0,0,226.58,76H188V64a4,4,0,0,0-4-4H32A12,12,0,0,0,20,72V184a12,12,0,0,0,12,12H52.29a28,28,0,0,0,55.42,0h56.58a28,28,0,0,0,55.42,0H240a12,12,0,0,0,12-12V120A4,4,0,0,0,251.71,118.52ZM188,84h38.58a4,4,0,0,1,3.72,2.51L242.09,116H188ZM28,72a4,4,0,0,1,4-4H180v72H28ZM80,212a20,20,0,1,1,20-20A20,20,0,0,1,80,212Zm84.29-24H107.71a28,28,0,0,0-55.42,0H32a4,4,0,0,1-4-4V148H180v18.71A28.05,28.05,0,0,0,164.29,188ZM192,212a20,20,0,1,1,20-20A20,20,0,0,1,192,212Zm52-28a4,4,0,0,1-4,4H219.71A28,28,0,0,0,188,164.29V124h56Z"></path></svg><h3 class="fr-d4">Velkoobchody</h3><p>Vlhkost hlídá palety v přípravnách a chladicích místnostech ještě před cestou do obchodu.</p></article><article class="fr-cell"><svg aria-hidden="true" class="fr-icon" viewbox="0 0 256 256"><path d="M219.45,40.31a4,4,0,0,0-3.76-3.76C141.06,32.16,81.46,54.39,56.24,96,39,124.56,39.9,158.37,58.8,191.54L37.17,213.17a4,4,0,0,0,5.66,5.66l21.63-21.64c17.39,9.91,35,14.89,51.83,14.89A83.43,83.43,0,0,0,160,199.76C201.61,174.54,223.84,114.93,219.45,40.31ZM155.82,192.92c-25.37,15.37-55.56,14.75-85.48-1.61l92.5-92.49a4,4,0,0,0-5.66-5.66l-92.49,92.5c-16.36-29.92-17-60.11-1.61-85.48C86.34,61.77,141.72,41,211.66,44.34,215,114.28,194.23,169.66,155.82,192.92Z"></path></svg><h3 class="fr-d4">Květinářství</h3><p>Řezané květiny nehnědnou a nevadnou, na okvětních lístcích nezůstávají skvrny.</p></article><article class="fr-cell"><svg aria-hidden="true" class="fr-icon" viewbox="0 0 256 256"><path d="M208,44H48A12,12,0,0,0,36,56v56c0,51.16,24.73,82.12,45.47,99.1,22.4,18.32,44.55,24.5,45.48,24.76a4,4,0,0,0,2.1,0c.93-.26,23.08-6.44,45.48-24.76,20.74-17,45.47-47.94,45.47-99.1V56A12,12,0,0,0,208,44Zm4,68c0,38.44-14.23,69.63-42.29,92.71A132.45,132.45,0,0,1,128,227.82a132.23,132.23,0,0,1-41.71-23.11C58.23,181.63,44,150.44,44,112V56a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-41.17-10.83a4,4,0,0,1,0,5.66l-56,56a4,4,0,0,1-5.66,0l-24-24a4,4,0,0,1,5.66-5.66L112,154.34l53.17-53.17A4,4,0,0,1,170.83,101.17Z"></path></svg><h3 class="fr-d4">Zdravotnictví</h3><p>Přesná vlhkost pro citlivý materiál, díly z nerezové oceli splňují hygienické nároky.</p></article><article class="fr-cell"><svg aria-hidden="true" class="fr-icon" viewbox="0 0 256 256"><path d="M223.05,70.5a4,4,0,0,0-6.42-1.44l-41.82,38.6L153,103l-4.68-21.79,38.6-41.82a4,4,0,0,0-1.44-6.43A68,68,0,0,0,98.94,126L36.4,180l-.21.2a28,28,0,0,0,39.6,39.6l.2-.21,54-62.54A68,68,0,0,0,228,96,67.51,67.51,0,0,0,223.05,70.5ZM160,156a60,60,0,0,1-29-7.47,4,4,0,0,0-5,.89L70,214.25A20,20,0,0,1,41.75,186l64.82-56a4,4,0,0,0,.89-5,60,60,0,0,1,69.46-86.59L141.05,77.29a4,4,0,0,0-1,3.55l5.66,26.35a4,4,0,0,0,3.07,3.07l26.35,5.66a4,4,0,0,0,3.55-1l38.87-35.87A60.05,60.05,0,0,1,160,156Z"></path></svg><h3 class="fr-d4">Zpracování potravin</h3><p>Jednotky se zapojí do výrobní linky a hlídají úbytek hmotnosti během balení.</p></article><article class="fr-cell"><svg aria-hidden="true" class="fr-icon" viewbox="0 0 256 256"><path d="M152,100H104a4,4,0,0,0-4,4v48a4,4,0,0,0,4,4h48a4,4,0,0,0,4-4V104A4,4,0,0,0,152,100Zm-4,48H108V108h40Zm84,0H212V108h20a4,4,0,0,0,0-8H212V56a12,12,0,0,0-12-12H156V24a4,4,0,0,0-8,0V44H108V24a4,4,0,0,0-8,0V44H56A12,12,0,0,0,44,56v44H24a4,4,0,0,0,0,8H44v40H24a4,4,0,0,0,0,8H44v44a12,12,0,0,0,12,12h44v20a4,4,0,0,0,8,0V212h40v20a4,4,0,0,0,8,0V212h44a12,12,0,0,0,12-12V156h20a4,4,0,0,0,0-8Zm-28,52a4,4,0,0,1-4,4H56a4,4,0,0,1-4-4V56a4,4,0,0,1,4-4H200a4,4,0,0,1,4,4Z"></path></svg><h3 class="fr-d4">Průmysl</h3><p>Mlha sráží prach ze vzduchu bez mokrých podlah a chrání lidi i stroje.</p></article></div></div>
Čísla ve fotkách
Mřížka fotek a karet s číslem. Jedna karta je limetková, ostatní bílé se stínem.
HTML kód
<div class="fr-bento"><div class="fr-cover mat-led"></div><article class="fr-stat"><p class="fr-stat__top">Velikost kapky</p><div><b>5 až 40<small>mikronů</small></b><p>Velikost nastavíme podle zboží, od 5 do 40 mikronů.</p></div></article><div class="fr-cover mat-plody fr-bento__tall"></div><article class="fr-stat"><p class="fr-stat__top">Spotřeba</p><div><b>2 až 3<small>watty</small></b><p>Jedna jednotka bere o 90 % méně než běžné zvlhčování.</p></div></article><article class="fr-stat fr-stat--lime"><p class="fr-stat__top">Životnost</p><div><b>12 000<small>hodin</small></b><p>Díly jsou stavěné na nepřetržitý provoz v obchodě.</p></div></article></div>
Výhody s fotkou
Fotka vlevo, vpravo seznam s ikonou. První položka má šedý podklad, ostatní ho dostanou při najetí.
HTML kód
<div class="fr-features"><div class="fr-cover fr-features__media mat-mlha"></div><div class="fr-features__copy"><span class="fr-tag">Proč Fresh</span><h2 class="fr-d2">Co u nás oceníte<span class="fr-dot">.</span></h2><div class="fr-features__list"><article class="fr-feature"><svg aria-hidden="true" class="fr-icon" viewbox="0 0 256 256"><path d="M222.72,67.91l-88-48.18a13.9,13.9,0,0,0-13.44,0l-88,48.18A14,14,0,0,0,26,80.18v95.64a14,14,0,0,0,7.28,12.27l88,48.18a13.92,13.92,0,0,0,13.44,0l88-48.18A14,14,0,0,0,230,175.82V80.18A14,14,0,0,0,222.72,67.91ZM127,30.25a2,2,0,0,1,1.92,0L212.51,76,178.57,94.57,94.05,48.31ZM122,223,39,177.57a2,2,0,0,1-1-1.75V86.66l84,46ZM43.49,76,81.56,55.15l84.51,46.26L128,122.24ZM218,175.82a2,2,0,0,1-1,1.75h0L134,223V132.64l36-19.71V152a6,6,0,0,0,12,0V106.37l36-19.71Z"></path></svg><h3 class="fr-d4">01. Žádná stojatá voda</h3><p>Voda protéká průběžně, nestojí v nádrži a bakterie nemají kde růst. Odpadá pravidelné čištění.</p></article><article class="fr-feature"><svg aria-hidden="true" class="fr-icon" viewbox="0 0 256 256"><path d="M208,42H48A14,14,0,0,0,34,56v56c0,51.94,25.12,83.4,46.2,100.64,22.73,18.6,45.27,24.89,46.22,25.15a6,6,0,0,0,3.16,0c.95-.26,23.49-6.55,46.22-25.15C196.88,195.4,222,163.94,222,112V56A14,14,0,0,0,208,42Zm2,70c0,37.76-13.94,68.39-41.44,91.06A131.17,131.17,0,0,1,128,225.72a130.94,130.94,0,0,1-40.56-22.66C59.94,180.39,46,149.76,46,112V56a2,2,0,0,1,2-2H208a2,2,0,0,1,2,2ZM172.24,99.76a6,6,0,0,1,0,8.48l-56,56a6,6,0,0,1-8.48,0l-24-24a6,6,0,0,1,8.48-8.48L112,151.51l51.76-51.75A6,6,0,0,1,172.24,99.76Z"></path></svg><h3 class="fr-d4">02. Potravinářské materiály</h3><p>Nerezová ocel a farmaceutický silikon splňují hygienické nároky prodeje potravin.</p></article><article class="fr-feature"><svg aria-hidden="true" class="fr-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="fr-d4">03. Snadná montáž</h3><p>Jednotky se vejdou do stávajících vitrín, chladicích boxů i prodejních ostrůvků.</p></article></div></div></div>
Produkty
Fotka, název, věta a parametry v šedých pilulkách. Při najetí se podtrhne název.
HTML kód
<div class="fr-products"><a class="fr-product" href="#"><span class="fr-cover mat-listy"></span><h3 class="fr-d4">Fresh Mini</h3><p>Jedna vitrína nebo ostrůvek do 3 metrů.</p><div class="fr-product__meta"><small>2 trysky</small><small>3 W</small></div></a><a class="fr-product" href="#"><span class="fr-cover mat-mlha"></span><h3 class="fr-d4">Fresh Linka</h3><p>Celá řada vitrín v zelenině a rybách.</p><div class="fr-product__meta"><small>6 trysek</small><small>9 W</small></div></a><a class="fr-product" href="#"><span class="fr-cover mat-plody"></span><h3 class="fr-d4">Fresh Sklad</h3><p>Přípravny a chladicí místnosti velkoobchodů.</p><div class="fr-product__meta"><small>12 trysek</small><small>18 W</small></div></a></div>
Obsah
Kroky
Čtyři šedé karty s číslem v limetkovém kruhu.
HTML kód
<div class="fr-steps"><article class="fr-step"><b>1</b><h3 class="fr-d4">Prohlídka</h3><p>Přijedeme do prodejny a změříme vitríny i rozvody.</p></article><article class="fr-step"><b>2</b><h3 class="fr-d4">Návrh</h3><p>Spočítáme počet trysek a ukážeme, kolik odpisů ušetříte.</p></article><article class="fr-step"><b>3</b><h3 class="fr-d4">Montáž</h3><p>Instalaci stihneme mimo otevírací dobu, provoz nezastavíte.</p></article><article class="fr-step"><b>4</b><h3 class="fr-d4">Provoz</h3><p>Vlhkost hlídá řídicí jednotka a upozorní na odchylku.</p></article></div>
Časté dotazy
Vlevo nadpis, vpravo otázky oddělené linkou. Plus v kruhu se při otevření otočí na křížek a vyplní limetkovou. Otevřená je vždy jen jedna.
HTML kód
<div class="fr-split"><div class="fr-head__title"><span class="fr-tag">Dotazy</span><h2 class="fr-d2">Na co se ptáte<span class="fr-dot">.</span></h2></div><div class="fr-faq"><details name="faq-vzorek" open=""><summary>Nenamočí mlha zboží?<span class="fr-faq__ic"><svg aria-hidden="true" class="fr-icon" viewbox="0 0 256 256"><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"></path></svg></span></summary><p class="fr-faq__a">Ne. Kapky jsou tak malé, že se při dotyku odpaří. Vitrína i zboží zůstanou suché.</p></details><details name="faq-vzorek"><summary>Jak moc se dá ušetřit?<span class="fr-faq__ic"><svg aria-hidden="true" class="fr-icon" viewbox="0 0 256 256"><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"></path></svg></span></summary><p class="fr-faq__a">V prodejnách s vysokou obměnou klesají odpisy až o 40 %. Přesné číslo spočítáme podle vašeho zboží.</p></details><details name="faq-vzorek"><summary>Musíme měnit vitríny?<span class="fr-faq__ic"><svg aria-hidden="true" class="fr-icon" viewbox="0 0 256 256"><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"></path></svg></span></summary><p class="fr-faq__a">Nemusíte. Jednotky se vejdou do stávajících ostrůvků a chladicích boxů.</p></details><details name="faq-vzorek"><summary>Jak se systém čistí?<span class="fr-faq__ic"><svg aria-hidden="true" class="fr-icon" viewbox="0 0 256 256"><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"></path></svg></span></summary><p class="fr-faq__a">Voda protéká průběžně, takže odpadá čištění nádrží. Servis trysek děláme jednou ročně.</p></details></div></div>
Text
Souvislý text do 760 px, odrážky jsou limetkové tečky.
HTML kód
<div class="fr-prose"><h2 class="fr-d3">Jaké údaje zpracováváme</h2><p>Jméno, e-mail, telefon a údaje o provozu, které nám pošlete v poptávce.</p><h2 class="fr-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="fr-d3">Kde se ptát</h2><p>Dotazy posílejte na <a href="#">info@fresh.example</a>. Odpovídáme do pěti pracovních dnů.</p></div>
Výzvy a formuláře
Formulář
Popisek je vždy nad polem, text uvnitř pole se nepoužívá. Jméno se jmenuje Jméno a příjmení (firma). E-mail, telefon a souhlas jsou povinné. Výběry se rozbalují přilepené k poli, zaškrtnutí je limetkové. Chyba se ukáže pod polem po jeho opuštění 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="fr-formcard" style="margin:24px"><form class="fr-form" data-fr-form="" novalidate=""><div class="fr-field fr-form__full"><label for="fr-jmeno">Jméno a příjmení (firma)</label><input aria-describedby="fr-jmeno-err" autocomplete="name" class="fr-input" data-msg="Vyplňte jméno a příjmení." id="fr-jmeno" maxlength="200" name="jmeno" required="" type="text"/><p class="fr-field__err" hidden="" id="fr-jmeno-err"></p></div><div class="fr-field"><label for="fr-email">E-mail</label><input aria-describedby="fr-email-err" autocomplete="email" class="fr-input" data-msg="Vyplňte e-mail." data-msg-format="Zadejte e-mail ve tvaru jmeno@domena.cz." id="fr-email" maxlength="200" name="email" required="" type="email"/><p class="fr-field__err" hidden="" id="fr-email-err"></p></div><div class="fr-field"><label for="fr-telefon">Telefon</label><input aria-describedby="fr-telefon-err" autocomplete="tel" class="fr-input" data-msg="Vyplňte telefon." data-msg-format="Zadejte telefon, např. 123 456 789 nebo +420 123 456 789." id="fr-telefon" maxlength="200" name="telefon" required="" type="tel"/><p class="fr-field__err" hidden="" id="fr-telefon-err"></p></div><div class="fr-field"><span class="fr-field__label" id="fr-zbozi">Co chcete chránit</span><details class="fr-ms"><summary aria-describedby="fr-zbozi">- vyberte -</summary><div aria-labelledby="fr-zbozi" class="fr-ms__list" role="group"><div class="fr-ms__group"><label><input name="zbozi[]" type="checkbox" value="Ovoce a zelenina"/>Ovoce a zelenina</label><label><input name="zbozi[]" type="checkbox" value="Ryby a maso"/>Ryby a maso</label><label><input name="zbozi[]" type="checkbox" value="Květiny"/>Květiny</label></div><div class="fr-ms__group"><label><input name="zbozi[]" 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="fr-field"><span class="fr-field__label" id="fr-provoz">Typ provozu</span><details class="fr-ms"><summary aria-describedby="fr-provoz">- vyberte -</summary><div aria-labelledby="fr-provoz" class="fr-ms__list" role="group"><div class="fr-ms__group"><label><input name="provoz" type="radio" value="Supermarket"/>Supermarket</label><label><input name="provoz" type="radio" value="Velkoobchod"/>Velkoobchod</label><label><input name="provoz" type="radio" value="Květinářství"/>Květinářství</label><label><input name="provoz" type="radio" value="Výroba potravin"/>Výroba potravin</label><label><input name="provoz" type="radio" value="Jiný provoz"/>Jiný provoz</label></div></div></details></div><div class="fr-field fr-form__full"><label for="fr-zprava">Zpráva</label><textarea class="fr-input" id="fr-zprava" maxlength="5000" name="zprava" rows="5"></textarea></div><div class="fr-field fr-consent fr-form__full"><input aria-describedby="fr-souhlas-err" data-msg="Potvrďte prosím souhlas se zpracováním osobních údajů." id="fr-souhlas" name="souhlas" required="" type="checkbox" value="1"/><label for="fr-souhlas">Souhlasím se zpracováním <a href="#">osobních údajů</a> za účelem odpovědi na moji poptávku.</label><p class="fr-field__err" hidden="" id="fr-souhlas-err"></p></div><div aria-hidden="true" class="fr-form__hp"><label for="fr-web">Web</label><input autocomplete="off" id="fr-web" name="web" tabindex="-1" type="text"/></div><input name="kontrola" type="hidden" value=""/><p class="fr-form__error fr-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="fr-form__full"><button class="fr-btn" type="submit"><span class="fr-btn__ic"><svg aria-hidden="true" class="fr-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>Odeslat poptávku</button></div></form><div class="fr-form__ok" hidden="" tabindex="-1"><h3 class="fr-d4">Děkujeme, poptávku jsme dostali.</h3><p>Ozveme se do dvou pracovních dnů. V ukázce se nic neodesílá.</p><p>Spěcháte? Volejte <a href="#">+420 123 456 789</a>.</p></div></div>
Kontakt
Vlevo kontakty s ikonou oddělené linkou, vpravo bílá karta s formulářem.
HTML kód
<div class="fr-contact"><div><span class="fr-tag">Kontakt</span><h2 class="fr-d2" style="margin-top:16px">Ozvěte se nám<span class="fr-dot">.</span></h2><div class="fr-contact__list"><a href="#"><svg aria-hidden="true" class="fr-icon" viewbox="0 0 256 256"><path d="M221.59,160.3l-47.24-21.17a14,14,0,0,0-13.28,1.22,4.81,4.81,0,0,0-.56.42l-24.69,21a1.88,1.88,0,0,1-1.68.06c-15.87-7.66-32.31-24-40-39.65a1.91,1.91,0,0,1,0-1.68l21.07-25a6.13,6.13,0,0,0,.42-.58,14,14,0,0,0,1.12-13.27L95.73,34.49a14,14,0,0,0-14.56-8.38A54.24,54.24,0,0,0,34,80c0,78.3,63.7,142,142,142a54.25,54.25,0,0,0,53.89-47.17A14,14,0,0,0,221.59,160.3ZM176,210C104.32,210,46,151.68,46,80A42.23,42.23,0,0,1,82.67,38h.23a2,2,0,0,1,1.84,1.31l21.1,47.11a2,2,0,0,1,0,1.67L84.73,113.15a4.73,4.73,0,0,0-.43.57,14,14,0,0,0-.91,13.73c8.87,18.16,27.17,36.32,45.53,45.19a14,14,0,0,0,13.77-1c.19-.13.38-.27.56-.42l24.68-21a1.92,1.92,0,0,1,1.6-.1l47.25,21.17a2,2,0,0,1,1.21,2A42.24,42.24,0,0,1,176,210Z"></path></svg>+420 123 456 789</a><a href="#"><svg aria-hidden="true" class="fr-icon" viewbox="0 0 256 256"><path d="M224,50H32a6,6,0,0,0-6,6V192a14,14,0,0,0,14,14H216a14,14,0,0,0,14-14V56A6,6,0,0,0,224,50ZM208.58,62,128,135.86,47.42,62ZM216,194H40a2,2,0,0,1-2-2V69.64l86,78.78a6,6,0,0,0,8.1,0L218,69.64V192A2,2,0,0,1,216,194Z"></path></svg>info@fresh.example</a><span><svg aria-hidden="true" class="fr-icon" viewbox="0 0 256 256"><path d="M128,66a38,38,0,1,0,38,38A38,38,0,0,0,128,66Zm0,64a26,26,0,1,1,26-26A26,26,0,0,1,128,130Zm0-112a86.1,86.1,0,0,0-86,86c0,30.91,14.34,63.74,41.47,94.94a252.32,252.32,0,0,0,41.09,38,6,6,0,0,0,6.88,0,252.32,252.32,0,0,0,41.09-38c27.13-31.2,41.47-64,41.47-94.94A86.1,86.1,0,0,0,128,18Zm0,206.51C113,212.93,54,163.62,54,104a74,74,0,0,1,148,0C202,163.62,143,212.93,128,224.51Z"></path></svg>Sadová 8, 602 00 Brno</span><span><svg aria-hidden="true" class="fr-icon" viewbox="0 0 256 256"><path d="M128,26A102,102,0,1,0,230,128,102.12,102.12,0,0,0,128,26Zm0,192a90,90,0,1,1,90-90A90.1,90.1,0,0,1,128,218Zm62-90a6,6,0,0,1-6,6H128a6,6,0,0,1-6-6V72a6,6,0,0,1,12,0v50h50A6,6,0,0,1,190,128Z"></path></svg>Po až pá 8.00 až 16.30</span></div></div><div class="fr-formcard"><h2 class="fr-d3">Nezávazná poptávka</h2><form class="fr-form" data-fr-form="" novalidate=""><div class="fr-field fr-form__full"><label for="fr-jmeno">Jméno a příjmení (firma)</label><input aria-describedby="fr-jmeno-err" autocomplete="name" class="fr-input" data-msg="Vyplňte jméno a příjmení." id="fr-jmeno" maxlength="200" name="jmeno" required="" type="text"/><p class="fr-field__err" hidden="" id="fr-jmeno-err"></p></div><div class="fr-field"><label for="fr-email">E-mail</label><input aria-describedby="fr-email-err" autocomplete="email" class="fr-input" data-msg="Vyplňte e-mail." data-msg-format="Zadejte e-mail ve tvaru jmeno@domena.cz." id="fr-email" maxlength="200" name="email" required="" type="email"/><p class="fr-field__err" hidden="" id="fr-email-err"></p></div><div class="fr-field"><label for="fr-telefon">Telefon</label><input aria-describedby="fr-telefon-err" autocomplete="tel" class="fr-input" data-msg="Vyplňte telefon." data-msg-format="Zadejte telefon, např. 123 456 789 nebo +420 123 456 789." id="fr-telefon" maxlength="200" name="telefon" required="" type="tel"/><p class="fr-field__err" hidden="" id="fr-telefon-err"></p></div><div class="fr-field"><span class="fr-field__label" id="fr-zbozi">Co chcete chránit</span><details class="fr-ms"><summary aria-describedby="fr-zbozi">- vyberte -</summary><div aria-labelledby="fr-zbozi" class="fr-ms__list" role="group"><div class="fr-ms__group"><label><input name="zbozi[]" type="checkbox" value="Ovoce a zelenina"/>Ovoce a zelenina</label><label><input name="zbozi[]" type="checkbox" value="Ryby a maso"/>Ryby a maso</label><label><input name="zbozi[]" type="checkbox" value="Květiny"/>Květiny</label></div><div class="fr-ms__group"><label><input name="zbozi[]" 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="fr-field"><span class="fr-field__label" id="fr-provoz">Typ provozu</span><details class="fr-ms"><summary aria-describedby="fr-provoz">- vyberte -</summary><div aria-labelledby="fr-provoz" class="fr-ms__list" role="group"><div class="fr-ms__group"><label><input name="provoz" type="radio" value="Supermarket"/>Supermarket</label><label><input name="provoz" type="radio" value="Velkoobchod"/>Velkoobchod</label><label><input name="provoz" type="radio" value="Květinářství"/>Květinářství</label><label><input name="provoz" type="radio" value="Výroba potravin"/>Výroba potravin</label><label><input name="provoz" type="radio" value="Jiný provoz"/>Jiný provoz</label></div></div></details></div><div class="fr-field fr-form__full"><label for="fr-zprava">Zpráva</label><textarea class="fr-input" id="fr-zprava" maxlength="5000" name="zprava" rows="5"></textarea></div><div class="fr-field fr-consent fr-form__full"><input aria-describedby="fr-souhlas-err" data-msg="Potvrďte prosím souhlas se zpracováním osobních údajů." id="fr-souhlas" name="souhlas" required="" type="checkbox" value="1"/><label for="fr-souhlas">Souhlasím se zpracováním <a href="#">osobních údajů</a> za účelem odpovědi na moji poptávku.</label><p class="fr-field__err" hidden="" id="fr-souhlas-err"></p></div><div aria-hidden="true" class="fr-form__hp"><label for="fr-web">Web</label><input autocomplete="off" id="fr-web" name="web" tabindex="-1" type="text"/></div><input name="kontrola" type="hidden" value=""/><p class="fr-form__error fr-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="fr-form__full"><button class="fr-btn" type="submit"><span class="fr-btn__ic"><svg aria-hidden="true" class="fr-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>Odeslat poptávku</button></div></form><div class="fr-form__ok" hidden="" tabindex="-1"><h3 class="fr-d4">Děkujeme, poptávku jsme dostali.</h3><p>Ozveme se do dvou pracovních dnů. V ukázce se nic neodesílá.</p><p>Spěcháte? Volejte <a href="#">+420 123 456 789</a>.</p></div></div></div>
Stránka nenalezena
Velké bledé číslo, nadpis s tečkou a tlačítko zpět.
HTML kód
<section class="fr-wrap fr-lost"><p aria-hidden="true" class="fr-ghost">404</p><h1 class="fr-d2">Tady nic čerstvého není<span class="fr-dot">.</span></h1><p class="fr-lede">Stránka, kterou hledáte, tu není.</p><a class="fr-btn" href="#"><span class="fr-btn__ic"><svg aria-hidden="true" class="fr-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>Zpět na úvod</a></section>