Všetky komponenty

Akordeón

Otvoriť príklad na novej záložke

Code

Markup

<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">
        We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
      </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">
        We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
      </p>
    </div>
  </div>
</div>

Macro

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

{{ govukAccordion({
  id: "with-descriptions",
  items: [
    {
      heading: {
        text: "Názov"
      },
      content: {
        text: "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post."
      }
    },
    {
      heading: {
        text: "Názov"
      },
      summary: {
        text: "Popis"
      },
      content: {
        text: "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post."
      }
    }
  ]
}) }}

Omrvinková navigácia

Otvoriť príklad na novej záložke

Code

Markup

<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>

Macro

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

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

Tlačidlo

Otvoriť príklad na novej záložke

Code

Markup

<button type="submit" class="govuk-button govuk-button__basic" data-module="govuk-button">
  Primary button
</button>

Macro

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

{{ govukButton({
  text: "Primary button",
  classes: "govuk-button__basic"
}) }}

Kartička

Otvoriť príklad na novej záložke

Horizontálna kartička

Code

Markup

<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="1. 1. 2023">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>

Macro

{% 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: "1. 1. 2023",
  tags: [
    {
      text: "Tag 1"
    },
    {
      text: "Tag 2"
    },
    {
      text: "Tag 3"
    }
  ]
}) }}

Začiarkavacie políčko

Otvoriť príklad na novej záložke

Code

Markup

<div class="govuk-form-group">
  <div class="govuk-checkboxes" data-module="govuk-checkboxes">
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="nationality" name="nationality" type="checkbox" value="british">
      <label class="govuk-label govuk-checkboxes__label" for="nationality">
        British
          <span class="idsk-required">*</span>
      </label>
    </div>
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="nationality-2" name="nationality" type="checkbox" value="irish">
      <label class="govuk-label govuk-checkboxes__label" for="nationality-2">
        Irish
          <span class="idsk-required">*</span>
      </label>
    </div>
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="nationality-3" name="nationality" type="checkbox" value="other">
      <label class="govuk-label govuk-checkboxes__label" for="nationality-3">
        Citizen of another country
          <span class="idsk-required">*</span>
      </label>
    </div>
  </div>
</div>

Macro

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

{{ govukCheckboxes({
  name: "nationality",
  items: [
    {
      value: "british",
      text: "British"
    },
    {
      value: "irish",
      text: "Irish"
    },
    {
      value: "other",
      text: "Citizen of another country"
    }
  ]
}) }}

Detaily

Otvoriť príklad na novej záložke

Code

Markup

<details class="govuk-details">
  <summary class="govuk-details__summary">
    <span class="govuk-details__summary-text">
      Help with nationality
    </span>
  </summary>
  <div class="govuk-details__text">
    We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.
  </div>
</details>

Macro

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

{{ govukDetails({
  summaryText: "Help with nationality",
  text: "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post."
}) }}

Chybové hlásenie

Otvoriť príklad na novej záložke

Code

Markup

<p class="govuk-error-message">
  <span class="govuk-visually-hidden">Error:</span> Error message about full name goes here
</p>

Macro

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

{{ govukErrorMessage({
  text: "Error message about full name goes here"
}) }}

Prehľad s chybovými hláseniami

Otvoriť príklad na novej záložke

Code

Markup

<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>

Macro

{% 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"
    }
  ]
}) }}

Zoskupenie polí

Otvoriť príklad na novej záložke

Code

Markup

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend">
    What is your address?
  </legend>
</fieldset>

Macro

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

{{ govukFieldset({
  legend: {
    text: "What is your address?"
  }
}) }}

Pole na nahratie súboru

Otvoriť príklad na novej záložke

Code

Markup

<div class="govuk-form-group file-upload-component" data-module="govuk-fileUpload">

  <h2 class="govuk-heading-m">Nahraj subor</h2>
  <div class="upload-container" aria-label="File upload section" role="region">


  <input class="govuk-file-upload file-input " id="fileInput" type="file" aria-describedby="uploadInstructions" hidden  >
    <label for="fileInput" class="upload-box" aria-label="File upload box">
      <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ť 50MB)</p>
      </div>
      <button class="govuk-button govuk-button__basic upload-button" aria-label="Add attachment" >
        <span class="material-icons" aria-hidden="true">add</span>
        <span>Pridať prílohu</span>
      </button>
    </label>
  </div>
</div>

Macro

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

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

Päta

Otvoriť príklad na novej záložke

Code

Markup

<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>

Macro

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

{{ govukFooter({}) }}

Hlavička

Otvoriť príklad na novej záložke

The standard header as used on information pages

Code

Markup

<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>
    <div class="idsk-dropdown__wrapper idsk-secondary-navigation__dropdown" data-pseudolabel="jazykové menu">
      <button class="govuk-button govuk-button--texted--inverse 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 id="undefined-dropdown" class="idsk-dropdown__options idsk-dropdown__options--down" data-testid="dropdown-options">
            <li class="idsk-dropdown__option idsk-pseudolabel__wrapper" data-pseudolabel="english">
              <a href="#" lang="en">
                english
              </a>
            </li>
            <li class="idsk-dropdown__option idsk-pseudolabel__wrapper" data-pseudolabel="slovenčina">
              <a href="#" lang="sk">
                slovenčina
              </a>
            </li>
      </ul>
    </div>
  </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>
          <button class="govuk-button govuk-button__basic mobile-hidden">Tlacidlo 1</button>
          <button class="govuk-button govuk-button__basic mobile-hidden">Tlacidlo 2</button>
        


      </div>
    </div>

  </header>
</div>

Macro

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

{{ govukHeader({}) }}

Nápoveda

Otvoriť príklad na novej záložke

Code

Markup

<div class="govuk-hint">
  It&#39;s on your National Insurance card, benefit letter, payslip or P60.
For example, &#39;QQ 12 34 56 C&#39;.

</div>

Macro

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

{{ govukHint({
  text:
    "It's on your National Insurance card, benefit letter, payslip or P60.\n" +
    "For example, 'QQ 12 34 56 C'.\n"
}) }}

Textové pole

Otvoriť príklad na novej záložke

Code

Markup

<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>

Macro

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

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

Menovka

Otvoriť príklad na novej záložke

Code

Markup

<label class="govuk-label">
  National Insurance number
    <span class="idsk-required">*</span>
</label>

Macro

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

{{ govukLabel({
  text: "National Insurance number"
}) }}

Informačný banner

Otvoriť príklad na novej záložke

Code

Markup

<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>

Macro

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

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

Prepínacie pole

Otvoriť príklad na novej záložke

Code

Markup

<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
          <span class="idsk-required">*</span>
      </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
          <span class="idsk-required">*</span>
      </label>
    </div>
  </div>
</div>

Macro

{% 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"
    }
  ]
}) }}

Rozbaľovací zoznam

Otvoriť príklad na novej záložke

Code

Markup

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








  <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>

Macro

{% 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
    }
  ]
}) }}

Rázcestník

Otvoriť príklad na novej záložke

Code

Markup

<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>

Macro

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

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

Tabuľka

Otvoriť príklad na novej záložke

Code

Markup

<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>

Macro

{% 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"
      }
    ]
  ]
}) }}

Viacriadkové textové pole

Otvoriť príklad na novej záložke

Code

Markup

<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>

Macro

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

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