Banner

Banner slouží k výraznému zobrazení klíčových informací, výzev nebo propagačního obsahu. Je navržen tak, aby přilákal pozornost uživatele a zároveň umožnil snadnou navigaci k dalším akcím nebo zdrojům informací.

Použití ​

Banner se využívá na úvodních stránkách, v propagačních sekcích nebo jako hlavní upoutávka na specifických podstránkách. Je vhodný pro stránky, které potřebují vizuálně poutavý prvek pro komunikaci důležitého obsahu.

Anatomie komponenty ​

Existuje několik druhů tlačítek, které se liší podle kontextu jejich použití. Pro každé tlačítko existují speciální CSS třídy, a to konkrétně třídy, které řeší - typ tlačítka, velikost, stav (disable state) popř. speciální třída pro speciální typ tlačítka.

• Obrázek na pozadí: Vizuálně přitažlivý prvek, který podporuje sdělení textu. Používají se obrázky nebo grafické motivy v souladu s vizuálním stylem organizace. Dostupný ve variantě XL.
• Nadpis: Hlavní text, který jasně a stručně vystihuje sdělení banneru. Používá velké písmo a kontrastní barvy.
• Podnadpis nebo doplňkový text: Doplňuje hlavní nadpis a poskytuje více informací o sdělení.
• Call-to-action tlačítko: Výrazné tlačítko vybízející uživatele k akci (např. „Zjistit více“ nebo „Kontaktujte nás“). Obsahuje jasnou výzvu a kontrastní barvy pro maximální viditelnost.
• Dekorativní ikona: Doplňková grafika v prostoru vedle textu, dostupná u variant s, m a l při foreground="icon". Ve výchozím stavu se vykreslí obecná dekorativní grafika; propem icon lze zvolit libovolnou ikonu ze sady design systému ve formátu typ/název (například icon="complex/portal"). Ikona je čistě dekorativní, je skryta pro čtečky obrazovky a zobrazuje se až od většího rozlišení.
• Stylingové prvky (Waves, Stripes, Lines, Simple):
  • Waves: Zaoblené tvary podporují dynamiku a přátelský přístup.
  • Stripes: Pruhy přinášejí organizaci a strukturu.
  • Lines: Minimalistický vzhled s ostrými liniemi pro seriózní nebo technicky zaměřené komunikace.
  • Simple: Čisté linie a jednoduchost zdůrazňují text a obsah, bez rušivých prvků.

Doporučení ​

• Zachovejte jasný kontrast: Text musí být snadno čitelný vůči pozadí. Zvolte vhodnou barvu pozadí a textu.
• Použijte relevantní obrázky: Obrázky na pozadí by měly podporovat sdělení a ladit s vizuálním stylem organizace.
• Omezte množství textu: Banner má sloužit jako poutač. Obsah musí být stručný, jasný a přehledný.
• Zdůrazněte tlačítko Call-to-action: Tlačítko by mělo být výrazné a uživatelé by z něj měli okamžitě pochopit, jaká akce se od nich očekává.
• Přizpůsobte styling konkrétnímu účelu: Vyberte styling varianty (Waves, Stripes, Lines, Simple) podle povahy sdělení a cílové skupiny.
• Overlay na obrázku u varianty XL: Pro variantu XL se na mobilních zařízeních využívá obrázek s overlay efektem. Tento prvek zajišťuje dostatečný kontrast mezi textem a pozadím, což zlepšuje čitelnost a vizuální hierarchii.
• Menší varianty bez obrázku: U menších variant bannerů na mobilních zařízeních se obrázek na pozadí nepoužívá. Důraz je kladen na text a výzvu k akci, aby byl obsah jasný a prostor efektivně využit.