Details - Detaily

Detaily

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

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."
}) }}

Detaily expanded

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

Zdrojový kód

HTML

<details id="help-with-nationality" class="govuk-details" open>
  <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({
  id: "help-with-nationality",
  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.",
  open: true
}) }}

Detaily s HTML položkami

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

Zdrojový kód

HTML

<details class="govuk-details">
  <summary class="govuk-details__summary">
    <span class="govuk-details__summary-text">
      Kde nájdem svoje identifikaťné číslo
    </span>
  </summary>
  <div class="govuk-details__text">
    Vaše identifikačné číslo môžete uviesť z
<ul>
  <li>občianskeho preukazu</li>
  <li>čísla faktúry</li>
  <li>daňového čísla</li>
</ul>

  </div>
</details>

Makro

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

{{ govukDetails({
  summaryText: "Kde nájdem svoje identifikaťné číslo",
  html:
    "Vaše identifikačné číslo môžete uviesť z\n" +
    "<ul>\n" +
    "  <li>občianskeho preukazu</li>\n" +
    "  <li>čísla faktúry</li>\n" +
    "  <li>daňového čísla</li>\n" +
    "</ul>\n"
}) }}