Megamenu

Počty sloupců jsou řešeny přes classy, které se přidávají nadřazené položce v CMSku. Jsou tři druhy class:

  • submenu-1-col - jeden sloupec

  • submenu-2-col - dva sloupce

  • submenu-3-col - tři sloupce

PŘÍKLAD: nadřazená položka "Solution" má classu submenu-2-col a řadí podřazené položky do dvou sloupců.

Responzivně upraveno. Obrázky jsou pro mobil skryty, takže jsou v mobilním menu jen názvy + popisky.

POZN.:
Oproti návrhu je tam jedna odchylka na desktopu. Položky se v návrhu řadí do sloupců (první sloupce 1 - 3, druhý sloupec, 4 - 6). Z hlediska strukutry kódu jsou položky v řádku (1. řádek = 1 a 2; 2. řádek = 3 a 4; 3. řádek = 5 a 6).

Solution 1-6

  1. Číselník je vyskládaný ve sdílené sekci v bloku Layout, obsahuje classu "layout-numbers". Obsahuje čísla stránek, které mají odkazy na jednotlivé stránky.

  2. Každá stránka, na kterou se odkazuje, respektive, která je součástí číselníku, má v nastavení stránky svoji unikátní classu. Takže první stránka má třídu page-solution-1, druhá page-solution-2 atd.

  3. Vzhledem k tomu, že se sdílená sekce číselníku vkládá do jednotlivých boxů, které jsou na dané stránce, tak tento box na stránce musí mít třídu "box-pages-numbers", aby se do něj sdílená sekce číselníku vložila.

Formulář registrace na událost

Formulář je vyskládaný v poslední sekci události. Má na sobě classu popup-order-form.

  • Součástí formuláře je počítadlo, které přidává počet osob a na základě toho dopočítává cenu + cenu s DPH

  • Cena události se zadává v CMS v nastavení dané události na základě, které se pak propíše do popup formuláře

  • Zaškrtávací políčko má třídu company-info - vkládá do formuláře fakturační údaje

Vstupní boxy s logy a hover obrázkem

LINK NA HOVER BOX VE STYLEGUIDE
Na boxu je custom classa hover-box, která zajišťuje hover efekt - odhalení fotky, přebarvení textů na bílo. V CMSku se ty změny neprojevují a boxu se nastavuje jako pozadí daná fotka, která se pak na FE zobrazí na hover.

Upraveno tak aby se logo zobrazovalo tmavé a na hover boxu bílé. Ideálně dodržovat pro tento hover typ boxu, aby se do něj loga vkládaly pouze v bílé barvě - tím se zajistí správná funkcionalita.

POZN.:
Logo ponecháno v PNG formátu a defacto by mělo být jedno v jakém formátu bude.

Odrážky

OBYČEJNÉ ODRÁŽKY

  • Úkázkový text

  • Úkázkový text

ODRÁŽKY S HVĚZDIČKOU JAKO TEXTOVÝ BLOK - třída block-list na textovém bloku

  • Úkázkový text

  • Úkázkový text

STARÝ ZPŮSOB - MENŠÍ HVĚZDIČKY: Odrážky s hvězdičkou děláme pomocí obrázku hvězdičky

Společné seznámení

Společné seznámení

Nastavení očekávání

Harmonogram dne

Kafe a chlebíčky