Toto je interná vývojová aplikácia.
Ak sa chcete dozvedieť, ako používať systém IDSK system vo svojom projekte, pozrite si Ako začať.

Všetky komponenty

Akordeón

Otvoriť ukážku na novej záložke : akordeón

Zdrojový kód

HTML

<div class="govuk-accordion" data-module="govuk-accordion" id="with-descriptions">
  <div class="govuk-accordion__section">
    <div class="govuk-accordion__section-header ">
      <h2 class="govuk-accordion__section-heading">
        <span class="govuk-accordion__section-button" id="with-descriptions-heading-1">
          Názov
        </span>
      </h2>
    </div>
    <div id="with-descriptions-content-1" class="govuk-accordion__section-content">
      <p class="govuk-body">
        Potrebujeme poznať vašu štátnu príslušnosť, aby sme mohli zistiť, v ktorých voľbách máte právo voliť. Ak nemôžete uviesť svoju štátnu príslušnosť, budete musieť poslať kópie dokladov totožnosti poštou.
      </p>
    </div>
  </div>
  <div class="govuk-accordion__section">
    <div class="govuk-accordion__section-header ">
      <h2 class="govuk-accordion__section-heading">
        <span class="govuk-accordion__section-button" id="with-descriptions-heading-2">
          Názov
        </span>
      </h2>
        <div class="govuk-accordion__section-summary govuk-body" id="with-descriptions-summary-2">
          Popis
        </div>
    </div>
    <div id="with-descriptions-content-2" class="govuk-accordion__section-content">
      <p class="govuk-body">
        Potrebujeme poznať vašu štátnu príslušnosť, aby sme mohli zistiť, v ktorých voľbách máte právo voliť. Ak nemôžete uviesť svoju štátnu príslušnosť, budete musieť poslať kópie dokladov totožnosti poštou.
      </p>
    </div>
  </div>
</div>

Makro

{% from "govuk/components/accordion/macro.njk" import govukAccordion %}

{{ govukAccordion({
  id: "with-descriptions",
  items: [
    {
      heading: {
        text: "Názov"
      },
      content: {
        text: "Potrebujeme poznať vašu štátnu príslušnosť, aby sme mohli zistiť, v ktorých voľbách máte právo voliť. Ak nemôžete uviesť svoju štátnu príslušnosť, budete musieť poslať kópie dokladov totožnosti poštou."
      }
    },
    {
      heading: {
        text: "Názov"
      },
      summary: {
        text: "Popis"
      },
      content: {
        text: "Potrebujeme poznať vašu štátnu príslušnosť, aby sme mohli zistiť, v ktorých voľbách máte právo voliť. Ak nemôžete uviesť svoju štátnu príslušnosť, budete musieť poslať kópie dokladov totožnosti poštou."
      }
    }
  ]
}) }}

Detaily

Otvoriť ukážku na novej záložke : detaily

Zdrojový kód

HTML

<details class="govuk-details">
  <summary class="govuk-details__summary">
    <span class="govuk-details__summary-text">
      Pomoc s národnosťou
    </span>
  </summary>
  <div class="govuk-details__text">
    Potrebujeme poznať vašu národnosť, aby sme mohli určiť, ktoré položky máte právo voliť. Ak nemôžete uviesť svoju štátnu príslušnosť, budete musieť poslať kópie dokladov totožnosti poštou.
  </div>
</details>

Makro

{% from "govuk/components/details/macro.njk" import govukDetails %}

{{ govukDetails({
  summaryText: "Pomoc s národnosťou",
  text: "Potrebujeme poznať vašu národnosť, aby sme mohli určiť, ktoré položky máte právo voliť. Ak nemôžete uviesť svoju štátnu príslušnosť, budete musieť poslať kópie dokladov totožnosti poštou."
}) }}

Hlavička

Otvoriť ukážku na novej záložke : hlavička

Základná verzia hlavičky webovej stránky.

Zdrojový kód

HTML

<div class="govuk-header__wrapper">

  <header class="govuk-header idsk-shadow-head" data-module="govuk-header">
    <div class="govuk-header__container ">

      <div class="idsk-secondary-navigation govuk-width-container">
        <div class="idsk-secondary-navigation__header">
          <div class="idsk-secondary-navigation__heading">
            <div class="idsk-secondary-navigation__heading-title">
              <span class="idsk-secondary-navigation__heading-mobile">SK</span>
              <span class="idsk-secondary-navigation__heading-desktop">Oficiálna stránka</span>
              
              <button class="govuk-button govuk-button--texted--inverse idsk-secondary-navigation__heading-button" aria-expanded="false" aria-label="Oficiálna stránka verejnej správy">
                <span class="idsk-secondary-navigation__heading-mobile">e-Gov</span>
                <span class="idsk-secondary-navigation__heading-desktop"><b>verejnej správy</b></span>
                <span class="material-icons">arrow_drop_down</span>
              </button>
            </div>
            <div class="idsk-secondary-navigation__body hidden" data-testid="secnav-children">
              <div class="idsk-secondary-navigation__text">
                <div>
                  <h3 class="govuk-body-s"><b>Doména gov.sk je oficiálna</b></h3>
                  <p class="govuk-body-s">Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. <a class="govuk-link--inverse" href="https://www.slovensko.sk/sk/agendy/agenda/_organy-verejnej-moci" target="_blank">Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze.</a></p>
                </div>
                <div>
                  <h3 class="govuk-body-s"><b>Táto stránka je zabezpečená</b></h3>
                  <p class="govuk-body-s max-width77-desktop">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á stránka vždy začína https:// pred názvom domény webového sídla.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="idsk-dropdown__wrapper idsk-secondary-navigation__dropdown" data-pseudolabel="jazykové menu">
      <button  class="govuk-button govuk-button--texted--inverse idsk-secondary-navigation__heading-button idsk-dropdown" aria-label="Rozbaliť jazykové menu" aria-haspopup="listbox">
  
        <span>slovenčina</span>
        <span class="material-icons" aria-hidden="true">arrow_drop_down</span>
      </button>
      <ul class="idsk-dropdown__options idsk-shadow-medium">
            <li class="idsk-dropdown__option idsk-pseudolabel__wrapper "  data-pseudolabel="eng">
              <a href="#" lang="en">
                eng
              </a>
            </li>
            <li class="idsk-dropdown__option idsk-pseudolabel__wrapper "  data-pseudolabel="slo">
              <a href="#" lang="sk">
                slo
              </a>
            </li>
      </ul>
    </div>
        </div>
      </div>
    </div>

    <div class="govuk-predheader govuk-width-container">
      <div class="govuk-header__logo">
        <a href="/" class="govuk-header__link govuk-header__link--homepage" title="Odkaz na titulnú stránku">
          

          
 
          <img src="/assets/images/logo-moje.png" alt="Moje Slovensko logo s odkazom na titulú stránku" />
        </a>
      </div>
      <div class="govuk-header__btns-search" >
        

        <div class="govuk-header__mobile-menu desktop-hidden">
            <button type="button" class="govuk-header__menu-button font-bold govuk-js-header-toggle" aria-controls="navigation" hidden>
              Menu
            </button>
        </div>

          <div class="idsk-searchbar__wrapper" role="search">
            <input class="govuk-input" type="search" placeholder="Zadajte hľadaný výraz" title="Zadajte hľadaný výraz" name="search" />
            <button class="govuk-button govuk-button__basic" aria-label="Hľadať"><span class="material-icons" aria-hidden="true">search</span></button>
          </div>
        
      </div>
    </div>

  </header>
</div>

Makro

{% from "govuk/components/header/macro.njk" import govukHeader %}

{{ govukHeader({
  searchPanel: true,
  headerButtons: false
}) }}

Chybové hlásenie

Otvoriť ukážku na novej záložke : chybové hlásenie

Zdrojový kód

HTML

<p class="govuk-error-message">
  <span class="govuk-visually-hidden">Chyba:</span> Chybová hláška
</p>

Makro

{% from "govuk/components/error-message/macro.njk" import govukErrorMessage %}

{{ govukErrorMessage({
  text: "Chybová hláška"
}) }}

Informačný banner

Otvoriť ukážku na novej záložke : informačný banner

Zdrojový kód

HTML


<div class="govuk-notification-banner" role="region" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
  <div class="govuk-notification-banner__header">
    <h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
      Important
    </h2>
  </div>
  <div class="govuk-notification-banner__content">
    <p class="govuk-notification-banner__heading">
      This publication was withdrawn on 7 March 2014.
    </p>
  </div>
</div>

Makro

{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  text: "This publication was withdrawn on 7 March 2014."
}) }}

Kartička

Otvoriť ukážku na novej záložke : kartička

Horizontálna kartička

Zdrojový kód

HTML

<div class="idsk-card">
    <div class="idsk-card__image-wrapper">
      <img src="/assets/images/placeholder.png" alt="Nadpis kartičky">
    </div>
  <div class="idsk-card__content">
    <div class="idsk-card__heading">
      <h3>
          <a href="#" class="govuk-link" target=" _self ">Nadpis kartičky</a>
      </h3>
    </div>
    <div class="idsk-card__description">V tejto časti nájdete všetky podtrebné informácie spojené s používaním a vytvorením občianského preukazu s čipom</div>
      <p class="idsk-card__date-tags">
        <time datetime="2023-01-01">1. 1. 2023</time>
        <span>—</span>
              <span>
                  Tag 1
              </span>
                <span>|</span>
              <span>
                  Tag 2
              </span>
                <span>|</span>
              <span>
                  Tag 3
              </span>
      </p>
  </div>
</div>

Makro

{% from "govuk/components/card/macro.njk" import govukCard %}

{{ govukCard({
  title: "Nadpis kartičky",
  description:
    "V tejto časti nájdete všetky podtrebné informácie spojené s používaním a vytvorením občianského preukazu s čipom",
  imgSrc: "/assets/images/placeholder.png",
  internalLink: "#",
  date: "2023-01-01",
  dateLocale: "1. 1. 2023",
  tags: [
    {
      text: "Tag 1"
    },
    {
      text: "Tag 2"
    },
    {
      text: "Tag 3"
    }
  ]
}) }}

Menovka

Otvoriť ukážku na novej záložke : menovka

Zdrojový kód

HTML

<label class="govuk-label">
  Číslo občianskeho preukazu
    <span class="idsk-required">*</span>
</label>

Makro

{% from "govuk/components/label/macro.njk" import govukLabel %}

{{ govukLabel({
  text: "Číslo občianskeho preukazu"
}) }}

Nápoveda

Otvoriť ukážku na novej záložke : nápoveda

Zdrojový kód

HTML

<div class="govuk-hint">
  Teplotu udávajte v stupňoch Celsia s jedným desatinným miestom
Napríklad 28,5 °C.

</div>

Makro

{% from "govuk/components/hint/macro.njk" import govukHint %}

{{ govukHint({
  text:
    "Teplotu udávajte v stupňoch Celsia s jedným desatinným miestom\n" +
    "Napríklad 28,5 °C.\n"
}) }}

Omrvinková navigácia

Otvoriť ukážku na novej záložke : omrvinková navigácia

Zdrojový kód

HTML

<nav aria-label="Omrvinková navigácia">
  <div class="govuk-breadcrumbs">
    <ol class="govuk-breadcrumbs__list">
      <li class="govuk-breadcrumbs__list-item">
        <a class="govuk-breadcrumbs__link" href="/section">Sekcia</a>
      </li>
      <li class="govuk-breadcrumbs__list-item">
        <a class="govuk-breadcrumbs__link" href="/section/sub-section">Podsekcia</a>
      </li>
    </ol>
  </div>
</nav>

Makro

{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}

{{ govukBreadcrumbs({
  items: [
    {
      text: "Sekcia",
      href: "/section"
    },
    {
      text: "Podsekcia",
      href: "/section/sub-section"
    }
  ]
}) }}

Päta

Otvoriť ukážku na novej záložke : päta

Zdrojový kód

HTML

<footer class="govuk-footer">
  <div class="govuk-width-container">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
        <span class="govuk-footer__licence-description">
          Prevádzkovateľom služby je Ministerstvo investícií, regionálneho rozvoja a informatizácie SR.
          <br />
          Vytvorené v súlade s Jednotným dizajn manuálom elektronických služieb.
        </span>
      </div>
      <div class="govuk-footer__meta-item">
        <a
          class="govuk-footer__link govuk-footer__copyright-logo"
          href="#"
        >
          <img src="/assets/images/logo-moje.png" alt="Slovensko.sk" />
        </a>
      </div>
    </div>
  </div>
</footer>

Makro

{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{ govukFooter({}) }}

Pole na nahratie súboru

Otvoriť ukážku na novej záložke : pole na nahratie súboru

Zdrojový kód

HTML


<div class="govuk-form-group file-upload-component js-enabled " data-module="govuk-fileUpload">
  <h2 class="govuk-heading-m">Nahraj súbor</h2>
  <div class="upload-container" aria-label="Sekcia nahrávania súborov" role="region">


  <input class="govuk-file-upload just-file file-input"  data-file-input  id="fileInput" type="file" aria-describedby="uploadInstructions" hidden  >
    <div class="upload-box">
      <label for="fileInput" aria-label="Nahratie súboru"></label>
      <div class="upload-icon" aria-hidden="true">
        <span class="material-icons" aria-hidden="true">cloud_upload</span>
      </div>
      <div class="upload-text" id="uploadInstructions">
        <p class="govuk-body"><b>Zvoľte súbor a nahrajte ho</b></p>
        <p class="govuk-body">alebo preneste zvolenú prílohu sem (max. veľkosť 10MB)</p>
      </div>
      <button class="govuk-button govuk-button__basic upload-button" aria-label="Pridať prílohu" >
        <span class="material-icons" aria-hidden="true">add</span>
        <span>Pridať prílohu</span>
      </button>
    </div>
  </div>
</div>

Makro

{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}

{{ govukFileUpload({
  label: {
    text: "Upload a file"
  }
}) }}

Prehľad s chybovými hláseniami

Otvoriť ukážku na novej záložke : prehľad s chybovými hláseniami

Zdrojový kód

HTML

<div class="govuk-error-summary" data-module="govuk-error-summary">
  <div role="alert">
    <h2 class="govuk-error-summary__title">
      Zadajte správne tieto vstupné údaje a skúste odoslať znova.
    </h2>
      <p class="govuk-error-summary__description">
        Priestor pre popis, k akým chybám došlo a ako ich opraviť.
      </p>
    <div class="govuk-error-summary__body">
      <ul class="govuk-list govuk-error-summary__list">
        <li>
          <a href="#example-error-1">Prosím, zadajte správny tvar vášho Rodného čísla.</a>
        </li>
        <li>
          <a href="#example-error-2">Prosím, zadajte správny tvar vášho OP preukazu.</a>
        </li>
        <li>
          <a href="#example-error-3">Prosím, zadajte správny tvar vášho Tel.čísla.</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Makro

{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}

{{ govukErrorSummary({
  titleText: "Zadajte správne tieto vstupné údaje a skúste odoslať znova.",
  descriptionText: "Priestor pre popis, k akým chybám došlo a ako ich opraviť.",
  errorList: [
    {
      text: "Prosím, zadajte správny tvar vášho Rodného čísla.",
      href: "#example-error-1"
    },
    {
      text: "Prosím, zadajte správny tvar vášho OP preukazu.",
      href: "#example-error-2"
    },
    {
      text: "Prosím, zadajte správny tvar vášho Tel.čísla.",
      href: "#example-error-3"
    }
  ]
}) }}

Prepínacie pole

Otvoriť ukážku na novej záložke : prepínacie pole

Zdrojový kód

HTML


<div class="govuk-form-group">
  <div id="example-default-hint" class="govuk-hint">
    This includes changing your last name or spelling your name differently.
  </div>
  <div class="govuk-radios" data-module="govuk-radios">
    <div class="govuk-radios__item">
      <input class="govuk-radios__input" id="example-default" name="example-default" type="radio" value="yes">
      <label class="govuk-label govuk-radios__label" for="example-default">
        Yes
      </label>
    </div>
    <div class="govuk-radios__item">
      <input class="govuk-radios__input" id="example-default-2" name="example-default" type="radio" value="no">
      <label class="govuk-label govuk-radios__label" for="example-default-2">
        No
      </label>
    </div>
  </div>
</div>

Makro

{% from "govuk/components/radios/macro.njk" import govukRadios %}

{{ govukRadios({
  name: "example-default",
  hint: {
    text: "This includes changing your last name or spelling your name differently."
  },
  items: [
    {
      value: "yes",
      text: "Yes"
    },
    {
      value: "no",
      text: "No"
    }
  ]
}) }}

Rázcestník

Otvoriť ukážku na novej záložke : rázcestník

Zdrojový kód

HTML






<a class='govuk-signpost govuk-signpost__card {%- if vertical %} govuk-signpost__card--vertical {% endif %} govuk-signpost__link' href="#">
    <div class='govuk-signpost__container'>
        <div>
            <h3 class='govuk-signpost__title' >Dlhý nadpis</h3>
            <p class='govuk-signpost__description'>Tento text slúži iba ako ukážka naplneného obsahu v danom komponente. Nepoužívať pri implementácii a dizajne.</p>
        </div>
    </div>
</a>

Makro

{% from "govuk/components/signpost/macro.njk" import govukSignpost %}

{{ govukSignpost({
  asLink: true
}) }}

Rozbaľovací zoznam

Otvoriť ukážku na novej záložke : rozbaľovací zoznam

Zdrojový kód

HTML

<div class="govuk-form-group">
  <label class="govuk-label" for="select-1">
    Label text goes here
      <span class="idsk-required">*</span>
  </label>
  <select class="govuk-select" id="select-1" name="select-1">
    <option value="1">GOV.UK frontend option 1</option>
    <option value="2" selected>GOV.UK frontend option 2</option>
    <option value="3" disabled>GOV.UK frontend option 3</option>
  </select>
</div>

Makro

{% from "govuk/components/select/macro.njk" import govukSelect %}

{{ govukSelect({
  id: "select-1",
  name: "select-1",
  label: {
    text: "Label text goes here"
  },
  items: [
    {
      value: 1,
      text: "GOV.UK frontend option 1"
    },
    {
      value: 2,
      text: "GOV.UK frontend option 2",
      selected: true
    },
    {
      value: 3,
      text: "GOV.UK frontend option 3",
      disabled: true
    }
  ]
}) }}

Tabuľka

Otvoriť ukážku na novej záložke : tabuľka

Zdrojový kód

HTML

<table class="govuk-table">
  <tbody class="govuk-table__body">
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">January</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">£85</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">£95</td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">February</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">£75</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">£55</td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">March</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">£165</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">£125</td>
    </tr>
  </tbody>
</table>

Makro

{% from "govuk/components/table/macro.njk" import govukTable %}

{{ govukTable({
  rows: [
    [
      {
        text: "January"
      },
      {
        text: "£85",
        format: "numeric"
      },
      {
        text: "£95",
        format: "numeric"
      }
    ],
    [
      {
        text: "February"
      },
      {
        text: "£75",
        format: "numeric"
      },
      {
        text: "£55",
        format: "numeric"
      }
    ],
    [
      {
        text: "March"
      },
      {
        text: "£165",
        format: "numeric"
      },
      {
        text: "£125",
        format: "numeric"
      }
    ]
  ]
}) }}

Textové pole

Otvoriť ukážku na novej záložke : textové pole

Zdrojový kód

HTML

<div class="govuk-form-group govuk-input-component">

  <label class="govuk-label  govuk-body-m" for="input-example">
    Názov textového poľa
      <span class="govuk-body-s">(nepovinné)</span>
  </label>
  <div class="govuk-input-container">
    <input class="govuk-input  "  id="input-example" name="default" type="text">


  </div>
</div>

Makro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Názov textového poľa"
  },
  id: "input-example",
  name: "default"
}) }}

Tlačidlo

Otvoriť ukážku na novej záložke : tlačidlo

Zdrojový kód

HTML

<button type="submit" class="govuk-button govuk-button__basic" data-module="govuk-button">
  Primárne tlačidlo
</button>

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  text: "Primárne tlačidlo",
  classes: "govuk-button__basic"
}) }}

Viacriadkové textové pole

Otvoriť ukážku na novej záložke : viacriadkové textové pole

Zdrojový kód

HTML

<div data-module="govuk-textarea" class="govuk-form-group">
  <label class="govuk-label" for="more-detail">
    Can you provide more detail?
      <span class="idsk-required">*</span>
  </label>
  <div class="idsk-textarea__wrapper">
    <textarea class="govuk-textarea" id="more-detail" name="more-detail" rows="5"
    maxlength="200"></textarea>
    <span class="idsk-textarea--counter" aria-live="polite">
      <span>0</span> / 200
    </span>
  </div>
</div>

Makro

{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  name: "more-detail",
  id: "more-detail",
  label: {
    text: "Can you provide more detail?"
  }
}) }}

Začiarkavacie políčko

Otvoriť ukážku na novej záložke : začiarkavacie políčko

Zdrojový kód

HTML

<div class="govuk-form-group">
  <div class="govuk-checkboxes" data-module="govuk-checkboxes">
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="národnosť" name="národnosť" type="checkbox" value="british">
      <label class="govuk-label govuk-checkboxes__label" for="národnosť">
        Britská
      </label>
    </div>
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="národnosť-2" name="národnosť" type="checkbox" value="irish">
      <label class="govuk-label govuk-checkboxes__label" for="národnosť-2">
        Írska
      </label>
    </div>
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="národnosť-3" name="národnosť" type="checkbox" value="other">
      <label class="govuk-label govuk-checkboxes__label" for="národnosť-3">
        Občan inej krajiny
      </label>
    </div>
  </div>
</div>

Makro

{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  name: "národnosť",
  items: [
    {
      value: "british",
      text: "Britská"
    },
    {
      value: "irish",
      text: "Írska"
    },
    {
      value: "other",
      text: "Občan inej krajiny"
    }
  ]
}) }}

Zoskupenie polí

Otvoriť ukážku na novej záložke : zoskupenie polí

Zdrojový kód

HTML

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend">
    Aká je Vaša adresa?
  </legend>
</fieldset>

Makro

{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}

{{ govukFieldset({
  legend: {
    text: "Aká je Vaša adresa?"
  }
}) }}