Buďte pozorní a vždy sa uistite, že zdieľate informácie iba cez zabezpečenú webovú stránku verejnej správy SR. Zabezpečenú webovú stránku spoznáte podľa webovej adresy začínajúcej https://.
Ak sú k dispozícii výsledky vyhľadávania, použite šípky hore a dole na ich prezeranie a kláves Enter na výber.
Kartička (Card)
Primárna funkcia komponentu kartička je vizuálna reprezentácia obsahu článkov alebo podstránok. Prvky, ako sú text a obrázky, majú byť umiestnené spôsobom, ktorý jasne naznačuje ich hierarchiu.
Kartička je komponent obsahujúci stručný popis, prípadne tag, dátum alebo obrázok. Slúži najmä ako navigácia na články alebo podstránky. Celá plocha kartičky môže byť klikateľná a používateľa presmeruje na konkrétny obsah.
Kartičku používajte v zoznamoch súvisiaceho obsahu, článkov, aktualít alebo podstránok. Nadpis a popis majú byť krátke, zrozumiteľné a informačne dostatočné aj bez obrázka.
Ako sa používa
na navigáciu k súvisiacemu obsahu,
ako jeden celistvý klikateľný prvok,
s jasným vizuálnym indikátorom, že ide o klikateľný prvok,
so stručným a jasným nadpisom,
v logických a primeraných skupinách.
Ako sa nepoužíva
s vnútornými odkazmi alebo tlačidlami,
na zvýraznenie statického obsahu bez navigačného účelu,
v príliš dlhých a neprehľadných zoznamoch,
ak chýba alebo je nejasný nadpis,
ak obrázok nesie informáciu, ale nemá zmysluplný alternatívny text.
Varianty a stavy
1. Vertikálna kartička bez obrázka
Vertikálna kartička bez obrázka obsahuje nadpis a krátky popis. Celá plocha kartičky je klikateľná. Kartičku bez obrázka použite vtedy, keď obrázok nepridáva používateľovi žiadnu hodnotu alebo by zbytočne zahlcoval zoznam.
Kartička musí byť použiteľná klávesnicou a musí mať zrozumiteľný prístupný názov. Ak je celá kartička klikateľná, nesmie obsahovať ďalšie vnorené interaktívne prvky.
Klávesové ovládanie
Tab – presun zamerania klávesnice na nasledujúcu kartičku alebo interaktívny prvok.
Shift + Tab – presun zamerania klávesnice na predchádzajúci prvok.
Enter – aktivovanie kartičky a prechod na cieľovú stránku.
Základné pravidlá prístupnosti
Ak kartička slúži ako navigácia, celá kartička môže byť jedným odkazom pomocou natívneho prvku <a> alebo komponentu Link, ktorý renderuje odkaz.
Klikateľná kartička nesmie obsahovať ďalšie vnorené odkazy alebo tlačidlá. Vznikol by neplatný alebo mätúci interaktívny obsah.
Nadpis kartičky musí byť jasný a informatívny. Zvyčajne sa používa nadpis <h3>, ale konkrétna úroveň nadpisu závisí od hierarchie stránky.
Obrázok kartičky má mať prázdny alternatívny text alt="", ak je iba dekoratívny a informáciu už dostatočne poskytuje text kartičky.
Ak obrázok nesie významnú informáciu, musí mať zmysluplný alternatívny text. Neopakujte však zbytočne rovnaký text ako v nadpise kartičky.
Ak kartička obsahuje dátum, použite prvok <time> s atribútom dateTime vo formáte vhodnom pre strojové spracovanie.
Focus stav musí byť viditeľný a kontrastný. Hover stav nesmie byť jediným indikátorom klikateľnosti.
Implementácia kartičky z ID-SK Frontend
Komponent kartička z knižnice ID-SK Frontend môžete do svojho projektu integrovať dvoma spôsobmi v závislosti od vašej technologickej infraštruktúry:
Statická HTML implementácia – vhodná pre projekty bez Node.js alebo bundlera.
Pokročilá integrácia (NPM + SCSS) – vhodná pre projekty so správou zdrojov a build procesom.
Základné požiadavky
Pred začiatkom integrácie sa uistite, že máte:
Node.js: verzia 4.2.0 alebo vyššia.
Dart Sass: verzia 1.0.0 alebo vyššia.
Nunjucks: verzia 3.0.0 alebo vyššia, ak chcete používať makrá.
Možnosti implementácie
1. Statická HTML implementácia (HTML + minifikované súbory)
Ak váš projekt nevyužíva Node.js alebo bundler, napríklad Webpack alebo Vite, môžete použiť hotové buildy. Pri inštalácii z priečinka dist sa používajú kompilované a minifikované verzie šablón a štýlov.
Pri tomto spôsobe nebudete môcť:
selektívne zahrnúť štýly pre jednotlivé komponenty,
zostaviť vlastné štýly alebo komponenty na základe palety a typografických kombinácií,
jednoducho prispôsobiť zdrojový Sass kód komponentu,
použiť dynamické komponenty vytvorené pomocou Nunjucks makier.
Stiahnite a zahrňte zdroje
Stiahnite si najnovšie kompilované a minifikované verzie štýlov a assetov. Skopírujte celý priečinok assets a minifikované súbory do koreňového priečinka projektu. Štruktúra môže vyzerať približne takto:
<divclass="idsk-card"><divclass="idsk-card__image-wrapper"><imgsrc="/assets/images/placeholder.png"alt=""></div><divclass="idsk-card__content"><divclass="idsk-card__heading"><h3><ahref="/zakladne-informacie"class="govuk-link"> Nadpis kartičky
</a></h3></div><divclass="idsk-card__description"> V tejto časti nájdete všetky potrebné informácie
spojené s používaním a vytvorením občianskeho
preukazu s čipom.
</div><pclass="idsk-card__date-tags"><timedatetime="2023-01-01"> 1. 1. 2023
</time><spanaria-hidden="true"> — </span><span>Tag 1</span><spanaria-hidden="true"> | </span><span>Tag 2</span><spanaria-hidden="true"> | </span><span>Tag 3</span></p></div></div>
Ak obrázok neprináša žiadnu novú informáciu a iba vizuálne dopĺňa obsah kartičky, použite prázdny alternatívny text alt="". Ak je obrázok obsahovo dôležitý, opíšte jeho význam stručným alternatívnym textom.
2. Pokročilá integrácia (NPM + SCSS)
Nainštalujte balíkPre inštaláciu cez NPM spustite:
npminstall nunjucks --savenpm i @id-sk/frontend@3.0.0-beta.0-hotfix
Pridajte Nunjucks alebo HTMLDo pripraveného súboru s príponou .html alebo .njk vložte markup kartičky, ktorý je uvedený vyššie.
Importujte štýlyPre import individuálneho komponentu kartičky pridajte do Sass súboru:
