Webové komponenty
Rázcestník
Rázcestník má formu jednoduchej dlaždice, zloženej z nadpisu, popisku a oddeľovacej čiary. Jeho účelom je prehľadne a jednoducho zoskupiť resp. usporiadať pre používateľa odkazy na súvisiaci obsah, ktorý je rozmiestnený na rôznych, samostatných podstránkach.
Vlastnosti rázcestníka (desktop)
- Hyperlinkový text - použite max. 50 znakov (vrátane medzier)
- Popiska hyperlinku - použite max. 120 znakov (vrátane medzier)
Title for 1st element
Subtitle for 1st element
Title for 2nd element
Subtitle for 2nd element
Title for 3rd element
Subtitle for 3rd element
Title for 4th element
Subtitle for 4th element
Title for 5th element
Subtitle for 5th element
Title for 6th element
Subtitle for 6th element
Title for 7th element
Subtitle for 7th element
<div data-module="idsk-crossroad" class="">
<div class="idsk-crossroad idsk-crossroad-1">
<div class="idsk-crossroad__item ">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 1st element" aria-hidden="false">Title for 1st element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="false">Subtitle for 1st element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
<div class="idsk-crossroad__item ">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 2nd element" aria-hidden="false">Title for 2nd element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="false">Subtitle for 2nd element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
<div class="idsk-crossroad__item ">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 3rd element" aria-hidden="false">Title for 3rd element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="false">Subtitle for 3rd element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
<div class="idsk-crossroad__item ">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 4th element" aria-hidden="false">Title for 4th element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="false">Subtitle for 4th element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
<div class="idsk-crossroad__item ">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 5th element" aria-hidden="false">Title for 5th element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="false">Subtitle for 5th element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
<div class="idsk-crossroad__item ">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 6th element" aria-hidden="false">Title for 6th element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="false">Subtitle for 6th element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
<div class="idsk-crossroad__item ">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 7th element" aria-hidden="false">Title for 7th element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="false">Subtitle for 7th element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
</div>
</div>
Použitie rázcestníka
S nadpisom a podnadpisom: Rázcestník je jedným z komponentov, ktoré navigujú používateľa k obsahu vašej stránky. Použitím rázcestníka spolu s nadpisom a podnadpisom dáte používateľovi najavo, ktorý obsah (a ako) spolu na stránke súvisí.
V prípade použitia nadpisu a podnadpisu buďte struční a vecní. Ak rázcestník zoskupuje obsah, ktorý má vlastnú domovskú podstránku, v podnadpise na ňu odkážte s použitím hyperlinku (napr. všetok obsah k téme Informatizácia je zoskupený na hlavnej, domovskej stránke ale má aj k téme delegovanú podstránku). Ten istý hyperlink (ak to dáva zmysel), môže byť vložený aj do nadpisu rázcestníka.
V jednom alebo viacerých stĺpcoch: Rázcestník môžete štrukturovať do jedného alebo viacerých stĺpcov, musíte však dodržať IDSK pravidlá rozloženia stránky (grid).
Title for 1st element
Subtitle for 1st element
Title for 2nd element
Subtitle for 2nd element
Title for 3rd element
Subtitle for 3rd element
Title for 4th element
Subtitle for 4th element
Title for 5th element
Subtitle for 5th element
Title for 6th element
Subtitle for 6th element
Title for 7th element
Subtitle for 7th element
Title for 8th element
Subtitle for 8th element
<div data-module="idsk-crossroad" class="">
<div class="idsk-crossroad idsk-crossroad-2">
<div class="idsk-crossroad__item ">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 1st element" aria-hidden="false">Title for 1st element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="false">Subtitle for 1st element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
<div class="idsk-crossroad__item ">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 2nd element" aria-hidden="false">Title for 2nd element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="false">Subtitle for 2nd element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
<div class="idsk-crossroad__item ">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 3rd element" aria-hidden="false">Title for 3rd element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="false">Subtitle for 3rd element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
<div class="idsk-crossroad__item ">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 4th element" aria-hidden="false">Title for 4th element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="false">Subtitle for 4th element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
</div>
<div class="idsk-crossroad idsk-crossroad-2">
<div class="idsk-crossroad__item ">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 5th element" aria-hidden="false">Title for 5th element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="false">Subtitle for 5th element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
<div class="idsk-crossroad__item ">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 6th element" aria-hidden="false">Title for 6th element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="false">Subtitle for 6th element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
<div class="idsk-crossroad__item ">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 7th element" aria-hidden="false">Title for 7th element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="false">Subtitle for 7th element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
<div class="idsk-crossroad__item ">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 8th element" aria-hidden="false">Title for 8th element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="false">Subtitle for 8th element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
</div>
</div>
Rázcestník len s 5 dlaždicami v jednom stĺpci: Rázcestník nepoužívajte s viac ako 5 dlaždicami v jednom stĺpci. Ak potrebujete použiť viac dlaždíc, použite komponent "rozbalovací rázcestník".
Základný blok 2, rozbaliteľný
Tento rozbaliteľný blok použite ak potrebujete alebo chcete v rázcestníku použiť viac ako 5 odkazov v jednom stĺpci, respektíve 10 odkazov v dvoch stĺpcoch.
Aby používateľ nebol zahltený veľkým množstvom informácií, časť obsahu bude skrytá. Používateľ ich môže odkryť stlačením textového tlačidla na konci rázcestníku.
Z čoho sa skladá rozbaliteľný blok?
Skladá sa z:
- rázcestník,
- čiastočne transparentné prekrytie piateho riadku,
- tlačidlo “zobraziť viac” pre zobrazenie ďaľších odkazov v rázcestníku.
Title for 1st element
Subtitle for 1st element
Title for 2nd element
Subtitle for 2nd element
Title for 3rd element
Subtitle for 3rd element
Title for 4th element
Subtitle for 4th element
<div data-module="idsk-crossroad" class="">
<div class="idsk-crossroad idsk-crossroad-2">
<div class="idsk-crossroad__item
">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 1st element" aria-hidden="false">Title for 1st element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="false">Subtitle for 1st element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
<div class="idsk-crossroad__item
">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 2nd element" aria-hidden="false">Title for 2nd element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="false">Subtitle for 2nd element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
<div class="idsk-crossroad__item
">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 3rd element" aria-hidden="false">Title for 3rd element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="false">Subtitle for 3rd element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
<div class="idsk-crossroad__item
">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 4th element" aria-hidden="false">Title for 4th element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="false">Subtitle for 4th element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
<div class="idsk-crossroad__item
">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 5th element" aria-hidden="true">Title for 5th element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="true">Subtitle for 5th element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
<div class="idsk-crossroad__item idsk-crossroad__item--two-columns-hide-mobile
idsk-crossroad__item--two-columns-hide">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 6th element" aria-hidden="true">Title for 6th element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="true">Subtitle for 6th element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
<div class="idsk-crossroad__item idsk-crossroad__item--two-columns-hide-mobile
idsk-crossroad__item--two-columns-hide">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 7th element" aria-hidden="true">Title for 7th element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="true">Subtitle for 7th element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
<div class="idsk-crossroad__item idsk-crossroad__item--two-columns-hide-mobile
idsk-crossroad__item--two-columns-hide">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 8th element" aria-hidden="true">Title for 8th element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="true">Subtitle for 8th element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
</div>
<div class="idsk-crossroad idsk-crossroad-2">
<div class="idsk-crossroad__item idsk-crossroad__item--two-columns-hide-mobile
">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 9th element" aria-hidden="false">Title for 9th element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="false">Subtitle for 9th element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
<div class="idsk-crossroad__item idsk-crossroad__item--two-columns-hide-mobile
">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 10th element" aria-hidden="false">Title for 10th element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="false">Subtitle for 10th element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
<div class="idsk-crossroad__item idsk-crossroad__item--two-columns-hide-mobile
">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 11th element" aria-hidden="false">Title for 11th element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="false">Subtitle for 11th element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
<div class="idsk-crossroad__item idsk-crossroad__item--two-columns-hide-mobile
">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 12th element" aria-hidden="false">Title for 12th element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="false">Subtitle for 12th element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
<div class="idsk-crossroad__item idsk-crossroad__item--two-columns-hide-mobile
">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 13th element" aria-hidden="true">Title for 13th element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="true">Subtitle for 13th element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
<div class="idsk-crossroad__item idsk-crossroad__item--two-columns-hide-mobile
idsk-crossroad__item--two-columns-hide">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 14th element" aria-hidden="true">Title for 14th element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="true">Subtitle for 14th element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
<div class="idsk-crossroad__item idsk-crossroad__item--two-columns-hide-mobile
idsk-crossroad__item--two-columns-hide">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 15th element" aria-hidden="true">Title for 15th element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="true">Subtitle for 15th element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
<div class="idsk-crossroad__item idsk-crossroad__item--two-columns-hide-mobile
idsk-crossroad__item--two-columns-hide">
<a href="#" class="govuk-link idsk-crossroad-title" title="Title for 16th element" aria-hidden="true">Title for 16th element
</a>
<p class="idsk-crossroad-subtitle" aria-hidden="true">Subtitle for 16th element</p>
<hr class="idsk-crossroad-line" aria-hidden="true"/>
</div>
</div>
<div class="govuk-grid-column-full idsk-crossroad__collapse--shadow idsk-crossroad__uncollapse-div ">
<button id="idsk-crossroad__uncollapse-button" class="idsk-crossroad__colapse--button" type="button" data-line1="Zobraziť viac" data-line2="Zobraziť menej">Zobraziť viac</button>
</div>
</div>