Tlačítka
1. Tlačítka ke stažení
Z roletky vyberte vhodný text a následně tlačítko stáhněte ve formátu svg. Pokud budete potřebovat jiný text na tlačítku, ozvěte se nám.
2. Popis a stavy tlačítek
2.1. Základní tlačítka
Výplň #000000, logo, text, linka #FFFFFF, radius 8 px, výška 48 px
2.2. Negativní provedení tlačítek
Výplň #FFFFFF, border 1px #000000, logo #000000, radius 8 px, výška 48 px
- Negativní provedení tlačítka lze použít v aplikaci SePa, která má tmavé pozadí.
- Kontrast prvku a pozadí vychází z doporučení směrnice WCAG o přístupnosti.
- Kontrast mezi tlačítkem (či jinou komponentou) a pozadím má být nejméně 3:1. Doporučujeme pro kontrolu využít některou z webových stránek, které měří kontrast.
2.3. Neaktivní tlačítka
Tlačítka v tmavém provedení pro světlé pozadí (výplň #999999, ostatní prvky #E6E6E6)
Tlačítka ve světlém provedení pro tmavé pozadí (výplň #F9FAFB, border a ostatní prvky #999999)
- Rozlišujeme neaktivní provedení tlačítka pro světlé a pro tmavé pozadí aplikace SePa.
- Barvy pro neaktivní tlačítka jsou v základu určeny jako cca 50% průhlednosti barev původních, jsou přitom využity barvy definované v části Barvy.
- Neaktivní tlačítko je možné využít v případě, kdy uživatel musí na obrazovce aktivně (povinně) potvrdit nějaký prvek, bez kterého není možné službu Bank iD spustit. Může se např. jednat o vyjádření souhlasu s obchodními podmínkami služby SePa apod.
2.4. Další varianty tlačítek
Tlačítko v tmavém provedení pro světlé pozadí (výplň #000000, logo #FFFFFF, radius 10 px, 48x48 px)
Tlačítko ve světlém provedení pro tmavé pozadí (výplň #F0EFFD, logo #000000, radius 10 px, 48x48 px)
- Tlačítko může být použito v případě, kdy v aplikaci SePa není dostatek místa na tlačítko v základním provedení nebo v případě, kdy tlačítko v základním provedení graficky neodpovídá vizuálním prvkům aplikace SePa.
Neaktivní provedení tlačítek
Neaktivní stav pro tlačítko v tmavém provedení pro světlé pozadí
Neaktivní stav pro tlačítko ve světlém provedení pro tmavé pozadí
3. Pravidla pro použití Bank iD tlačítka
Bank iD tlačítko je určeno pro spuštění služby Bank iD za účelem přihlášení, ověření totožnosti, sjednání služby, podpisu dokumentu apod. Po kliknutí na tlačítko následuje rozcestník výběru bank, obrazovky IdP atd.
- Žádná jiná vizualizace Bank iD tlačítka, než jak je uvedeno na této stránce, není pro službu Bank iD přípustná.
- Pro základní Bank iD tlačítko může být použita jen černá #000000 nebo bílá #FFFFFF barva výplně, textu a ohraničení podle toho, jaké má SeP uživatelské rozhraní (tmavé nebo světlé) své aplikace.
- Typ písma “Poppins” musí být v textu v tlačítku vždy zachován, viz Typografie. Velikost písma může být přizpůsobena velikosti tlačítka v prostředí SePa.
- Logo Bank iD v tlačítku musí být vždy zachováno. Přípustná je verze tlačítka pouze s logem Bank iD bez textu. U loga musí být dodržena jeho ochranná zóna a minimální velikost loga pro digitální rozhraní, jak je definováno na stránce Bank iD logo.
- Výšku a šířku tlačítka a velikost písma v Bank iD tlačítku může SeP přizpůsobit vizuálním prvkům ve svém uživatelském rozhraní při zachování výše uvedených pravidel.
- Text v tlačítku může SeP přizpůsobit své službě. Možné texty na Bank iD tlačítku jsou: „Přihlásit se“ / “Podepsat“ / „Ověřit se“.
- Kontrast tlačítka a pozadí má respektovat doporučení WCAG směrnice a poměr kontrastu má být nejméně 3:1.
4. Tlačítka na Bank iD obrazovkách
Tato tlačítka slouží pouze pro akce na vlastních obrazovkách Bank iD (tj. v aplikacích, které provozuje společnost Bankovní identita, a.s.), např. pro potvrzení na pre-autorizační obrazovce v Bank iD podpisu, v modálních oknech na rozcestníku výběru bank apod.
Primární tlačítko, výplň #262626, text #FFFFFF, radius 8 px, výška 48 px
Sekundární tlačítko, výplň #FFFFFF, border 2 px #262626, text #262626, radius 8 px, výška 48 px
- Primární tlačítko slouží pro hlavní akce na vlastních obrazovkách Bank iD, např. pro potvrzení pre-autorizační obrazovky při podpisu dokumentu.
- Sekundární tlačítko je na vlastních obrazovkách Bank iD využíváno v případě, kdy na obrazovce má být další tlačítko pro méně důležitou akci, např. v modálních oknech či na chybových obrazovkách.
Tlačítka v Bank iD DEMO
Základní stav
Interakce